redux源码浅析(2)

前言

在阅读源码的过程中我也翻阅了大量的资料。一般是先去看别人的源码分析完完整镇过的读一遍之后，看完了之后自己再把官网的clone下来自己再慢慢的阅读添加注释。希望大家在阅读完有感想之后也把官网源码clone下来不照着任何的资料边写注释边阅读完全部源码，这样子更有利于深刻理解。

在工作中其实会经常使用到 redux 数据状态处理库，在一开始的使用中就一直听到说 reducer 必须是一个纯函数，不能有副作用!state 需要有一个默认值!等等的约束。当然也踩过含有副作用修改了 state 造成视图层不更新的 bug(state 嵌套过深的锅。。。) 一直停留在知其然不知其所以然的层次 想到彻底的掌握以及明白 redux 的原理的办法当然就是直接阅读源码啦 而且 redux 非常简洁才 2kb 而已= = 非常值得一读

最开始我们分析 createStore 函数的源码，接下来还有一个 api 我们会经常使用到就是 combineReducer，用于把多个分模块的子 reducer 生成一个总的 reducer

combineReducers 的基本使用

 1 //常用的三个api
 2 import { createStore, combineReducers, applyMiddleware } from "redux";
 3 
 4 import { userReducer } from "./user/reducer";
 5 import { todoReducer } from "./todo/reducer";
 6 //combineReducers用于合并多个子reducer生成一个总的reducer
 7 const reducers = combineReducers({
 8   userStore: userReducer,
 9   todoStore: todoReducer
10 });

明白了 combineReducers 的基本用法之后我们就可以深入源码啦

上源码，为了减小篇幅，我删减了很多没用的代码（包括一些错误边界处理，其实很多错误边界处理都很有意思），如果想看完整的redux代码注释的话可以点击这里。

combineReducers

通过源码 我们可以看到 combineReducers 其实接受要合并的 reducer 对象 返回 combination 函数 其实 combination 还是一个 reducer dispatch（action）的时候 会依次调用子 reducer 计算出子 reducer 的 state 值再而合并成对象。

• combineReducers 一开始会循环所有的子 reducer 筛选出可用的 reducer(state 不能为 underfined 子 reducer 在 redux 内部自定义 action 的时候必须返回默认值 state)并且生成真正可用的 finalReducers
• dispatch（action）的时候 会循环所有的子 reducer 传入 action 依次生成新的子 state 值 之后浅比较之前的 state 和新生成的 state 如果浅比较不相同就把 hasChanged 赋值为 true 证明子 state 改变了自然而然总 state 也改变了
• combination 在返回 state 值时会进行判断 判断当前的 hasChanged 是否为 true 是的话证明 state 发生了变化返回新的 state 不然 state 没有变化返回旧的 state 值

 1 export default function combineReducers(reducers) {
 2   //获取所有子reducers的key值
 3   const reducerKeys = Object.keys(reducers);
 4   //筛选后可用的reducers
 5   const finalReducers = {};
 6   for (let i = 0; i < reducerKeys.length; i++) {
 7     const key = reducerKeys[i];
 8     /*
 9     * 开发环境下下遍历所有子reducers的value值
10     * 如果value为undefined 抛出警告
11     * 即 combineReducers({a:aReducer,b:bReducer}) 中的aReducer 不能为underfined
12     * */
13     if (process.env.NODE_ENV !== "production") {
14       if (typeof reducers[key] === "undefined") {
15         warning(`No reducer provided for key "${key}"`);
16       }
17     }
18 
19     //进行筛选 筛选出函数类型的reducer
20     if (typeof reducers[key] === "function") {
21       finalReducers[key] = reducers[key];
22     }
23   }
24   const finalReducerKeys = Object.keys(finalReducers);
25 
26   let shapeAssertionError;
27   try {
28     //assertReducerShape是一个错误处理函数判断子reducer在传入一个非预定好的action时 是否会返回默认的state
29     assertReducerShape(finalReducers);
30   } catch (e) {
31     shapeAssertionError = e;
32   }
33 
34   return function combination(state = {}, action) {
35     //state是否改变 这里判断state是否改变是通过浅比较的 所以才要求每次返回的state都是一个全新的对象
36     let hasChanged = false;
37     //新的state值 这里的state是根rootReducer的state
38     const nextState = {};
39     for (let i = 0; i < finalReducerKeys.length; i++) {
40       const key = finalReducerKeys[i];
41       //根据key值获取相当应的子reducer
42       const reducer = finalReducers[key];
43       //获取上一次当前key值所对应的state值 下面要进行浅比较
44       const previousStateForKey = state[key];
45       //获取传入action之后新生成的state值
46       const nextStateForKey = reducer(previousStateForKey, action);
47       if (typeof nextStateForKey === "undefined") {
48         const errorMessage = getUndefinedStateErrorMessage(key, action);
49         throw new Error(errorMessage);
50       }
51       //循环执行reducer 把新的值进行存储
52       nextState[key] = nextStateForKey;
53       //浅比较  这里把旧的子reducer state值 与传入action之后生成的state值进行浅比较 判断state是否改变了
54       hasChanged = hasChanged || nextStateForKey !== previousStateForKey;
55     }
56     //根据判断赶回state   只要有一个子reducer hasChanged为true那么就重新返回新的nextState  所以这里揭示了为什么reducer必须是纯函数而且如果state改变了必须返回一个新的对象
57     //如果返回的是依然的state对象（有副作用的push，pop方法）如果state是对象 因为nextStateForKey !== previousStateForKey比较的是引用 那么 hasChanged认为是false没有发生改变 自然而然下面返回的state依然是旧的state
58     return hasChanged ? nextState : state;
59   };
60 }
61 
62 function assertReducerShape(reducers) {
63   Object.keys(reducers).forEach(key => {
64     //遍历reducer
65     const reducer = reducers[key];
66     //先依次执行reducer 看是否有默认返回值state 其中ActionTypes.INIT为内部自定义的action 自然而然的执行到default 如果返回undefined 抛出错误 state要有默认值
67     const initialState = reducer(undefined, { type: ActionTypes.INIT });
68 
69     if (typeof initialState === "undefined") {
70       throw new Error(
71         `Reducer "${key}" returned undefined during initialization. ` +
72           `If the state passed to the reducer is undefined, you must ` +
73           `explicitly return the initial state. The initial state may ` +
74           `not be undefined. If you don't want to set a value for this reducer, ` +
75           `you can use null instead of undefined.`
76       );
77     }
78     if (
79       typeof reducer(undefined, {
80         type: ActionTypes.PROBE_UNKNOWN_ACTION()
81       }) === "undefined"
82     ) {
83       throw new Error(
84         `Reducer "${key}" returned undefined when probed with a random type. ` +
85           `Don't try to handle ${
86             ActionTypes.INIT
87           } or other actions in "redux/*" ` +
88           `namespace. They are considered private. Instead, you must return the ` +
89           `current state for any unknown actions, unless it is undefined, ` +
90           `in which case you must return the initial state, regardless of the ` +
91           `action type. The initial state may not be undefined, but can be null.`
92       );
93     }
94   });
95 }

总结

combineReducers的返回值实质上就是一个reducer函数，这个返回的reducer函数会把action传入各个子reducer中获取子state然后进行合并。