本文是一起学习造轮子系列的第二篇，本篇我们将从零开始写一个小巧完整的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是JavaScript状态容器，提供可预测化的状态管理。本文将会详细介绍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 = postTitle => (dispatch, getState) => {
    dispatch(requestPosts(postTitle));
    return fetch(`/some/API/${postTitle}.json`)
        .then(response => response.json())
        .then(json => dispatch(receivePosts(postTitle, json)));
};
store.dispatch(fetchPosts('reactjs'))

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

const fetchPosts =
    (dispatch, postTitle) => new Promise(function(resolve, reject) {
        dispatch(requestPosts(postTitle));
        return fetch(`/some/API/${postTitle}.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/${postTitle}.json`)
            .then(response => response.json())
        ));
    }
}