另一方面，什么样的中间件(Middleware )是介于APP应用系统和系统软件之间的软件，是系统软件提供的基础服务)功能)，在网络上进行APP
本文了解了Redux的整个工作流程。 发布action后，reducer会立即计算状态。 整个过程是同步的操作
如果需要支持异步操作，或者需要支持错误处理、日志监视，可以将此过程应用于中间件
在Redux上，中间件位于dispatch进程中，并在分发操作中进行侦听，如下图所示。
其本质函数是对store.dispatch方法进行改造，在Action的发行和Reducer的执行两个阶段之间追加了其他功能
二、常用的中间件有很多优秀的redux中间件。 这里列举两个吧。
redux-thunk :用于异步操作
redux-logger :用于记录
上述中间件都需要用applyMiddlewares注册，起到将所有中间件组合成一个数组依次执行的作用
作为第二个参数传递给createStore
conststore=createstore(reducer，applymiddleware ) thunk，logger )； redux-thunk redux-thunk是官网推荐的异步处理中间件
默认的dispatch(action )必须是操作为JavaScript的对象
redux-thunk中间件确定当前传递的数据类型，如果是函数，则向函数传递参数值dispatch，getState
dispatch函数稍后用于重新分发操作
getState函数允许我们获取以前的状态，考虑到我们后面的一些操作需要依赖于原始状态
因此，dispatch可以用以下函数的形式编写：
constgetHomeMultidataAction=(() return (dispatch ) ) axios.get ) ) http://XXX.xx.xx.xx/test ' ).then RES 分布(changerecommendsaction (data.recommend.list ) )； } }想要实现redux-logger日志功能时，请使用立即可用的redux-logger
导入{ apply middleware，createStore}from'redux '； importcreateloggerfrom ' redux-logger '； 常数日志ger=create logger (； conststore=创建(reducer，applymiddleware ) logger )； 这样，可以通过中间件函数轻松实现日志中记录的信息
三、实现原理首先要看applyMiddlewares的源代码
导出defaultfunctionapplymiddleware (middleware s ) return(createstore )=(reducer，preloadedState，enhancer ) ) ) vardispatch=store.dispatch； varchain=[]； varmiddlewareapi={ getstate : store.getstate，dispatch:(action )=dispatch(action ) }； chain=middleware s.map (middleware=middleware ) middlewareAPI )； dispatch=compose(…chain ) ) store.dispatch； return{.store，dispatch}}}所有中间件都存储在数组chain中，嵌套运行，最后运行store.dispatch。 可见，中间件内部(middlewareAPI )可以获得两种方法： getState和dispatch
在上面的学习中，我们学习了redux-thunk的基本使用
dispatch在内部判断如下，并执行相应的操作。
functionpatchthunk(store ) {letnext=store.dispatch； functiondispatchandthunk (action ) if ) typeofaction==='function ' ) action (store.dispatch，store.getState ) ) ) (else )下一步)动作； } store.dispatch=dispatchandthunk； }实现一个日志输出的原理也非常简单，如下所示。
letnext=store.dispatch； functiondispatchandlog(action ) console.log('dispatching: '，addaction ) 10 )； 下一步(addaction (5)； console.log ('新state: '，store.getState ) )； }store.dispatch=dispatchAndLog； 参考文献http://www.Ruan Yifeng.com/blog/2016/09/redux _ tutorial _ part _ two _ async _ operations.html
http://cn.redux.js.org/
--The End--
系列更新中： 20/33
单击下面的卡以解锁
创作不容易，星标，好啊，看三联支持