在上一篇文章中，我们通过一个示例页面，了解到Redux的使用方法以及各个功能模块的作用。如果还不清楚Redux如何使用，可以先看看Redux其实很简单（示例篇），然后再来看本文，理解起来会更加轻松。

那么在这一篇文章中，笔者将带大家编写一个完整的Redux，深度剖析Redux的方方面面，读完本篇文章后，大家对Redux会有一个深刻的认识。

核心API

这套代码是笔者阅读完Redux源码，理解其设计思路后，自行总结编写的一套代码，API的设计遵循与原始一致的原则，省略掉了一些不必要的API。

createStore

这个方法是Redux核心中的核心，它将所有其他的功能连接在一起，暴露操作的API供开发者调用。

function add (a) {return function (b) {return a + b}
}// 得到合成后的方法
let add6 = compose(add(1), add(2), add(3))add6(10) // 16

下面我们通过一个非常巧妙的方法来写一个函数的合成（compose）。

export function compose (...funcs) {if (funcs.length === 0) {return arg => arg}if (funcs.length === 1) {return funcs[0]}return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

上述代码巧妙的地方在于：通过数组的reduce方法，将两个方法合成一个方法，然后用这个合成的方法再去和下一个方法合成，直到结束，这样我们就得到了一个所有方法的合成函数。

有了这个基础，applyMiddleware就会变得非常简单。

import { compose } from './utils'export default function applyMiddleware (...middlewares) {return store => {const chains = middlewares.map(middleware => middleware(store))store.dispatch = compose(...chains)(store.dispatch)return store}
}

光看这段代码可能有点难懂，我们配合中间件的代码结构来帮助理解

function middleware (store) {return function f1 (dispatch) {return function f2 (action) {// do somethingdispatch(action)// do something}}
}

function middleware1 (store) {return function f1 (dispatch) {return function f2 (action) {console.log(1)dispatch(action)console.log(1)}}
}function middleware2 (store) {return function f1 (dispatch) {return function f2 (action) {console.log(2)dispatch(action)console.log(2)}}
}// applyMiddleware(middleware1, middleware2)

console.log(1)/* middleware1返回给middleware2的dispatch */
console.log(2)
dispatch(action)
console.log(2)
/* end */console.log(1)

三个或三个以上的中间件，其原理也是如此。

至此，最复杂最难理解的中间件已经讲解完毕。

combineReducers

由于Redux是单一状态流管理的模式，因此如果有多个reducer，我们需要合并一下，这块的逻辑比较简单，直接上代码。

export default function combineReducers (reducers) {const availableKeys = []const availableReducers = {}Object.keys(reducers).forEach(key => {if (typeof reducers[key] === 'function') {availableKeys.push(key)availableReducers[key] = reducers[key]}})return (state = {}, action) => {const nextState = {}let hasChanged = falseavailableKeys.forEach(key => {nextState[key] = availableReducers[key](state[key], action)if (!hasChanged) {hasChanged = state[key] !== nextState[key]}})return hasChanged ? nextState : state}
}

function bindActionCreator (actionCreator, dispatch) {return function () {dispatch(actionCreator.apply(this, arguments))}
}export default function bindActionCreators (actionCreators, dispatch) {if (typeof actionCreators === 'function') {return bindActionCreator(actionCreators, dispatch)}const boundActionCreators = {}Object.keys(actionCreators).forEach(key => {let actionCreator = actionCreators[key]if (typeof actionCreator === 'function') {boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)}})return boundActionCreators
}

function getFormatTime () {const date = new Date()return date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds() + ' ' + date.getMilliseconds()
}export default function logger ({ getState }) {return next => action => {/* eslint-disable no-console */console.group(`%caction %c${action.type} %c${getFormatTime()}`, 'color: gray; font-weight: lighter;', 'inherit', 'color: gray; font-weight: lighter;')// console.time('time')console.log(`%cprev state`, 'color: #9E9E9E; font-weight: bold;', getState())console.log(`%caction    `, 'color: #03A9F4; font-weight: bold;', action)next(action)console.log(`%cnext state`, 'color: #4CAF50; font-weight: bold;', getState())// console.timeEnd('time')console.groupEnd()}
}

thunk

export default function thunk ({ getState }) {return next => action => {if (typeof action === 'function') {action(next, getState)} else {next(action)}}
}