React实战-深入源码了解Redux用法之Middleware

╰+哭是因爲堅強的太久メ 2022-07-13 07:07 192阅读 0赞

谈到MiddleWare的由来在官方网站有清楚的说明，并且是一步一步的讲解了它的演进过程，其中中文说明见http://cn.redux.js.org/docs/advanced/Middleware.html（微信：react-javascript）。

重点讲解了几点内容：

1.为什么采用MiddleWare？

综合起来看就是我们在进行业务操作时，常常会有其它的附加需求，如：所有操作的操作记录日志；操作异常的错误日志；测试过程的测试类信息等等。

然而我们即不希望改变原有代码，也不希望在有太多重复的代码，所以在Redux中提供了一种简易的方式，将附加操作单独编写，采用appplyMiddleware进行统一封装，将业务操作与附加操作分离。

2.Middleware是怎么实现的？

正如官网分析的一样，我们有多种方法去实现，但是那种方式才是最简单、耦合度最低的呢？

毋庸置疑的是这种情形下最适合采用的就是装饰者模式。也就是保持原有代码不变的情况下，对初始对象进行不断的增加新的数据或操作。

在面向对象的语言中，装饰者模式是一种常见的开发模式，实现的方式有多种，主要采用的是重构和组合的方式：通过继承和组合的方式，定义装饰类，将原有类的对象作为装饰类的内部元素，然后根据需要增加新的数据和操作。

在Javascript中要实现这种方式主要采用的是Mondkeypatching的方式，采用将原有function进行重写，在重写的function中增加新的数据和操作。如：

function A()\{

\}

A.prototype.add(i,j)\{

return i+j;

\}

Monkeypatching将重写add，并添加日志信息。

var a = new A();

var originalAdd = a.add;

A.add = function(i,j)\{

console.log(‘begin add’);

return originalAdd(i,j);

\}

从上面的代码可以看出基本上是javascript对重构的一种实现。

基本思路如此，但是还有一点需要特别注意的是，为什么不完全采用Monkeypatching。主要原因是Middleware不只有一个，而是多个，这就需要实现dispatch的链式效果，每次封装的后的dispatch将作为后一个Middleware的初始dispatch。

另外我们可以看到在Redux源码中，通过以下代码实现了Middleware的链式链接。

applyMiddleware中：

chain = middlewares.map(middleware => middleware(middlewareAPI))

dispatch = compose(…chain)(store.dispatch)

compose中：

const last = funcs\[funcs.length - 1\]

const rest = funcs.slice(0, -1)

return (...args) => rest.reduceRight((composed, f) => f(composed), last(…args))。

3.Middleware怎么写？

具体到Middleware怎么写就变的很简单了，在官网的多个例子中，选取最简单的看看吧。

const logger = store => next => action => \{

console.group(action.type)

console.info('dispatching', action)

let result = next(action)

console.log('next state', store.getState())

console.groupEnd(action.type)

return result

\}

采用的是箭头函数，我们需要了解的是三个嵌套箭头函数的参数：

1.store：全局数据对象

2.next：上一个被封装的dispatch

3.action：操作。

基本上了解这些你就可以编写自己的附加操作了。需要注意的是对next的使用，是要获取结果，还是要进行附加操作，另外就是要将再次封装的next传出去。

在构建store时，也将改为以下代码：

const configureStore = preloadedState => \{

const store = createStore(

rootReducer,

preloadedState,

compose(

applyMiddleware(thunk, api, createLogger()),

DevTools.instrument()

)

)

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关 react-redux connect源码理解

react-redux connect源码理解 connect函数源码 connect函数源码 // match函数基本技术介绍 (dispa

绝地灬酷狼/ 2023年05月30日 03:52/ 0 赞/ 30 阅读

相关 ⑧ React Redux 基本用法

查看专栏其它文章： [① React 介绍及JSX简单使用][React _JSX] [② React 面向组件编程(state、props、refs)、事件处理][Rea

末蓝、/ 2022年10月29日 15:21/ 0 赞/ 201 阅读

相关 React实战-深入源码了解Redux用法之Reducers

React实战\-深入源码了解Redux用法之Reducers 在Redux中Reducers是真正实现state数据变化的工作。我们在使用Redux时，可能也只是似懂非懂，

秒速五厘米/ 2022年09月25日 15:21/ 0 赞/ 276 阅读

相关 React实战-深入源码了解Redux用法之Provider

React实战\-深入源码了解Redux用法之Provider 在Redux中最核心的自然是组件，以及组件相关的事件与数据流方式。但是我们在Redux中并没有采用传统的方式在

爱被打了一巴掌/ 2022年09月25日 13:18/ 0 赞/ 283 阅读

相关 React实战-深入源码了解Redux用法之Connect

React实战\-深入源码了解Redux用法之Connect Redux结构并不复杂，用法也较之Flux更为简单，使得Redux成为ReactJS的标配。虽然我并不赞成用个w

男娘i/ 2022年09月25日 12:25/ 0 赞/ 288 阅读

相关 redux middleware 详解

前言 > It provides a third-party extension point between dispatching an > action

女爷i/ 2022年08月23日 08:25/ 0 赞/ 196 阅读

相关 React实战-深入了解JSX

深入了解JSX 一：Why is JSX 各种编程语言层出不穷，每天都有新的编程语言出现，每隔一段时间，流行的编程语言将会如皇朝般更替。对于程序员来说，这是件又爱又恨的事情

绝地灬酷狼/ 2022年07月20日 16:18/ 0 赞/ 215 阅读

相关 redux middleware 的理解

前言这几天看了redux middleware的运用与实现原理，写了一个百度搜索的demo，实现了类似redux-thunk和redux-logger中间件的功能。

迈不过友情╰/ 2022年07月14日 09:22/ 0 赞/ 194 阅读

相关 React实战-深入源码了解Redux用法之Middleware

谈到MiddleWare的由来在官方网站有清楚的说明，并且是一步一步的讲解了它的演进过程，其中中文说明见http://cn.redux.js.org/docs/advanced

╰+哭是因爲堅強的太久メ/ 2022年07月13日 07:07/ 0 赞/ 193 阅读

相关深入理解React、Redux

React+Redux非常精炼，良好运用将发挥出极强劲的生产力。但最大的挑战来自于函数式编程（FP）范式。在工程化过程中，架构（顶层）设计将是一个巨大的挑战。要

曾经终败给现在/ 2022年07月12日 16:47/ 0 赞/ 248 阅读