如何正确理解redux?

一直不理解redux里面的createStore,是所有的state都放到这个里面?然后更不理解getState这个函数,获取当前state的值,createStore里面只有一个state?不然怎么获取一个

阅读 4.8k
8 个回答

我也是刚学没多长时间,可以告诉我的理解

第一点,你的state都放在reducer里面,reducer也可以做拆分,把不同页面的state初始化
当你createStore的时候,把reducer绑定到store上面,就是可以获得所有的state

如果你不想获取全部的state,可以在组件中使用
function mapStateToProps(state) {

return {
    state: state.reducer1
}

}
通过使用不同的reducer来绑定不同的state
最后通过connect方法把state和action绑定到组件上面。

store就像人的一生,包括了所有的东西。
createStore就像人出生,从这一刻开始存在了。
store.getState()则像是拍一张照片,可以获取当前的信息。
store.getState()得到的是一个能完全描述一个人的现在的样子的一个状态树,也就是一个对象。
每一个属性都描述了这个人的一部分信息,比如年龄,现在的穿着等,这些信息合起来就能完整描述人的信息,如果科技像西部世界一样发达,根据这些信息是完全可以造出来一个人的。

Redux是一个状态管理的框架。采用的是订阅者模式的思想。

  1. 创建store。传入参数为一个纯函数(pure function),即为reducer,其作用就是将action映射成对应的state,比如一个ADD_ACTION映射为state+1

  2. 调用store.subscribe(fn)来注册订阅状态的变化。每当action触发state的变化,就会将新的状态传入fn函数中。比如在Reactfn可以用来调用Component的setState(obj)函数,做到更新组建。

  3. 能更新state的操作就只有action。通过调用store.dispatch(action)函数来更改状态。

createStore(reducer) --> store.subscribe(fn) --> store.dispatch(action) -->fn(newState)

视频非常好,建议先完成前两步,再回头看视频,你会一下子懂很多了~

提升篇:

  • flux单向数据流的概念,然后Flux,Reflux,Redux库的对比,Redux的架构思想(很多借鉴了ELM)

  • 阅读源代码

  • 实践实践再实践

先举下一个简单的用法:

// 做些准备工作(创建reducers, store)
const reducer1 = (state = {a: ''}, action) => { /* 具体实现省略 */ }
const reducer2 = (state = {b: 0}, action) => { /* 具体实现省略 */ }

const rootReducer = combineReducers({
    reducer1, 
    reducer2,
});

const store = createStore(rootReducer);

/* 这个时候的全局state
 * state = {
       reducer1: {a: ''},
       reducer2: {B: 0}, 
   }  
 */
const state = store.getState();

然后我们来聊聊为什么最后state会这样子的

先说说combineReducers这个函数, 这个函数大概是长成下面的样子(简化了很多)

/*
 * 记住这里的reducers是一个对象
 * 键就是我们最后getState()得到的state的键
 * 值是我们的'子reducer'
 */
function combineReducers(reducers) {
    return function reducer(state, action) {
        // 遍历reducers中的所有reducer,依次执行每个reducer,所有执行的reducer参数均为(state, action),并更新state上对应key上的值
        for (let reducerKey of reducers) {
            const reducerFn = reducers[reducerKey];
            state[reducerKey] = reducerFn(state, action);
        }
        
        // 执行完所有的reducers后,返回更新后的state
        return state;
    }
}

要理解redux, 理解上面的函数很重要, 更重要的是从上面的函数里明白一点:

redux通过combineReducers将所有子reducer结合起来,以至于每次dispatch一个action的时候,所有的reducer都会执行一遍, 并且action这个参数都是一致的

接着说说createStore,刚才说了combineReducers其实返回的是一个rootReducer,那么getState得到的state, 实际上可以看成state = rootReducer(preState, action).

最后说一句, 关于state的黑魔法其实就在combineReducers这个函数上, 楼主有空可以去看看源码上的这个方法, 而它的核心思想就是我上面列的那段代码.

store里面只存在一个state,可以通过store.getState()方法获取,reducer是一个纯函数,其实就是重新生成state的过程,生成之后返回存储于store中。

相当于store是一个流水线工人(先创建一个工人:createStore(reducer)),手头上有加工的工具(reducer),上游工位只要有加工品(state)下来(action),他就拿过来用工具(reducer)加工后传给下个工位(store.dispatch(),自动触发reducer处理后返回新的state),做完一个加工品就提醒一下(store.subscribe()监听函数,state变化时触发)。在产线上任何一个工位都可以检查加工品(store.getState()

个人理解的比喻,可能有点偏差

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题