javascript - 如何正确理解redux？

Question

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

Answer 1

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

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

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

return {
    state: state.reducer1
}

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

Answer 2

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

Answer 3

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

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

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

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

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

Answer 4

• 多看官方文档，一遍不懂再多看几遍（官方文档非常好）

• 实践redux

• 官方视频：getting-started-with-redux 和 building-react-applications-with-idiomatic-redux

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

提升篇：

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

• 阅读源代码

• 实践实践再实践

Answer 5

先举下一个简单的用法:

// 做些准备工作(创建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这个函数上, 楼主有空可以去看看源码上的这个方法, 而它的核心思想就是我上面列的那段代码.

Answer 6

看一下文档好点。刚开始都会难理解，上手曲线高一些，多看看就好了。推荐几个链接

redux中文
阮一峰redux
redux之reducer
redux之store

Answer 7

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