中间件

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 receives Store's dispatch and getState functions as named arguments, and returns a function. That function will be given the next middleware's dispatch method, and is expected to return a function of action calling next(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's dispatch method as the next 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 to createStore() as the last enhancer 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中间件组合方法的更多相关文章

  1. react+redux教程(七)自定义redux中间件

    今天,我们要讲解的是自定义redux中间件这个知识点.本节内容非常抽象,特别是中间件的定义原理,那多层的函数嵌套和串联,需要极强逻辑思维能力才能完全消化吸收.不过我会多罗嗦几句,所以不用担心. 例子 ...

  2. 【React全家桶入门之十三】Redux中间件与异步action

    在上一篇中我们了解到,更新Redux中状态的流程是这种:action -> reducer -> new state. 文中也讲到.action是一个普通的javascript对象.red ...

  3. redux中间件和redux-thunk实现原理

    redux-thunk这个中间件可以使我们把这样的异步请求或者说复杂的逻辑可以放到action里面去处理,redux-thunk使redux的一个中间件,为什么叫做中间件 我们说中间件,那么肯定是谁和 ...

  4. Redux 中间件与函数式编程

    为什么需要中间件 接触过 Express 的同学对"中间件"这个名词应该并不陌生.在 Express 中,中间件就是一些用于定制对特定请求的处理过程的函数.作为中间件的函数是相互独 ...

  5. 3.3 理解 Redux 中间件(转)

    这一小节会讲解 redux 中间件的原理,为下一节讲解 redux 异步 action 做铺垫,主要内容为: Redux 中间件是什么 使用 Redux 中间件 logger 中间件结构分析 appl ...

  6. 理解 Redux 中间件机制

    Redux 的 action 是一个 JS 对象,它表明了如何对 store 进行修改.但是 Redux 的中间件机制使action creator 不光可以返回 action 对象,也可以返回 ac ...

  7. Redux:中间件

    redux中间件概念 比较容易理解. 在使用redux时,改变store state的一个固定套路是调用store.dispatch(action)方法,将action送到reducer中. 所谓中间 ...

  8. react第十八单元(redux中间件redux-thunk,redux工程目录的样板代码,规范目录结构)

    第十八单元(redux中间件redux-thunk,redux工程目录的样板代码,规范目录结构) #课程目标 中间件:中间件增强redux的可扩展性,实现功能复用的目的. redux-thunk异步逻 ...

  9. redux 中间件 redux-saga 使用教程

    redux 中间件 redux-saga 使用教程 redux middleware refs https://redux-saga.js.org/docs/ExternalResources.htm ...

随机推荐

  1. Diagnostics: File file:/tmp/spark-95cbb984-da28-4784-8b99-eb83ad74437f/__spark_libs__1421840316395076250.zip does not exist

    搭建spark环境,测试在yarn 上运行spark shell的时候出现的错误:Diagnostics: File file:/tmp/spark-95cbb984-da28-4784-8b99-e ...

  2. 迁移FRS至DFSR SYSVOL

    截至2017年6月20日,Windows 2016 RS1系统为最后一版支持FRS,后续版本将不再包含该功能,详细见 https://support.microsoft.com/en-us/help/ ...

  3. hadoop wordcout测试

    hadoop wordcout测试 安装好hadoop 环境后,启动HDFS等服务:输密码 1004 start-all.sh 查看启动情况 1006 jps 1007 cd ~ 切换到用户默认目录 ...

  4. 利用Sonar定制自定义扫描规则

      上有3种方法可以自定义soanr的代码校验规则: 直接在sonar的web接口中增加XPath规则: 通过插件的功能来增加自定义规则,比如checkstyle,pmd等插件是允许自定义规则的: 通 ...

  5. iOS 关于监听手机截图,UIView生成UIImage, UIImage裁剪与压缩的总结

    一.  关于监听手机截图 1. 背景: 发现商品的售价页总是被人转发截图,为了方便用户添加截图分享的小功能 首先要注册用户截屏操作的通知 - (void)viewDidLoad { [super vi ...

  6. python + django + echart 构建中型项目

    1. python生产环境, 多层modules 导入问题: 多个modules 如何导入不同级别的包: 在每个modules下新建 __init__.pyimport os, sys dir_myt ...

  7. [百度百科]dir命令指定显示的排序方式

    https://jingyan.baidu.com/article/7c6fb428dcf39880642c9095.html 今天工作中遇到了这个需求 感觉很好用 dir /o:d >name ...

  8. 【MySQL 读书笔记】RR(REPEATABLE-READ)事务隔离详解

    这篇我觉得有点难度,我会更慢的更详细的分析一些 case . MySQL 的默认事务隔离级别和其他几个主流数据库隔离级别不同,他的事务隔离级别是 RR(REPEATABLE-READ) 其他的主流数据 ...

  9. Frame Interpolation

    对于视频网站.电视厂商以及进行视频压制的用户来说,改变视频的帧率算是一个比较常见的需求.视频网站改变帧率主要是为了向不同级别的网站用户提供差异化服务:电视厂商则是以提供更好的显示效果作为电视的卖点:对 ...

  10. ILRuntime_NewbieGuide—导读

    Welcome to the ILRuntime_NewbieGuide wiki! 入门篇:做个简单的案例 https://www.cnblogs.com/kerven/p/10237280.htm ...