浅谈Redux中间件的实践

最近，该项目的前端开发框架由React Redux实现。但是在开发过程中如何异步访问服务器并想要输出状态树日志，那么如何解决这两个问题呢？采用Redux中间件

为什么要使用中间件

使用Redux进行状态管理时，用户在UI级别触发行为，通过Store.dispatch将一个动作对象调度给Reducer进行触发。然后Reducer会根据类型更新相应存储上的状态树，改变后的状态会触发相应组件的重新渲染。如下图所示。在这个过程中，操作对象是一个同步对象和一个包含类型字段的简单对象。但是在访问服务器时，由于浏览器是单线程的，不会反复渲染组件，等待服务器返回结果，所以我们需要设计一种异步访问服务器的方法，实现与服务器的正常通信。

中间件介绍

在Redux架构下，一个动作对象通过store.dispatch进行调度，在调用reducer函数之前，会经过一个中间件链接，如下图所示。

从上图可以看出，一个Redux架构中可以使用多个中间件，这些中间件共同组织了处理请求的“管道”。中间件是一个独立的功能，可以组合使用。中间件有统一的接口。仅仅因为一个中间件只能完成一个特定的功能，组合多个中间件就可以满足丰富的应用需求。当然，当您使用它时，您还需要按顺序处理传入的动作。只有前面的中间件完成任务后，后面的中间件才有机会继续处理动作。

中间件的特点

中间件是独立的功能中间件，可以组合使用，有统一的接口中间件接口

每个中间件必须被定义为一个函数，该函数返回一个接受下一个参数的函数，该函数又返回一个接受动作参数的函数。Next参数本身也是一个函数，中间件调用这个next函数通知Redux其处理工作完成。

不做任何事情的中间件代码如下：

function doNothingMiddleware({ dispatch，getState }){ return function(next){ return function(action){ return next(action)；}}}包括以下功能：

调用dispatch发出一个新的动作对象，调用getState获取Redux Store上的当前状态，调用next告诉Redux当前中间件完成，让Redux调用下一个中间件访问动作对象动作上的所有数据。如果要在Redux应用程序中使用中间件，必须通过applyMiddleware生成。Redux的源代码文件非常简单，由5个文件组成，分别是createStore.js、applyMiddlware.js、compose.js、bindActionCreator.js、combineReducers.js和createStore，用来创建状态树，并公开了几种方法，包括dispatch、subscribe、getState、replaceReducer和$ $ observable。传入createStore的参数有reducer、preloadedState和enhancer，其中enhancer是一个存储增强器，是一个函数，只能由applyMiddleware生成。applyMiddleware函数根据外部函数(中间件函数)包装原来的调度函数，然后公开新的调度函数。

//根据外部函数(中间件函数)包装原来的调度函数，然后暴露新的调度函数。导出默认函数应用中间件(.中间件){//返回一个可以接受createStore方法作为参数的函数。再次包装返回存储的调度方法。return createstore=(.args)={//agrs包含reducer、preloadedState、enhancer const store=createStore(.args)让dispatch=()={抛出新错误(`不允许在构建中间件时进行调度。` `其他中间件不会应用于此调度。`) }//将两个方法公开给外部函数const中间件API={ getstate : store . getstate，Dispatch:(.args)=调度(.args)}//传入middlewareAPI参数并执行每个外部函数。返回的结果被收集到一个数组const chain=中间件s.map(中间件=中间件(中间件API))//这里，compose方法dispatch=compose(.连锁(商店)。派单)退货{.store，dispatch}}}用于区分中间件和增强器

中间件和增强器都是Redux Store的增强，但中间件只是增强了Redux Store的调度方式，即从调度函数调用到Redux Store正在处理的动作对象的操作。增强器是在更深层次上增强和定制Redux Store。你需要使用商店增强器。通过读取增强器接口，增强器实际上使用给定的参数创建一个Store对象，然后定制该对象，最后返回Store对象。一般比较如下：

