本文是一起学习造轮子系列的第二篇，本篇我们将从零开始写一个小巧完整的Redux，本系列文章将会选取一些前端比较经典的轮子进行源码分析，并且从零开始逐步实现，本系列将会学习Promises/A+，Redux，react-redux，vue，dom-diff，webpack，babel，kao，express，async/await，jquery，Lodash，requirejs，lib-flexible等前端经典轮子的实现方式，每一章源码都托管在github上，欢迎关注~
相关系列文章：
一起学习造轮子（一）：从零开始写一个符合Promises/A+规范的promise
一起学习造轮子（二）：从零开始写一个Redux
一起学习造轮子（三）：从零开始写一个React-Redux
本系列github仓库：
一起学习造轮子系列github（欢迎star~）

前言

Redux是 状态容器，提供可预测化的状态管理。本文将会详细介绍Redux五个核心方法createStore，applyMiddleware，bindActionCreators，combineReducers，compose的实现原理，最后将自己封装一个小巧完整的redux库，随后会介绍一下经常与Redux一起结合使用的Redux常用中间件redux-logger，redux-thunk，redux-promise等中间件的实现原理。

本文对于Redux是什么及Redux几个核心方法如何使用只会做简单介绍，如果还没用过Redux建议先学习基础知识。

推荐文章：
Redux 入门教程（一）：基本用法
Redux 入门教程（二）：中间件与异步操作
Redux 入门教程（三）：React-Redux 的用法

本文所有代码在github建有代码仓库，可以点此查看本文代码，也欢迎大家star~

开始

createStore

首先，我们先来看一种使用Redux的基础场景：

import userInfoReducer from './userinfo.js'import bannerDataReducer from './banner.js'import recordReducer from './record.js'import clientInfoReducer from './clicentInfo.js'const rootReducer = combineReducers({    userInfoReducer,    bannerDataReducer,    recordReducer,    clientInfoReducer})const store = createStore(rootReducer)

{    userInfoReducer: {        userId: 1,        name: "张三"    },    bannerDataReducer: {        pictureId: 1,        pictureUrl: "http://abc.com/1.jpg"    }}

export function addTodo(text) {    return {      type: 'ADD_TODO',      text    };}export function removeTodo(id) {   return {     type: 'REMOVE_TODO',     id   };}

function add1(str) {    return str + 1}function add2(str) {    return str + 2}function add3(str) {    return str + 3}

let newaddfun = compose(add3, add2, add1);let newstr = newaddfun("abc") //"abc123"

import thunk from 'redux-thunk'import logger from 'redux-logger'const middleware = [thunk, logger]const store = createStore(rootReducer, applyMiddleware(...middleware))

