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