中间件：可用于增强redux store的调度功能，即从调度函数调用到redux正在处理的动作对象的过程中的操作增强器。redux store更深层次的增强定制可以增强redux store的方方面面。异步访问服务器：

异步动作对象

没有中间件的引入，在开发社会治理子系统的时候，所有的动作都是同步的，一个同步的动作对象是一个包含类型字段的简单对象，但是我们需要实现一个异步的动作对象，它是一个函数，在动作被触发之后，减速器收到执行命令之前，可以执行一个异步的操作。

我们引入redux-thunk来实现对服务器的异步访问。访问服务器的操作至少涉及三种操作类型：

指示异步操作已启动的操作类型；指示异步操作成功的操作类型；指示异步操作失败的操作类型；Redux-thunk源代码分析

Redux-thunk中间件是Redux中异步操作的解决方案之一。在动作对象被reducer函数处理之前，是插入异步函数的时候了。代码非常简单：

函数create thunk middleware(extra argument){ return({ dispatch，getState })=next=action={ if(type of action==' function '){ return action(dispatch，getState，extra argument)；}返回next(action)} } const thunk=createthunk middleware()；导出默认thunkcreateThunkMiddleware函数返回一个实际处理每个动作对象的函数。首先，检查参数操作的类型。如果它是一个函数类型，执行这个动作函数，并放置dispatch和getState

将其作为参数传递，否则调用next让下一个中间件继续处理动作。

Redux-thunk的使用：

首先安装redux-thunk，在已经安装node.js的命令窗口中运行“NPM安装redux-thunk-save-dev”，将redux-thunk引入store.js，并保证redux的applyMiddleware功能也引入。具体实现代码如下。

从“redux”导入{createStore，combineReducers，applyMiddleware }；从“reducers”导入{otherState，dataState }；从“redux-thunk”导入thunk中间件；var reducers=combinerereducers({ other state，dataState })；var store=createStore(reducers，applyMiddleware(thunk middleware))；导出默认存储；在成功引入redux-thunk之后，我们还需要为异步操作设计一个动作对象。例如，在设备管理模块中，我们需要在成功保存设备信息后检索设备信息。代码如下：

函数SaveInfo(params){ let URL=/API/device "；返回函数(dispatch，getState){ dispatch(saveInfoRequest())；返回Http.get(url，{ params: params })。然后(RES={ if(RES RES . type===0){ dispatch(SaveInfoSuccess())；让dataState=getState()。dataState让new params={ start : datastate . start，limit: dataState.limit，search name : datastate . search name }；dispatch(getInfo(newParams)) } })。catch(错误={ dispatch(saveInfoFailure(错误))；});}}从saveDeviceInfo返回的函数中，不仅可以调度一个同步动作对象，还可以调度另一个异步动作对象，满足一些具有优先关系的业务逻辑，代码可读性比Promise实现的更清晰。

Redux记录器的使用

在开发阶段，我们需要监控redux数据流和输出日志中的每个进程。redux-logger是官方推荐的日志中间件，使用起来非常方便。当然，为了让redux-logger生效，需要保证redux在系统中用于状态管理，否则没有日志输出。Redux-logger的使用方法可以分为两种，基本使用方法如下：

从“redux”导入{ applyMiddleware，CreateStore }；从“reu dx-logger”const store=create store(reductor，apply middleware (logger))导入logger也可以自己编写一个日志输出中间件，代码如下：

var logger=store=next=action={ console . log('[action]'，action)console . log(`[action]type : $ { action . type } payload : $ { JSON . stringify(action . payload)} `)next(action)console . log('[store]'，store . getstate())console . log(`[store]$ { JSON . stringify(store . getstate())} `)} summary

Redux中间件可以增强Store.dispatch方法，多个中间件可以组成一个“管道”依次处理动作对象。只有按顺序加工后，才有机会被减速器加工。中间件的应用场景很多。除了支持对服务器的异步访问，还有很多好的中间件插件，比如用于调试的react-addons-perf和用于记录状态的redux-logger。中间件也可以根据业务需求编写。该应用程序非常灵活，可以在其他react项目中实践。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。