初学redux

Bertha 。 2022-02-23 02:38 158阅读 0赞

import { createStore } from 'redux'
    
    const initState = {
        count:0
    }
    
    const ADD_TODO = {
        type:'ADD',
        payload:'加法操作'
    }
    
    const LESS_TODO = {
        type:'LESS',
        payload:'减法操作'
    }
    
    const counter = (state = initState,action) => {
        switch(action.type){
            case 'ADD':
                return {
                    count:state.count+1
                }
            case 'LESS':
                return {
                    count:state.count-1
                }
            default:
                return state;
        }
    }
    
    let  store = createStore(counter);
    
    let unlistener = store.subscribe(()=>{
        console.log(store.getState())
    })
    
    store.dispatch(ADD_TODO);
    store.dispatch(ADD_TODO);
    store.dispatch(ADD_TODO);
    store.dispatch(LESS_TODO);
    
    unlistener()

当前应用的所有状态都保存在store的state树中，这是一个集合  
想要修改state中的数据，必须要发送action，可以在任何时候调用dispatch发送action  
action会作为第二个参数触发创建store时传入的Reducer函数,第一个参数是当前的state树  
Reducer函数会根据action中的信息，返回一个新的state树存入store  
这使得程序的运行在界面出现之前就变得可以预测：  
UI组件使用初始的state树，当界面需要改变时，触发action，改变store中state树的数据,然后重新渲染显示

发表评论取消回复

表情：

评论列表（有 0 条评论，158人围观）

还没有评论，来说两句吧...

相关阅读

相关 redux

https://cn.redux.js.org/ npm install --save redux npm install --save react-redux npm in

朴灿烈づ我的快乐病毒、/ 2022年11月25日 04:04/ 0 赞/ 161 阅读

相关 Redux—redux-thunk——combineReducers

任何对数据的才做都会经理renducer，reducer要求是个纯函数（在函数内部不能修改函数的参数(输入)，要有返回值），它的功能是：传入旧的state，根据action对s

小灰灰/ 2022年11月22日 02:49/ 0 赞/ 155 阅读

相关 Redux

[官方文档][Link 1] [国人教程][Link 2] 总结： 1.store由redux的createStore生成 2.state通过store.get

一时失言乱红尘/ 2022年05月30日 09:05/ 0 赞/ 137 阅读

相关初学redux

import { createStore } from 'redux' const initState = { count:0

Bertha 。/ 2022年02月23日 02:38/ 0 赞/ 159 阅读

相关 react redux redux-saga

react是前端view框架 redux是前端状态管理器 redux-saga是redux的升级版，异步状态管理 `saga.js`管理异步状态变更，一般是

柔光的暖阳◎/ 2022年02月18日 11:11/ 0 赞/ 251 阅读

相关一篇文章总结redux、react-redux、redux-saga

> 本篇主要将react全家桶的产品非常精炼的提取了核心内容，精华程度堪比精油。各位大人，既然来了，客官您坐，来人，给客官看茶~~ redux 前言首先，本篇文

深碍√TFBOYSˉ_/ 2022年01月23日 07:39/ 0 赞/ 302 阅读

相关 redux

redux redux也是一个架构思维，在这个架构思维中 React 充当是视图 V \------------- redux 基础 – end ---------

红太狼/ 2022年01月10日 01:59/ 0 赞/ 261 阅读

相关 Redux

1 React Components -> Action Creators -> Reducers -> Store 用户通过界面组件触发action函数，然后通过reduc

太过爱你忘了你带给我的痛/ 2021年12月17日 00:01/ 0 赞/ 288 阅读

相关 Flux、Redux到react-redux发展衍变之Redux解读

续上篇，在Flux后，为了更好的实现MVC，Redux模式出现。不同于 Flux ，Redux 不再有 dispatcher 的概念（Store已经集成了dispatch方

「爱情、让人受尽委屈。」/ 2021年09月17日 03:01/ 0 赞/ 293 阅读

相关 Redux异步操作redux-thunk

用户发出 Action，Reducer 函数算出新的 State，View 重新渲染。但是，一个关键问题没有解决：异步操作怎么办？Action 发出以后，Reducer 立即算

迈不过友情╰/ 2021年09月15日 12:36/ 1 赞/ 389 阅读