1、什么是中间件？在计算机中，它是介于应用系统和系统软件之间的一类软件。它利用系统软件提供的基本服务（功能）将网络上应用系统的各个部分或不同的应用程序连接起来，从而达到资源共享和功能共享的目的。在这篇文章中，我了解了Redux的整个工作流程。发送动作时，reducer立即计算状态。整个过程是一个同步操作。如果需要支持异步操作，或者支持错误处理和日志监控。这个过程可以在中间件Redux中使用。中间件放在dispatch进程中，用于拦截处理分发动作，如下图：本质上是对store.dispatch方法的函数进行了修改，在分发的步骤之间增加了其他函数Action和执行Reducer。2.常用中间件redux中间件有很多优秀的。这里我们举两个例子：redux-thunk：用于异步redux操作-logger：用于日志记录，上面提到的所有中间件都需要通过applyMiddlewares注册。作用是把所有的中间件组成一个数组，依次执行，作为第二个参数传给createStore。conststore=createStore(reducer,applyMiddleware(thunk,logger));redux-thunkredux-thunk是官网推荐的异步处理中间件。默认情况下，dispatch(action)，action需要是一个JavaScript对象。redux-thunk中间件会判断你当前传入的数据类型，如果是函数，它会传入参数值（dispatch,getState）给函数。dispatch函数是为了我们以后再次dispatchactiongetState函数用的。考虑到我们后面的一些操作需要依赖原来的state，所以用来让我们获取一些之前的state。状态，所以dispatch可以写成如下函数形式：constgetHomeMultidataAction=()=>{return(dispatch)=>{axios.get("http://xxx.xx.xx.xx/test")。然后(res=>{constdata=res.data.data;dispatch(changeBannersAction(data.banner.list));dispatch(changeRecommendsAction(data.recommend.list));})}}redux-logger如果要实现日志功能，可以使用现成的redux-loggerimport{applyMiddleware,createStore}from'redux';importcreateLoggerfrom'redux-logger';constlogger=createLogger();conststore=createStore(reducer,applyMiddleware(logger));这样我们就可以简单的通过中间件函数实现日志记录信息3.实现原理首先看源码applyMiddlewares的代码={getState:store.getState,dispatch:(action)=>dispatch(action)};chain=middlewares.map(middleware=>middleware(middlewareAPI));dispatch=compose(...chain)(store.dispatch);return{...store,dispatch}}}所有的中间件放入一个数组链中，然后嵌套执行，最后store.disp执行补丁。可以看出中间件（middlewareAPI）可以获得getState和dispatch这两个方法。在上面的学习中，我们了解到redux-thunk的基本使用都会对dispatch进行判断，然后进行相应的操作。原理如下：functionpatchThunk(store){letnext=store.dispatch;functiondispatchAndThunk(action){if(typeofaction==="function"){action(store.dispatch,store.getState);}else{next(action);}}store.dispatch=dispatchAndThunk;}实现一个logoutput原理也很简单，如下：letnext=store.dispatch;functiondispatchAndLog(action){console.log("dispatching:",addAction(10));next(addAction(5));console.log("newstate:",store.getState());}store.dispatch=dispatchAndLog;参考http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_two_async_operations.htmlhttp://cn.redux.js.org/
