Redux:中间件
redux中间件概念 比较容易理解。
在使用redux时,改变store state的一个固定套路是调用store.dispatch(action)方法,将action送到reducer中。
所谓中间件,就是在dispatch发送action 和 action到达reducer 之间,加入一些中间层,对action进行处理。
在之前学习redux的异步操作时,用到的redux-thunk就是一个中间件。action抵达reducer之前先对其进行判断,如果是对象就直接送到reducer;如果是函数就执行。
中间件特点:
1.是一个独立的函数,与其他中间件没有依赖关系
2.中间件可以有多个,按顺序组合使用
3.有统一的接口
中间件说白了就是一些第三方的插件,用来增强dispatch的功能,让我们可以在action到达reducer之前对action作出判断、改造、log下信息、实现复杂逻辑等。
当我们使用了多个中间件时,action依次从前一个中间件传到下一个中间件,最后抵达reducer。也可能在某个中间件进行处理后,发现没必要传到reducer了,就不传给下一个中间件(相当于丢弃,不再去处理)。
中间件必须定义为一个函数,它的基本结构如下:
function middleWare({dispatch,getState}){
return function(next){
return function(action){
return next(action)
}
}
}
中间件接收store的dispatch和getState方法
中间件返回一个接收next参数的函数,next参数自身是一个函数。中间件调用next函数告诉redux处理工作已经完成,将action传递给下一个中间件
中间件返回的函数(第二行),又返回一个带参数action的函数,这个函数里对action进行处理
我们可以发现中间件函数的设计,对函数进行了柯里化,遵循了函数式编程的思想。每个函数都有纯粹而明确的功能,通过嵌套组合实现更复杂的功能。
使用中间件:
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducers' let store = createStore(
reducer,
applyMiddleware(thunk)
)
这是npm上redux-thunk文档给的使用使用该中间件的实例代码。使用中间件,需要用到redux的applyMiddleware方法。
在《深入浅出React和redux》一书中,作者倒是给出了两种使用中间件方式,代码不太一样:
1.针对简单场景:
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk' //这里applyMiddleware执行后产生的是一个Store Enhancer函数,
//Store Enhancer又将redux的createStore作为参数,生成一个加强版的创建store的函数
const configureStore = applyMiddleware(thunk)(createStore);
const store = configreStore(reducer,initialState);
这里的代码虽然跟上一段代码不太一样,但是其实逻辑是一样的。因为createStore的第三个参数就是一个Store Enhancer,当只有两个参数且第二个参数是函数时,就当作Enhancer。applyMiddleware(thunk)的执行结果就是一个Enhencer。
作者说“利用configureStore创造的store将具有中间件的功能”。效果是一样的。
2.针对使用其他Store Enhancer的场景,作者说,实际中我们常常会使用不止一种SE,所以更通常的情况是:用redux提供的compose方法将applyMiddleware的返回函数和其他SE组装成一个Store Enhancer,传入createStore中。
import { createStore, applyMiddleware,compose } from 'redux';
import thunk from 'redux-thunk' const win=window;
const storeEnhancer = compose(
applyMiddleware(...middlewares),
(win && win.devToolsExtension)?win.devToolsExtension():f=>f);
);
const store = creatorStore(reducer,storeEnhancer);
其中applyMiddleware必须作为compose的第一个参数,因为中间件的顺序也是它们处理action的顺序,其他SE如果不能识别action,会报错。
中间件实现:
function isPromise(obj){
return obj && typeof obj.then === 'fuction'
} export default function PromiseMiddleware((dispatch)){
return function(next){
return function(action){
return isPromise(action)?action.then(dispatch):next(action); }
}
}
这是书上的一个未改进的例子,redux中某一类型的函数总有固定的套路。这段代码判断action是否promise,并执行对应操作。遵循着MiddleWare=>(next)=>(action)=>{next(action)}的套路。
程墨强调,开发中间件时要记住两个原则:
1.中间件应该独立存在,在功能和顺序上不依赖于其他中间件
2.应该考虑到当前有多个中间件存在,要通过next(action)将action交还给中间件管道
Store Enhancer:
中间件可以定制增强dispatch方法,但也只是对于dispatch方法。要增强store,需要使用store enhancer。applyMiddleware的返回值其实就是个SE,通过SE可以增强store的各个方面。
我们知道createStore方法接收三个参数(reducer,initialState,storeEnhancer).storeEnhancer是一个函数,接收createStore模样的函数作为参数,返回一个新的createStore。
//一个什么都不做的SE
const doNothingSE = (createStore)=>(reducer,preState,enhancer)=>{
const store = createStore(reducer,preState,enhencer);
return store;
};
//每次dispatch都log下action的SE
const doNothingSE = (createStore)=>(reducer,preState,enhancer)=>{
const store = createStore(reducer,preState,enhencer);
const originDispatch = store.dispatch;
store.dispatch=(action)=>{
console.log('dispatch action: ' + action );
originDispatch(action);
}
return store;
};
可以看出,SE的基本套路是将原来的成员函数的引用保存下来,然后写一个新的实现,在新的实现里添加额外功能代码,然后调用原来的成员函数,从而达到扩展功能的目的。
出了增强原有方法的功能外,还可以给store添加新方法,比如在函数体内定义一个newMethod,return {...store,newMethod};
Redux:中间件的更多相关文章
- react+redux教程(七)自定义redux中间件
今天,我们要讲解的是自定义redux中间件这个知识点.本节内容非常抽象,特别是中间件的定义原理,那多层的函数嵌套和串联,需要极强逻辑思维能力才能完全消化吸收.不过我会多罗嗦几句,所以不用担心. 例子 ...
- 【React全家桶入门之十三】Redux中间件与异步action
在上一篇中我们了解到,更新Redux中状态的流程是这种:action -> reducer -> new state. 文中也讲到.action是一个普通的javascript对象.red ...
- redux中间件和redux-thunk实现原理
redux-thunk这个中间件可以使我们把这样的异步请求或者说复杂的逻辑可以放到action里面去处理,redux-thunk使redux的一个中间件,为什么叫做中间件 我们说中间件,那么肯定是谁和 ...
- Redux 中间件与函数式编程
为什么需要中间件 接触过 Express 的同学对"中间件"这个名词应该并不陌生.在 Express 中,中间件就是一些用于定制对特定请求的处理过程的函数.作为中间件的函数是相互独 ...
- 3.3 理解 Redux 中间件(转)
这一小节会讲解 redux 中间件的原理,为下一节讲解 redux 异步 action 做铺垫,主要内容为: Redux 中间件是什么 使用 Redux 中间件 logger 中间件结构分析 appl ...
- 理解 Redux 中间件机制
Redux 的 action 是一个 JS 对象,它表明了如何对 store 进行修改.但是 Redux 的中间件机制使action creator 不光可以返回 action 对象,也可以返回 ac ...
- react第十八单元(redux中间件redux-thunk,redux工程目录的样板代码,规范目录结构)
第十八单元(redux中间件redux-thunk,redux工程目录的样板代码,规范目录结构) #课程目标 中间件:中间件增强redux的可扩展性,实现功能复用的目的. redux-thunk异步逻 ...
- redux 中间件 redux-saga 使用教程
redux 中间件 redux-saga 使用教程 redux middleware refs https://redux-saga.js.org/docs/ExternalResources.htm ...
- redux中间件
Redux 中间件 什么是中间件? 中间件本质上就是一个函数,Redux允许我们通过中间件的方式,扩展和增强Redux应用程序,增强体现在对action处理能力上,之前的计数器与弹出框案例中.acti ...
随机推荐
- SpringBoot应用操作Rabbitmq(topic交换器高级操作)
一.topic交换器为主题交换器,可以根据路由key模糊匹配 实现模型图 二.实战 1.引入maven <dependency> <groupId>org.springfram ...
- java 之 jsp简介
什么是jsp? JSP全称Java Server Pages,是一种动态网页开发技术.它使用JSP标签在HTML网页中插入Java代码.标签通常以<%开头以%>结束. JSP是一种Java ...
- 推荐3个Python初学者学习Python案例
回复资料,获取最新的Python的资料.想学习Python可以加微信回复报名. 希望今天的分享3个小案例,对你学习Python有帮助 Python 九九乘法表 以下实例演示了如何实现九九乘法表: 实例 ...
- Java ArrayList工作原理及实现
http://yikun.github.io/2015/04/04/Java-ArrayList%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86%E5%8F%8A%E5%AE% ...
- Ceph 12.2.0 实践osd 智能分组功能
以前我们需要对ssd和hdd进行分组的时候,需要大量的修改crush map,然后绑定不同的存储池到不同的 crush 树上面,现在这个逻辑简化了很多.以上是官方宣传听起来很不错等到12.2.0稳定版 ...
- log4j MDC NDC详解
NDC ( Nested Diagnostic Context )和 MDC ( Mapped Diagnostic Context )是 log4j 种非常有用的两个类,它们用于存储应用程序的上下文 ...
- C++ 模板(template) 的定义
定义: 模板(template)是实现代码重用机制的一种工具,它可以实现类型参数化,把类型定义为参数(模板元编程),从而实现了真正的代码可重用性. 模板是用来批量生成功能和形式都几乎相同的代码的.编译 ...
- 一个epoll的简单例子
epoll事件机制的触发方式有两种:LT(电平触发)和ET(边沿触发) EPOLLIN事件: 内核中的socket接收缓冲区 为空(低电平) 内核中的socket接受缓冲区 不为空(高电平) EPOL ...
- Android JetPack组件-CameraX初探
CameraX 又是一个 Google 推出的 JetPack 组件 ,是一个新鲜玩意儿,故给大家分享下我在项目中的使用过程心得.. CameraX 是什么? Google 开发者文档 对 Camer ...
- qt creator源码全方面分析(4-2)
目录 global头文件 global.h xx.h global头文件 插件的本质就是动态链接库,对于库,需要导出符号,供用户导入使用.在qt creator的源码中,存在固定的导入导出模式. gl ...