Redux中间件组合方法
中间件
https://redux.js.org/glossary#middleware
中间件在发送端 action端点 和 处理方reducer的端点之间。
主要负责将async action转换为action, 或者记录action日志。
A middleware is a higher-order function that composes a dispatch function to return a new dispatch function. It often turns async actions into actions.
Middleware is composable using function composition. It is useful for logging actions, performing side effects like routing, or turning an asynchronous API call into a series of synchronous actions.
import { createStore, applyMiddleware } from 'redux'
import todos from './reducers' function logger({ getState }) {
return next => action => {
console.log('will dispatch', action) // Call the next dispatch method in the middleware chain.
const returnValue = next(action) console.log('state after dispatch', getState()) // This will likely be the action itself, unless
// a middleware further in chain changed it.
return returnValue
}
} const store = createStore(todos, ['Use Redux'], applyMiddleware(logger)) store.dispatch({
type: 'ADD_TODO',
text: 'Understand the middleware'
})
// (These lines will be logged by the middleware:)
// will dispatch: { type: 'ADD_TODO', text: 'Understand the middleware' }
// state after dispatch: [ 'Use Redux', 'Understand the middleware' ]
http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_two_async_operations.html
let next = store.dispatch;
store.dispatch = function dispatchAndLog(action) {
console.log('dispatching', action);
next(action);
console.log('next state', store.getState());
}
上面代码中,对
store.dispatch
进行了重定义,在发送 Action 前后添加了打印功能。这就是中间件的雏形。中间件就是一个函数,对
store.dispatch
方法进行了改造,在发出 Action 和执行 Reducer 这两步之间,添加了其他功能。
应用多个中间件
https://redux.js.org/api/applymiddleware
applyMiddleware(...middleware)
Middleware is the suggested way to extend Redux with custom functionality. Middleware lets you wrap the store's
dispatch
method for fun and profit. The key feature of middleware is that it is composable. Multiple middleware can be combined together, where each middleware requires no knowledge of what comes before or after it in the chain.Arguments
...middleware
(arguments): Functions that conform to the Redux middleware API. Each middleware receivesStore
'sdispatch
andgetState
functions as named arguments, and returns a function. That function will be given thenext
middleware's dispatch method, and is expected to return a function ofaction
callingnext(action)
with a potentially different argument, or at a different time, or maybe not calling it at all. The last middleware in the chain will receive the real store'sdispatch
method as thenext
parameter, thus ending the chain. So, the middleware signature is({ getState, dispatch }) => next => action
.Returns
(Function) A store enhancer that applies the given middleware. The store enhancer signature is
createStore => createStore
but the easiest way to apply it is to pass it tocreateStore()
as the lastenhancer
argument.
应用中间件函数实现, 注意其中 对于middlewares数组, 使用compose函数进行组合, 其串联方式是从 右 到 左, 即最右边的被包裹为最里层,最先执行, 最左边的被包裹到最外面, 最后执行。
https://www.cnblogs.com/liaozhenting/p/10166671.html
export default function applyMiddleware(...middlewares) {
return createStore => (...args) => {
const store = createStore(...args)
let dispatch = () => {
throw new Error(
`Dispatching while constructing your middleware is not allowed. ` +
`Other middleware would not be applied to this dispatch.`
)
} const middlewareAPI = {
getState: store.getState,
dispatch: (...args) => dispatch(...args)
}
const chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch) return {
...store,
dispatch
}
}
}
如下图很形象:
https://zhuanlan.zhihu.com/p/20597452
compose
https://www.cnblogs.com/liaozhenting/p/10166671.html
/**
* Composes single-argument functions from right to left. The rightmost
* function can take multiple arguments as it provides the signature for
* the resulting composite function.
*
* @param {...Function} funcs The functions to compose.
* @returns {Function} A function obtained by composing the argument functions
* from right to left. For example, compose(f, g, h) is identical to doing
* (...args) => f(g(h(...args))).
*/ export default function compose(...funcs) {
if (funcs.length === 0) {
return arg => arg
} if (funcs.length === 1) {
return funcs[0]
} return funcs.reduce((a, b) => (...args) => a(b(...args)))
}
与pipe正好相反:
const pipe = (...fns) => {
return (args) => {
return fns.reduce((args, fn) => {
return fn(args)
}, args)
}
} const toUpper = (value) => {
return value.toUpperCase();
} const addFont = (value) => {
return 'hello plus!' + value;
} console.log(pipe(addFont,toUpper)('test'));
// HELLO PLUS!TEST
跟pip函数对比
console.log(pipe(addFont,toUpper)('test'));
// HELLO PLUS!TEST
console.log(compose(addFont,toUpper)('test'));
// hello plus!TEST
underscore compose
http://www.bootcss.com/p/underscore/#compose
compose
_.compose(*functions)
返回函数集 functions 组合后的复合函数,
也就是一个函数执行完之后把返回的结果再作为参数赋给下一个函数来执行.
以此类推.
在数学里, 把函数 f(), g(), 和 h() 组合起来可以得到复合函数 f(g(h()))。var greet = function(name){ return "hi: " + name; };
var exclaim = function(statement){ return statement.toUpperCase() + "!"; };
var welcome = _.compose(greet, exclaim);
welcome('moe');
=> 'hi: MOE!'
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 ...
- Redux:中间件
redux中间件概念 比较容易理解. 在使用redux时,改变store state的一个固定套路是调用store.dispatch(action)方法,将action送到reducer中. 所谓中间 ...
- 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 ...
随机推荐
- 一个特殊的SQL Server阻塞案例分析
上周,在SQL Server数据库下面遇到了一个有意思的SQL阻塞(SQL Blocking)案例.其实个人对SQL Server的阻塞还是颇有研究的.写过好几篇相关文章. 至于这里为什么要总结一下这 ...
- 获取OlapConnection连接
目录: 1.获取org.olap4j.OlapConnection对象 2.获取mondrian.olap.Connection对象 一.org.olap4j.OlapConnection对象 说明: ...
- 我的Scala之路(1):列表List操作
List() 或 Nil 空 List List("Cool", "tools", "rule) 创建带有三个值"Cool",&q ...
- 2018-2019-2 20175217 实验二《Java面向对象程序设计》实验报告
一.实验报告封面 课程:Java程序设计 班级:1752班 姓名:吴一凡 学号:20175217 指导教师:娄嘉鹏 实验日期:2019年4月15日 实验时间:--- 实验序号:实验二 实验名称:Jav ...
- SQLserver 获取当前时间
1. 获取当前日期 select GETDATE() 格式化: select CONVERT(varchar,GETDATE(),120) --2017-05-12 16:33:10 2. 获取当前年 ...
- 分布式存储ceph——(1)部署ceph
前言: 很多朋友想学ceph,但是开始ceph部署就让初学者举步为艰,ceph部署时由于国外源的问题(具体大家应该懂得),下载和安装软件便会卡住,停止不前.即使配置搭建了国内源后,执行ceph-dep ...
- Android布局理解
参考菜鸟教程,原文请查看:https://www.runoob.com/w3cnote/android-tutorial-linearlayout.html 1.FrameLayout(帧布局) 帧布 ...
- Laravel-任务调度
简介Cron 是 UNIX.SOLARIS.LINUX 下的一个十分有用的工具,通过 Cron 脚本能使计划任务定期地在系统后台自动运行.这种计划任务在 UNIX.SOLARIS.LINUX下术语为 ...
- Centos7 安装gitLab
我这里使用的是centos 7 64bit,我试过centos 6也是可以的! 1. 安装依赖软件 yum -y install policycoreutils openssh-server open ...
- sql server 复制表结构
1:复制表结构及数据到新表 select * into 目的数据库名.dbo.目的表名 from 原表名 select * into my0735home.dbo.infoMianTest from ...