手写React中间件thunk,了解核心原理

thunk中间件就是让dispatch()能够接收函数实参，并调用它。

核心原理：

1.我们重写了store的dispatch()，但仍保留了原来的dispatch，因为它能够派发对象。

2.让重写后的dispatch判断形参是否为函数，如果为函数，则传入重写的dispatch(注意这里不选择传原来的dispatch，是因为也许程序员会接着连续dispatch函数)与getState函数。

3.判断形参为对象，直接调用原来的dispatch()。

middleware/thunk.js

export default function thunk(store) {
    const dispatch = store.dispatch
    store.dispatch = function (foo) {
        if (typeof foo === "function")
            foo(store.dispatch, store.getState)
        else
            dispatch(foo)
    }
}

middleware/applyMiddleware.js

export default function applyMiddleware(store, ...middleware) {
    middleware.forEach(
        item => item(store)
    )
}

store/index.js

import { createStore } from "redux";
import reducer from "./reducer";
import applyMiddleware from "../../middleware/applyMiddleware";
/* import thunk from "redux-thunk"; */
import thunk from "../../middleware/thunk";

const store = createStore(reducer)
applyMiddleware(store, thunk)
export default store