目录

• 1，分析
• 2，实现
• • 2.1，简单实现
  • 2.2，参考源码具体实现
  • • 实现

1，分析

大型项目中，数据和操作都比较复杂，所以会对 reducer 进行细分管理。

combineReducers 的作用：结合多个 reducer。

举例：

// reducer.js import { combineReducers } from "redux"; import loginReducer from "./login"; import userReducer from "./user";  export default combineReducers({     a: loginReducer,     b: userReducer, }); 

// 使用 import { createStore } from "redux"; import reducer from "./reducer";  const store = createStore(reducer); 

2，实现

2.1，简单实现

// reducer.js import loginReducer from "./login"; import userReducer from "./user";  export default (state = {}, action) => {     const newState = {         a: loginReducer(state.a, action),         b: userReducer(state.b, action),     };     return newState; }; 

解释：
createStore(reducer) 初始化时，会调用一次 reducer，此时 state.a = undefined，所以会使用 loginReducer(state = {}) 的默认值进行初始化，并将返回值作为 newState.a 的初始值保存。

之后分发指定 action 时，state.a 就是旧值{}，作为 loginReducer 的 state 传入。

2.2，参考源码具体实现

在使用官方的 combineReducers 时，发现了2个特点：

• 所有细分的 reducer 的 state 参数必须指定初始值，如果不想指定，需要默认为 null，而不是 undefined（相当于没有指定初始值）。
• 所有细分的 reducer 中，不能使用特殊的 type 来判断做一些事情。

举例1：没有初始值，得指定为 null。

// reducer/xxx.js export default (state = null, { type, payload }) => {     switch (type) {         case LOGIN:             return payload;         default:             return state;     } }; 

举例2：特殊的 type，比如 createStore() 初始化时的 type=@@redux/INITw.2.n.b.2.o；还有 combineReducers() 初始化时的 type=@@redux/PROBE_UNKNOWN_ACTIONe.a.v.4.3.3。

不能在某个 reducer 中使用这2个特殊 type，会报错。

// reducer/xxx.js export default (state = null, { type, payload }) => {     switch (type) {         case type.startsWith("@@redux/INIT"):             console.log("craeteStore 初始化");         case type.startsWith("@@redux/PROBE_UNKNOWN_ACTION"):             console.log("combineReducers 初始化");         default:             return state;     } }; 

实现

export const combineReducers = (reducers) => {     validate(reducers);     return (state = {}, action) => {         let newState = {};         for (const key in reducers) {             if (Object.hasOwnProperty.call(reducers, key)) {                 const reducer = reducers[key];                 // 参考上面的简单实现。                 newState[key] = reducer(state[key], action);             }         }         return newState;     }; };  function validate(reducers) {     if (typeof reducers !== "object" || Object.getPrototypeOf(reducers) !== Object.prototype) {         throw new Error("reducers 必须是一个 plain Object");     }     for (const key in reducers) {         if (Object.hasOwnProperty.call(reducers, key)) {             const reducer = reducers[key];             // 判断是否进行了初始化，和是否使用了特殊 type             let state = reducer(undefined, { type: `@@redux/INIT${getRandomString()}` });             if (state === undefined) {                 throw new TypeError("reducers must not return undefined");             }             state = reducer(undefined, { type: `@@redux/PROBE_UNKNOWN_ACTION${getRandomString()}` });             if (state === undefined) {                 throw new TypeError("reducers must not return undefined");             }         }     } }  function getRandomString() {     return Math.random().toString(36).substring(2, 8).split("").join("."); } 

以上。