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,}
}
注:以上,如有不合理之处,还请帮忙指出,大家一起交流学习~