1、前言
下边章节中将详细分析源码,源码分析中对于一些边界的判断、类型判断等不做重点分析,主要将分析的重点放在主流程方向上。
2、createStore
createStore 作为 Redux 的核心 api 之一,其作用是通过 reducer 和 中间件 middleware 构造一个为 store 的数据结构。关于 createStore 的使用可参考上一章节 Redux源码分析(1) - Redux介绍及使用 和 官方文档 createStore 。
createStore 的源码结构图如下图所示。根据是否传入enhancer,分别做不同的逻辑判断
2.1 存在enhancer
当存在enhancer的时候,实际执行语句如下:
//createStore.js
return enhancer(createStore)(reducer, preloadedState); //记为语句(1)
在上一章节中,我们介绍过 Redux 的如何使用:
//demo
let store = createStore(rootReducer, applyMiddleware(Logger, Test)); //记为语句(2)
由语句(2)可知:enhancer 其实就是 applyMiddleware 作用中间件(此处为Logger, Test)的结果。查看 applyMiddleware 源码,大致结构如下:
//applyMiddleware.js
function applyMiddleware(...middlewares){
//createStore中对于的enhancer
return createStore => (...args) => {
//...
return {
...store,
dispatch // 覆盖store中的dispatch
};
}
}
由 applyMiddleware 的源码可知。语句(1)执行的就是 applyMiddleware 返回高阶函数的完整执行,最终返回的结果是包含 store 所有属性 和 dispatch属性的一个对象,这也与没有enhancer时,createStore输出的结果保持之一。因为 store 对象中本身就存在 dispatch 属性,由此可知 :
applyMiddleware 作用中间件的结果就是更改 store 对象的dispatch。这是前文提到过的,applyMiddleware 本质是对 dispatch 的增强。至于是如何增强的,在下文会详细分析。
2.2 不存在enhancer
首先看下此时对应的返回结果
//createStore.js
return {
dispatch,
subscribe,
getState,
replaceReducer,
[$$observable]: observable
};
2.2.1 方法内的局部变量
let currentReducer = reducer; // 临时reducer
let currentState = preloadedState; //当前的state值,默认为初始化preloadedState
let currentListeners = []; // 监听队列,用于存放监听事件, 发布-订阅模式
let nextListeners = currentListeners; // 浅拷贝下这个队列
let isDispatching = false; // 标志位,用来判断是否有存在正在执行的dispatch
各个变量的作用,注释中已经详细注明,不再赘述。
2.2.2 getState
根据 Redux api 可知:getState 方法返回当前的 state 树。currentState 默认值 为 preloadedState,具体的
currentState 取决于 dispatch(action) 时 reducer 执行后返回的结果。其中如果 isDispatching 为 true 时,表示有 dispatch 正在执行,此时获取 state 的值会导致获取不到正确的 state。
function getState() {
if (isDispatching) {
.....
}
return currentState;
}
2.2.3 subscribe
先来看看subscriber的使用,其中 listener 表示监听触发时,需要做的一些操作。
let unsubscribe = store.subscribe(listener)
unsubscribe()
subscribe 的源码如下:
function subscribe(listener) {
// 类型判断
if (typeof listener !== 'function') {
throw new Error('Expected the listener to be a function.');
}
// 同理不可以dispatch中
if (isDispatching) {
//……
}
// 用来表示订阅标记,用于避免取消订阅后再次取消
let isSubscribed = true;
// ensureCanMutateNextListeners干啥的,点击去看一下
ensureCanMutateNextListeners();
// 将 listener 存在在 发布-订阅模式的监听队列 nextListeners 中
nextListeners.push(listener);
// 返回取消的function(unsubscribe)
return function unsubscribe() {
// 如果已经取消订阅 直接直接return
if (!isSubscribed) {
return;
}
// 同理
if (isDispatching) {
//……
}
// 这里标记为 已经取消订阅
isSubscribed = false;
// 保存订阅快照
ensureCanMutateNextListeners();
// 根据索引 在监听队列里删除监听
const index = nextListeners.indexOf(listener);
nextListeners.splice(index, 1);
};
}
通过源码的解读可知。listener 必须传入一个 function 类型,否则就会报错。这里用到了发布-订阅模式,执行 subscribe 方法时,将传入的 listener 存放在 监听队列 nextListeners 里,currentListeners 和 nextListeners 都是引用类型,都是指向的一个内存地址,可以理解为是一个东西。
返回值是一个 unsubscribe 函数。执行该函数,就能够取消订阅。具体来看首先判断 isSubscribed 是否为 false,如果是则代表已经取消了该订阅,再次执行改订阅则直接忽视。如果 isSubscribed 为 ture 则表示该订阅还存在,则通过 indexOf 方法找到索引后,通过 splice 方法,将该订阅从订阅队列中取消,同时不要忘记将 isSubscribed 设置为已经 false (表示已经取消)。
2.2.4 dispatch
dispatch的使用方式如下。分发 action是触发 state 变化的惟一途径。匹配到对应的 reducer 执行之后,会返回一个新的 state。
store.dispatch(action)
dispatch 的源码如下:
function dispatch(action) {
// acticon必须是由Object构造的函数, 否则throw Error
if (!isPlainObject(action)) {
// 抛出错误
}
// 判断action, 不存在type throw Error
if (typeof action.type === 'undefined') {
// 抛出错误 'Have you misspelled a constant?'
);
}
// dispatch中不可以有进行的dispatch
if (isDispatching) {
// 抛出错误
}
try {
// 执行时标记为true
isDispatching = true;
// reducer形式如下:(state,action)=>{} , reducer本身就是个函数,由此可见dispatch(action), 就是执行reducer方法,并将currentState,action作为参数
currentState = currentReducer(currentState, action);
} finally {
// 最终执行, isDispatching标记为false, 即完成状态·
isDispatching = false;
}
// 循环监听队列,并执行每一个监听事件
const listeners = (currentListeners = nextListeners);
for (let i = 0; i < listeners.length; i++) {
const listener = listeners[i];
// 执行每一个监听函数
listener();
}
// 返回传入的action
return action;
}
通过源码的解读可知。action 必须是一个纯粹的对象且必须包含type属性,否则就出抛出异常。dispatch 方法干了两件事情:
- 1、找到对应的 reducer 根据 action.type 执行对应的分支,并返回最新的 state 。 为什么说对应的 reducer,因为 reducer 有可能通过 combineReducers 组合的,此时 action.type 只会更改对应的 reducer 的返回值。
currentReducer(currentState, action);
如果 reducer 不是组合生成,以 reducer/todos 为例。则 currentReducer 就是如下:
const todos = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO': //……
case 'TOGGLE_TODO': //……
default:
return state
}
}
如果 reducer 组合生成,也即本例中 rootReducer (通过 combineReducers 组合)。查看 combineReducers 源码可知, combineReducers 组合各个 reducer 后返回的是一个名为 combination 的高阶函数, 也就是currentReducer ,有如下形式:
function combination(state = {}, action) {
// ……
return state
}
二者具有相同的形式
(state , action ) =>{ // 更改 state的逻辑}
通过上边的伪代码分析可以,不管是否通过 combineReducers 组合生成, currentReducer 都具有相同的形式, 本身作为一个函数接受参数 state 和 action ,并根据action,改变state的值。因此可以认为,dispatch(action) 时,本质就是 reducer 方法的执行,并将当前的 stare 值 currentState 和 action 作为参数,并返回一个新的 state。
- 2、执行通过 subscribe 方法添加的监听, 通过 subscribe 方法添加的监听都被记录在监听队列 currentListeners 中,在dispatch 方法会循环遍历监听队列,并以此执行各个队列元素。
2.2.5 replaceReducer
在 createStore 方法中,还要其他一些我们不常用的 api
- replaceReducer : 更改 reducer
这是一个高级 API。只有在你需要实现代码分隔,而且需要立即加载一些 reducer 的时候才可能会用到它。在实现 Redux 热加载机制的时候也可能会用到observable:
3、reducer 的初始化。
dispatch({ type: ActionTypes.INIT });
const ActionTypes = {
INIT: `@@redux/INIT${randomString()}`,
//……
}
由上边的代码可知,初始化 reducer 时是通过 dispatch 一个随机产生的 action 。根据 reducer 的特性可知,当前初始化的 dispatch 会执行对应的 default 分支,也即会输出 reducer 中默认的 state 的值。
与 createStore 参数 preloadedState 的对比:在 createStore 方法的定义中可以接受一个preloadedState 参数,该参数会默认为当前的 state。
let currentState = preloadedState; //当前的state值,默认为初始化preloadedState
通过 dispatch 的流程可知,初始化dispatch时,preloadedState 会作为 reducer 方法执行的参数传入。当 preloadedState 不存在时,此时 reducer 的入参为 undefined。通常做法如下, 通过 es6 的默认参数给state 复制初始值,则能起到 preloadedState 的效果。猜测 Redux 这些写应该是为了兼容 es5 的默认值处理吧。
const todos = (state = [], action) => {//.......}
但是不管 preloadedState 指定与否,初始化dispatch 执行后,currentState 的值即为default 分支对应的值。由此可知,我们定义的 reducer 都要包含 default 分支,否则初始化后 state 的值就会出现异常。
Redux源码分析(1) - Redux介绍及使用
redux源码分析(2) - createStore
Redux源码分析(3) - applyMiddleware
Redux源码分析(4) - combineReducers和 bindActionCreators