【Redux】自己动手实现redux-thunk

1. 前言

        在原始的redux里面，action必须是plain object，且必须是同步。而我们经常使用到定时器，网络请求等异步操作，而redux-thunk就是为了解决异步动作的问题而出现的。

2. redux-thunk中间件实现源码

function createThunkMiddleware(extra) {return ({ dispatch, getState}) => next => action => {if(typeof action === 'function') {return action(dispatch, getState, extra);}return next(action);        }
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;

2.1 此处dispatch = compose(...chain)(store.dispatch)

• action(dispatch)中的这个dispatch可能并不是store.dispatch
• action(dispatch)执行后，如果action函数体使用dispatch({...})，动作{...}也会层层传递下去，直到传递给store.dispatch({...})
• 举个例子，比如说dispatch= f(g(h(store.dispatch)))），那么action(dispatch)函数体中执行到dispatch({...})，动作传递过程是： f(g(h(store.dispatch)))({...}) -> g(h(store.dispatch))({...}) -> h(store.dispatch)({...}) -> store.dispatch({...})

2.2 此处next的对应关系

        继续举个例子，比如说dispatch = f(g(h(store.dispatch)))）

• 如果当前中间件指向f，则next对应g(h(store.dispatch))
• 如果当前中间件指向g，则next对应h(store.dispatch)
• 如果当前中间件指向h，则next对应store.dispatch（真实的dispatch）

3. redux中applyMiddleware方法源码

export const applyMiddleware = (...middlewares) => {return createStore => (reducer, preloadedState) => {const store = createStore(reducer, preloadedState);let dispatch = () => {throw new Error('xxxx');};const middlewareAPI = {getState: store.getState,dispatch: (action, ...args) => dispatch(action, ...args)};const chain = middlewares.map(middleware => middleware(middlewareAPI));dispatch = compose(...chain)(store.dispatch);return {...store,dispatch}}
};export const compose = (...funcs) => {if(funcs.length === 0) {return arg => arg;}if(funcs.length === 1) {return funcs[0];}return funcs.reduce((prev, cur) => {return (...args) => {prev(cur(...args));} });
}

4. redux中createStore增加第3个参数

export const createStore = (reducer, preloadedState, enhancer) => {// 初始化statelet state = preloadedState;// 保存监听函数const listeners = [];// 返回store当前保存的stateconst getState = () => state;// 通过subscribe传入监听函数const subscribe = (listener) => {listeners.push(listener);}// 执行dispatch，通过reducer计算新的状态state// 并执行所有监听函数const dispatch = (action) => {state = reducer(state, action);for(const listener of listeners) {listener();}}!state && dispatch({});if(enhancer) {return enhancer(createStore)(reducer, preloadedState);}return {getState,dispatch,subscribe,}
}

注：以上，如有不合理之处，还请帮忙指出，大家一起交流学习~