Redux 源码解析之 combineReducers

源码简读

/**
 * 将多个 reducer => { user: function() {}, product: function() {} }
 */
const combineReducers = (reducers) => {
  const reducerKeys = Object.keys(reducers);
  const finalReducers = {};

  for(let i = 0; i < reducerKeys.length; i++) {
    const key = reducerKeys[i];
    finalReducers[key] = reducers[key];
  }

  const finalReducerKeys = Object.keys(finalReducers);

  return (state = {}, action) {
    let hasChanged = false;
    const nextState = {};
    for (let i = 0; i < finalReducerKeys.length; i++) {
      const key = finalReducerKeys[i];
      const reducer = finalReducers[key];
      const previousStateForKey = state[key];
      const nextStateForKey = reducer(previousStateForKey, action);
      nextState[key] = nextStateForKey;
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey;
    }
    return hasChanged ? nextState : state;
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

源码比较简单,从上一节我们可以知道 redux 会根据传入的 reducer 来生成 state,那么如果我们要管理一个 state 树,也就是我们有多个 reducer,就需要使用到这个函数。

测试流程

const reducer = combineReducers({
  user: userReducer,
  product: productReducer,
});

const store = createStore(reducer);
// 这个地方初始化的 state 是长这样的
state = {
  user: xxx,
  product: xxx,
};
1
2
3
4
5
6
7
8
9
10
11
Last Updated: 1/13/2019, 10:35:05 PM