反应中间件有什么用

小编给大家分享一下反应中间件有什么用,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!

在反应中,中间件就是一个函数,对商店。派遣方法进行了改造,在发出行动和执行减速器这两步之间,添加了其他功能,常用的中间件都有现成的,只要引用别人写好的模块即可。

<强>一、中间件的概念

为了理解中间件,让我们站在框架作者的角度思考问题:如果要添加功能,你会在哪个环节添加?

(1)减速机:纯函数,只承担计算国家的功能,不合适承担其他功能,也承担不了,因为理论上,纯函数不能进行读写操作。

(2)观点:与国家一一对应,可以看作状态的视觉层,也不合适承担其他功能。

(3)行动:存放数据的对象,即消息的载体,只能被别人操作,自己不能进行任何操作。

想来想去,只有发送行动的这个步骤,即store.dispatch()方法,可以添加功能。举例来说,要添加日志功能,把动作和状态打印出来,可以对商店。调度进行如下改造。

let  next =, store.dispatch; 　　时间=store.dispatch  function  dispatchAndLog(行动),{ 　　console.log才能(& # 39;调度# 39;,,动作); 　　下才能(行动); 　　console.log才能(& # 39;next 国家# 39;,,store.getState ()); 　　}

上面代码中,对存储。调度进行了重定义,在发送行动前后添加了打印功能。这就是中间件的雏形。

中间件就是一个函数,对商店。派遣方法进行了改造,在发出行动和执行减速器这两步之间,添加了其他功能。常用的中间件都有现成的,只要引用别人写好的模块即可。

<强>二,中间件的用法

本教程不涉及如何编写中间件,因为常用的中间件都有现成的,只要引用别人写好的模块即可。比如,上一节的日志中间件,就有现成的redux-logger模块。这里只介绍怎么使用中间件。

import  {applyMiddleware的不同之处是,createStore },得到& # 39;回来的# 39;; 　　import  createLogger 得到& # 39;redux-logger& # 39;; 　　const  logger =, createLogger (); 　　, 　　const  store =, createStore ( 　　减速机,才能 　　applyMiddleware才能(日志) 　　);

上面代码中,redux-logger提供一个生成器createLogger,可以生成日志中间件记录器。然后,将它放在applyMiddleware方法之中,传入createStore方法,就完成了store.dispatch()的功能增强。

这里有两点需要注意:

(1) createStore方法可以接受整个应用的初始状态作为参数,那样的话,applyMiddleware就是第三个参数了。

const  store =, createStore ( 　　减速机,才能 　　initial_state才能, 　　applyMiddleware才能(日志) 　　);

(2)中间件的次序有讲究。

const  store =, createStore ( 　　减速机,才能 　　applyMiddleware才能(铛,承诺,,记录器) 　　);

上面代码中,applyMiddleware方法的三个参数,就是三个中间件。有的中间件有次序要求,使用前要查一下文档。比如,记录器就一定要放在最后,否则输出结果会不正确。

<强>三,applyMiddlewares()

看到这里,你可能会问,applyMiddlewares这个方法到底是干什么的?

它是终极版的原生方法,作用是将所有中间件组成一个数组,依次执行。下面是它的源码。

export  default  function  applyMiddleware(…中间件)),{ 　　return 才能;(createStore),=祝辞,(preloadedState,减速机,还以为;增强剂),=祝辞,{ 　　,,,var  store =, createStore (preloadedState,减速机,还以为;增强剂); 　　,,,var  dispatch =, store.dispatch; 　　,,,var  chain =, []; 　　, 　　,,,var  middlewareAPI =, { 　　,,,,,getState:, store.getState, 　　,,,,,调度:,(动作),=祝辞,调度(行动) 　　,,,}; 　　,,,chain =, middlewares.map (middleware =祝辞,中间件(middlewareAPI)); 　　,,,dispatch =,组成连锁(…)(store.dispatch); 　　, 　　,,,return {…商店,,分派} 　　,,} 　　}

上面代码中,所有中间件被放进了一个数组链,然后嵌套执行,最后执行存储。调度。可以看到,中间件内部(middlewareAPI)可以拿到getState和调度这两个方法。

<强>四、异步操作的基本思路

理解了中间件以后,就可以处理异步操作了。

同步操作只要发出一种行动即可,异步操作的差别是它要发出三种行动。

反应中间件有什么用