Redux 源码剖析（下）：combineReducers 方法大揭秘

2023-10-09 23:29:47

续前篇，剖析之旅再启程

在前一篇文章《我的源码阅读之路：Redux 源码剖析（上）》中，我们一起探索了 Redux 源码中的 createStore.js，揭开了 Redux 创建 Store 的奥秘。

这次，我们将继续我们的源码阅读之旅，把目光投向另一个关键文件——combineReducers.js。combineReducers 是一个非常重要的 Redux 工具函数，它可以将多个 reducer 合并成一个根 reducer，从而使 Redux 的状态管理更加清晰和可控。

做好准备，我们现在就潜入 Redux 源码的海洋，去发现 combineReducers 的奥秘！

Redux combineReducers 方法剖析

combineReducers 方法的主要作用是将多个 reducer 合并成一个根 reducer。我们先来看看它的定义：

export default function combineReducers(reducers) {
  if (process.env.NODE_ENV !== 'production') {
    if (reducers === null || typeof reducers !== 'object') {
      throw new Error(
        `combineReducers expected an object but got ${typeof reducers}.`
      );
    }

    const reducerKeys = Object.keys(reducers);
    for (let i = 0; i < reducerKeys.length; i++) {
      const key = reducerKeys[i];
      if (typeof reducers[key] !== 'function') {
        throw new Error(`reducer ${key} must be a function.`);
      }
    }
  }

  const finalReducers = {};
  for (let key in reducers) {
    const reducer = reducers[key];
    finalReducers[key] = function combination(state = reducer(undefined, { type: undefined }), action) {
      return reducer(state, action);
    };
  }

  return function combination(state = {}, action) {
    let hasChanged = false;
    const nextState = {};
    for (let key in finalReducers) {
      const reducer = finalReducers[key];
      const previousStateForKey = state[key];
      const nextStateForKey = reducer(previousStateForKey, action);
      nextState[key] = nextStateForKey;
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey;
    }

    return hasChanged ? nextState : state;
  };
}

拆解 combineReducers 方法

从代码中，我们可以看出 combineReducers 方法主要做了两件事：

校验 reducers 的合法性，确保 reducers 是一个非空对象，并且每个 reducer 都是一个函数。
将每个 reducer 包装成一个新的 reducer，并把它们合并成一个根 reducer。

包装 reducer 的过程

对于每个 reducer，combineReducers 方法都会将其包装成一个新的 reducer。这个新的 reducer 会接收两个参数：

state：上一次 reducer 返回的状态。
action：当前 dispatch 的 action。

包装后的 reducer 会调用原始 reducer，并将原始 reducer 的返回值作为新 reducer 的返回值。

合并 reducer 的过程

combineReducers 方法会将包装后的 reducer 合并成一个根 reducer。这个根 reducer接收两个参数：

state：上一次根 reducer 返回的状态。
action：当前 dispatch 的 action。

根 reducer 会遍历所有包装后的 reducer，并调用每个包装后的 reducer 来计算新状态。如果任何一个包装后的 reducer 返回的新状态与上一次的状态不同，则根 reducer 会返回一个新的状态对象，否则它会返回上一次的状态对象。

为什么需要 combineReducers 方法？

combineReducers 方法在 Redux 中非常重要，它提供了以下几个好处：

模块化： combineReducers 方法可以将 Redux 的状态管理拆分成多个独立的模块，每个模块都有自己的 reducer 来管理自己的状态。
可扩展性： 随着应用程序的不断发展，需要管理的状态也会不断增加。combineReducers 方法可以轻松地将新的 reducer 添加到应用程序中，而无需修改现有的代码。
可测试性： 将 Redux 的状态管理拆分成多个独立的模块后，可以更容易地对每个 reducer 进行单元测试。

combineReducers 方法的局限性

combineReducers 方法虽然非常有用，但也有以下几个局限性：

性能问题： 如果 Redux 的状态非常庞大，combineReducers 方法可能会导致性能问题。
状态的不可变性： combineReducers 方法不会对状态进行任何修改，而是会返回一个新的状态对象。这可能会导致性能问题，因为 Redux 会在每次状态变化后重新渲染整个组件树。

如何解决 combineReducers 方法的局限性？

为了解决 combineReducers 方法的局限性，Redux 社区开发了许多工具库，比如 Redux Toolkit 和 Reselect。这些工具库可以帮助我们优化 Redux 的性能，并简化 Redux 的开发。

Redux 源码剖析：未完待续

combineReducers 方法只是 Redux 源码中的众多工具函数之一。Redux 源码中还有许多其他的工具函数和类，比如 useSelector、useDispatch、createSlice 等。这些工具函数和类共同构成了 Redux 的核心，为我们提供了强大的状态管理能力。

后续的文章中，我们将继续探索 Redux 源码中的其他工具函数和类，并揭开 Redux 的更多奥秘。