众所周知，前端轮子太多，大部分同学每次学习新轮子都是学完不用就忘。我最近看一些库，其实这些库的实现都很简单，但是文档往往又很多，甚至还有些文档说的不清不楚，偶尔用到了都要去查文档，细节一点的东西文档又往往无法体现，感觉还不如将看文档的时间用来看源码。这些库的源码往往很精简，看完了既能知道如何使用，还能知其所以然，不亏。所以有了这个系列。
前排提示：
- 如果需要配合源码使用，请
git clone git@github.com:reduxjs/redux.git然后切到9eef8ff6进行，避免代码版本不一致。 - 部分代码较分散的我会标注上代码路径，如
createStore.ts:111表示在createStore.ts的第 111 行，可直接通过 ide 复制快捷跳转查看。 - 部分代码过多，会进行适当删减后放出（如很长的报错信息等），建议配合源码一起观看。
文件结构
├── applyMiddleware.ts ├── bindActionCreators.ts ├── combineReducers.ts ├── compose.ts ├── createStore.ts ├── index.ts ├── types │ ├── actions.ts │ ├── middleware.ts │ ├── reducers.ts │ └── store.ts └── utils ├── actionTypes.ts ├── formatProdErrorMessage.ts ├── isPlainObject.ts ├── kindOf.ts ├── symbol-observable.ts └── warning.ts 复制代码
源码分析
核心功能代码
我们先从入口文件看起，入口文件 export 出了几个东西:
export { createStore, combineReducers, bindActionCreators, applyMiddleware, compose, __DO_NOT_USE__ActionTypes }; 复制代码
其中最重要的，便是 createStore，它是一个函数，代码在 createStore.ts 中：
export default function createStore<S, A extends Action, Ext = {}, StateExt = never>( reducer: Reducer<S, A>, preloadedState?: PreloadedState<S>, enhancer?: StoreEnhancer<Ext, StateExt> ): Store<ExtendState<S, StateExt>, A, StateExt, Ext> & Ext; 复制代码
可看到他接收 reducer、preloadedState、enhancer，返回一个 store：（此处有三种重载，为了节省篇幅、这里只放最典型的部分）
再看下 reducer 的结构：
export type Reducer<S = any, A extends Action = AnyAction> = (state: S | undefined, action: A) => S; 复制代码
他是一个函数，接收 state 和 action 参数，再返回 state：
最后看下 store，包含了 dispatch、subscribe、getState、replaceReducer 这几个属性：
const store = { dispatch: dispatch as Dispatch<A>, subscribe, getState, replaceReducer, [$$observable]: observable } as unknown as Store<ExtendState<S, StateExt>, A, StateExt, Ext> & Ext; 复制代码
以上就是 Redux 最重要的部分了：reducer、store、dispatch、action、state。
我们再具体看下实现，首先是 state 相关的部分：（createStore.ts:71-108 跳过，主要是重载的逻辑处理）
createStore.ts:111
let currentState = preloadedState as S; 复制代码
createStore.ts:134
function getState(): S { if (isDispatching) { throw new Error('You may not call store.getState() while the reducer is executing.'); } return currentState as S; } 复制代码
createStore:238
function dispatch(action: A) { if (!isPlainObject(action)) { throw new Error(`Actions must be plain objects.`); } if (typeof action.type === 'undefined') { throw new Error('Actions may not have an undefined "type" property. '); } if (isDispatching) { throw new Error('Reducers may not dispatch actions.'); } try { isDispatching = true; currentState = currentReducer(currentState, action); } finally { isDispatching = false; } const listeners = (currentListeners = nextListeners); for (let i = 0; i < listeners.length; i++) { const listener = listeners[i]; listener(); } return action; } 复制代码
可以看到 state 相关的代码就这三块。第一块是 preloadedState 赋值为 state 的初始值；第二个是 getState 获取 state；第三块为 dispatch 函数。
看下 dispatch，他接收 action 参数，然后调用 reducer 处理 action 获得处理后的 state，随后调用了所有 listener。
从报错处理可以看出：
action必须为纯对象，不能是其它数据类型或者是其它各种类（如Data、RegExp对象等）action必须包含type
再看下 subscribe：
createStore.ts:169
function subscribe(listener: () => void) { if (typeof listener !== 'function') { throw new Error(`Expected the listener to be a function. Instead, received: '${kindOf(listener)}'`); } if (isDispatching) { throw new Error('You may not call store.subscribe() while the reducer is executing. '); } let isSubscribed = true; ensureCanMutateNextListeners(); nextListeners.push(listener); return function unsubscribe() { if (!isSubscribed) { return; } if (isDispatching) { throw new Error('You may not unsubscribe from a store listener while the reducer is executing. '); } isSubscribed = false; ensureCanMutateNextListeners(); const index = nextListeners.indexOf(listener); nextListeners.splice(index, 1); currentListeners = null; }; } 复制代码
调用 subscribe 会将传入的 listener 添加到 nextListeners 中，然后返回一个 unsubscribe 函数，用于取消该订阅。
其它部分
replaceReducer
replaceReducer 用途为替换 reducer，主要使用场景如：一部分 reducer 异步加载，加载后通过 replaceReducer 更新现有的 reducer。
createStore.ts:283
function replaceReducer<NewState, NewActions extends A>( nextReducer: Reducer<NewState, NewActions> ): Store<ExtendState<NewState, StateExt>, NewActions, StateExt, Ext> & Ext { if (typeof nextReducer !== 'function') { throw new Error(`Expected the nextReducer to be a function. Instead, received: '${kindOf(nextReducer)}`); } (currentReducer as unknown as Reducer<NewState, NewActions>) = nextReducer; dispatch({ type: ActionTypes.REPLACE } as A); return store as unknown as Store<ExtendState<NewState, StateExt>, NewActions, StateExt, Ext> & Ext; } 复制代码
可以看到其中用到一个特殊的 action - ActionTypes.REPLACE，这个在 combineReducers 中的 getUnexpectedStateShapeWarningMessage 会用到，主要用于开发环境的各种检测告警。
combineReducers
combineReducers 的 ts 定义也有三层重载，主要是 ts 定义的重载，没有逻辑上的重载，我们依旧拿最典型的看下：
export default function combineReducers<M extends ReducersMapObject>( reducers: M ): Reducer<CombinedState<StateFromReducersMapObject<M>>, ActionFromReducersMapObject<M>>; 复制代码
可以看到 combineReducers 接受一个 reducers 的 map 对象，然后返回一个新的 reducer，该 reducer 的 state 和 action 由 reducers 中的所有对象整合起来。
下面看下主要代码，代码较多进行了删减。
combineReducers.ts:125
function combineReducers(reducers: ReducersMapObject) { const reducerKeys = Object.keys(reducers); const finalReducers: ReducersMapObject = {}; for (let i = 0; i < reducerKeys.length; i++) { const key = reducerKeys[i]; if (typeof reducers[key] === 'function') { finalReducers[key] = reducers[key]; } } const finalReducerKeys = Object.keys(finalReducers); return function combination(state: StateFromReducersMapObject<typeof reducers> = {}, action: AnyAction) { let hasChanged = false; const nextState: StateFromReducersMapObject<typeof reducers> = {}; for (let i = 0; i < finalReducerKeys.length; i++) { const key = finalReducerKeys[i]; const reducer = finalReducers[key]; const previousStateForKey = state[key]; nextState[key] = nextStateForKey; hasChanged = hasChanged || nextStateForKey !== previousStateForKey; } hasChanged = hasChanged || finalReducerKeys.length !== Object.keys(state).length; return hasChanged ? nextState : state; }; } 复制代码
代码中将 reducers 所有的 reducer 取出，然后返回 combination 函数，每次 combination 触发时会调用所有的 reducer，将返回的 state 整合成一个整体的 state 返回。所以可以借助 combineReducers 来实现 reducer 的拆分。
compose
compose 将 compose(f, g, h) 转换为 (...args) => f(g(h(...args)))，从而避免方法嵌套。
applyMiddleware
applyMiddleware 需要配合 createStore 的 enhancer 函数来来使用。
createStore.ts:87
return enhancer(createStore)(reducer, preloadedState as PreloadedState<S>) as Store< ExtendState<S, StateExt>, A, StateExt, Ext > & Ext; 复制代码
先看下 enhancer，当存在 enhancer 是，会将 createStore 传入 enhancer 处理后再进行创建。
export default function applyMiddleware(...middlewares: Middleware[]): StoreEnhancer<any> { return (createStore: StoreEnhancerStoreCreator) => <S, A extends AnyAction>(reducer: Reducer<S, A>, preloadedState?: PreloadedState<S>) => { const store = createStore(reducer, preloadedState); let dispatch: Dispatch = () => { throw new Error(''); }; const middlewareAPI: MiddlewareAPI = { getState: store.getState, dispatch: (action, ...args) => dispatch(action, ...args) }; const chain = middlewares.map(middleware => middleware(middlewareAPI)); dispatch = compose<typeof dispatch>(...chain)(store.dispatch); return { ...store, dispatch }; }; } 复制代码
再看下 applyMiddleware，可以看到 store 创建后，会通过 middleware 生成 chain，然后通过 compose 函数将 chain 合并成一个 dispatch 函数，再返回，所以进行的变更主要作用在 dispatch 上。
这里结合使用场景看一下：
function logger({ getState }) { return next => action => { console.log('will dispatch', action); const returnValue = next(action); console.log('state after dispatch', getState()); return returnValue; }; } const store = createStore(todos, ['Use Redux'], applyMiddleware(logger)); 复制代码
在 dispatch 触发后，进入中间件中，next 就是原 store.dispatch，这样可以通过中间件做一些统一的操作，一般会用做数据转化、格式化、数据持久化、日志记录等。
总结
上面就是 redux 的所有源码了，从上面可以看出来，redux 就是一个发布订阅设计模式的实现，createStore 创建一个订阅中心，通过 subscribe 方法订阅，通过 dispatch 发布。然后在其中添加了 action 和 state，从而实现通过 reducer 处理 action 更新 state（注意每个独立的 reducer 只会拿到自己的 state）。
redux 还添加了 combineReducers 来方便 reducer的拆分，applyMiddleware 来方便使用中间件处理 action。
