Redux中间件的使用方法教程

function exampleMiddleware(storeAPI) {
  return function wrapDispatch(next) {
    return function handleAction(action) {
      // 在这里做你想做的事情，做完后，通过返回next(action)向下一个middleware传递action
      return next(action)
    }
  }
}

const exampleMiddleware = store => next => action => {
  return next(action)
}

import { createStore, applyMiddleware } from 'redux'
import rootReducer from './reducer'
import { print1, print2, print3 } from './exampleAddons/middleware'
const middlewareEnhancer = applyMiddleware(print1, print2, print3)
const store = createStore(rootReducer, middlewareEnhancer)
export default store

// 省略了中间代码并去除typescript类型，并将Compose和applyMiddleware函数放在一起便于展示
function compose(...funcs) {
	// 没有传入middleware，直接返回
	if (funcs.length === 0) {
	  return (arg) => arg
	}
	// 传入一个middleware，无需构造，直接返回
	if (funcs.length === 1) {
	  return funcs[0]
	}
	// 进行函数柯里化返回一个形如：fn1(fn2(fn3(store.dispatch))) 的新dispatch函数
	return funcs.reduce(
	  (a, b) =>
	    (...args: any) =>
	      a(b(...args))
	)
}
function applyMiddleware(...middlewares){
	return (createStore) => (reducer, preloadedState) => {
		// createStore中检测到由applyMiddleware函数生成的enhancer时，将createStore、reducer、initialState传入，在函数中创建一个临时的store
		const store = createStore(reducer, preloadedState)
		// 创建一个临时的dispatch函数，此函数抛出异常，用于防止处理传入的middlewares时提前调用dispatch
		let dispatch = () => {
			throw new Error(
			  'Dispatching while constructing your middleware is not allowed. ' +
			    'Other middleware would not be applied to this dispatch.'
			)
		}
		// 给middleware分发store
		const middlewareAPI = {
		  getState: store.getState,
		  dispatch: (action, ...args) => dispatch(action, ...args)
		}
		// 让每个middleware带着middlewareAPI这个参数执行一遍，然后获得带着相同的store的middlewares
		const chain = middlewares.map(middleware => middleware(middlewareAPI))
		// 将所有chain中的函数利用Compose函数组装成一个新的dispatch函数
		// 如：dispatch=fn1(fn2(fn3(store.dispatch)))
		dispatch = compose(...chain)(store.dispatch)
		// 将生成的dispatch函数整合到刚才生成的store中并返回
		return {
		  ...store,
		  dispatch
		}
	}
}