function createStore(reducer, enhancer) {    //如果传入了中间件函数，使用中间件增强createStore方法    if (typeof enhancer === 'function') {        return enhancer(createStore)(reducer)    }    let state = null    const listeners = []    const subscribe = (listener) => {        listeners.push(listener)    }    const getState = () => state    const dispatch = (action) => {        state = reducer(state, action)        listeners.forEach((listener) => listener())    }    dispatch({})    return { getState, dispatch, subscribe }}

function applyMiddleware(middleware) {    return function a1(createStore) {        return function a2(reducer) {            //取出原始dispatch方法            const store = createStore(reducer)            let dispatch = store.dispatch            //包装dispatch            const middlewareAPI = {                getState: store.getState,                dispatch: (action) => dispatch(action)            }            let mid = middleware(middlewareAPI)            dispatch = mid(store.dispatch)                        //使用包装后的dispatch覆盖store.dispatch返回新的store对象            return {                ...store,                dispatch            }        }    }}//中间件let logger = function({ dispatch, getState }) {        return function l1(next) {            return function l2(action) {                console.log(getState());                next(action)                console.log(getState())            }        }    }//reducer函数function reducer(state, action) {    if (!state) state = {        count: 0    }    console.log(action)    switch (action.type) {        case 'add':            let obj = {...state,                count: ++state.count            }            return obj;        case 'sub':            return {...state,                count: --state.count            }        default:            return state    }}const store = createStore(reducer, applyMiddleware(logger))

首先我们定义了的applyMiddleware方法，它接收一个中间件作为参数。然后定义了一个logger中间件函数，它接收dispatch和getState方法以供内部使用。这两个函数Redux源码里都是使用高阶函数实现的，在这里与源码保持一致也使用高阶函数实现，但是为了方便理解，使用具名的function函数代替匿名箭头函数可以看得更清晰。

当我们执行const store = createStore(reducer,applyMiddleware(logger))时，首先applyMiddleware(logger)执行，将logger存在闭包里，然后返回了一个接收createStore方法的函数a1，将a1这个函数作为第二个参数传入createStore方法，因为传入了第二个参数，所以createstore里面其实会执行这一段代码:

if (typeof enhancer === 'function') {    return enhancer(createStore)(reducer)}

当执行return enhancer(createStore)(reducer)，其实执行的是a1（createStore）(reducer)，当执行a1（createStore）时返回a2，最后return的是a2(reducer)的执行结果。

1. 然后，我们看看a2内部都做了些什么，我给这个函数定义了三个阶段，首先为取出原始dispatch阶段，这一阶段执行createStore(reducer)方法，并拿出原始的dispatch方法。

2. 接着，我们到了第二个阶段包装原始dispatch，首先我们定义了middlewareAPI用来给中间件函数使用，这里的getState直接使用了store.getState，而dispatch使用函数包了一层，(action)=>dispatch(action)，为什么呢，因为我们最终要给中间件使用的dispatch方法，一定是经过各种中间件包装后的dispatch方法，而不是原方法，所以我们这里将dispatch方法设置为一个变量。然后将middlewareAPI传入middleware执行，返回一个函数mid（也就是logger里面的l1），这个函数接收一个next方法作为参数，然后当我们执行dispatch = mid(store.dispatch)时，将store.dispatch作为next方法传入，并把返回的函数l2作为新的dispatch，我们可以看到新的dispatch方法其实里面做了和我们上面自己直接改造store.dispatch做了同样的事情：

function l2(action) {    console.log(getState());    next(action)    console.log(getState())}

都是接收一个action，先打印日志，然后执行原始的dispatch方法去发一个action，然后再打印日志。

1. 最后到了第三个阶段：使用包装后的dispatch覆盖store.dispatch方法后返回新的store对象。

2. 到此，当我们在外面执行store.dispatch({type:add})时，实际上执行的是包装后的dispatch方法，所以logger中间件就生效了，如图所示真正发起dispatch的前后都打印出了最新状态：

import compose from './compose';function applyMiddleware(...middlewares) {    return function a1(createStore) {        return function a2(reducer) {            const store = createStore(reducer)            let dispatch = store.dispatch            let chain = []            const middlewareAPI = {                getState: store.getState,                dispatch: (action) => dispatch(action)            }            chain = middlewares.map(middleware => middleware(middlewareAPI))            dispatch = compose(...chain)(store.dispatch)            return {                ...store,                dispatch            }        }    }}let loggerone = function({ dispatch, getState }) {    return function loggerOneOut(next) {        return function loggerOneIn(action) {            console.log("loggerone:", getState());            next(action)            console.log("loggerone:", getState())        }    }}let loggertwo = function({ dispatch, getState }) {    return function loggerTwoOut(next) {        return function loggerTwoIn(action) {            console.log("loggertwo:", getState());            next(action)            console.log("loggertwo:", getState())        }    }}const store = createStore(reducer, applyMiddleware([loggertwo, loggerone]))

function applyMiddleware(...middlewares) {    return (createStore) => (reducer, preloadedState, enhancer) => {        const store = createStore(reducer, preloadedState, enhancer)        let dispatch = store.dispatch        let chain = []        const middlewareAPI = {            getState: store.getState,            dispatch: (action) => dispatch(action)        }        chain = middlewares.map(middleware => middleware(middlewareAPI))        dispatch = compose(...chain)(store.dispatch)        return {            ...store,            dispatch        }    }}

let logger = function({ dispatch, getState }) {        return function(next) {            return function(action) {                console.log(getState());                next(action)                console.log(getState())            }        }    }

const fetchPosts = post  => (dispatch, getState) => {    dispatch(requestPosts(post ));    return fetch(`/some/API/${post }.json`)        .then(response => response.json())        .then(json => dispatch(receivePosts(post , json)));};store.dispatch(fetchPosts('reactjs'))

function dispatch(action) {    if (!isPlain (action)) {        throw new Error(            'Actions must be plain  s. ' +            'Use custom middleware for async actions.'        )    }    ......}

const fetchPosts =    (dispatch, post ) => new Promise(function(resolve, reject) {        dispatch(requestPosts(post ));        return fetch(`/some/API/${post }.json`)            .then(response => {                type: 'FETCH_POSTS',                payload: response.json()            });    });

import { createAction } from 'redux-actions';class AsyncApp extends Component {    componentDidMount() {        const { dispatch, selectedPost } = this.props            // 发出同步 Action        dispatch(requestPosts(selectedPost));        // 发出异步 Action        dispatch(createAction(            'FETCH_POSTS',            fetch(`/some/API/${post }.json`)            .then(response => response.json())        ));    }}