redux异步action_React躬行记(12)——Redux中间件
Redux的中间件(Middleware)遵循了即插即用的设计思想,出现在Action到达Reducer之前(如图10所示)的位置。中间件是一个固定模式的独立函数,当把多个中间件像管道那样串联在一起时,前一个中间件不但能将其输出传给下一个中间件作为输入,还能中断整条管道。在引入中间件后,既能扩展Redux的功能,也能增强dispatch()函数,适应不同的业务需求,例如通过中间件记录日志、报告奔溃或处理异步请求等。
一、开发模式
在设计中间件函数时,会遵循一个固定的模式,如下代码所示,使用了柯里化、高阶函数等函数式编程中的概念。
function middleware(store) {return function(next) {return function(action) {return next(action);};};
}
middleware()函数接收一个Store实例,返回值是一个接收next参数的函数。其中next也是一个函数,用来将控制权转移给下一个中间件,从而实现了中间件之间的串联,它会返回一个处理Action对象的函数。由于闭包的作用,在这最内层的函数中,依然能调用外层的对象和函数,例如访问action所携带的数据、执行store中的dispatch()或getState()方法等。示例中的middleware()函数只是单纯的将接收到的action对象转交给后面的中间件,没有对其做额外的处理。
之所以将中间件函数写成层层嵌套的模式,有以下几个原因。
(1)扩展Redux需要遵循函数式编程的设计思想。
(2)柯里化让中间件更容易处理数据流,即便于形成数据处理管道。
(3)每个中间件的职责单一(即函数代码尽量少),通过嵌套组合完成复杂功能。
利用ES6中的箭头函数能将middleware()函数改写得更加简洁,如下所示。
const middleware = store => next => action => {return next(action);
};
二、applyMiddleware()
Redux提供了组织中间件的applyMiddleware()函数,在阅读过此函数的源码(如下所示)之后,才能更好的理解中间件的开发模式。
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 };};
}
1)源码分析
接下来会分析函数中的代码,为了便于理解,在说明中还会给出相应的语句。
(1)利用剩余参数(...middlewares)的方式,applyMiddleware()函数可以接收任意多个中间件。
(2)返回一个接收createStore参数的函数,在函数体中调用Redux的createStore()函数,得到一个store实例。
const store = createStore(...args);
(3)middlewareAPI变量包含了中间件需要的参数,即store.getState()和dispatch()方法。
const middlewareAPI = {getState: store.getState,dispatch: (...args) => dispatch(...args)
};
(4)将middlewareAPI变量传递给每个中间件并调用一次,再将返回的函数组成一个新数组。
const chain = middlewares.map(middleware => middleware(middlewareAPI));
(5)通过compose()增强dispatch()方法,compose()是Redux内置的函数,可从右向左合成多个函数,例如compose(f1, f2, f3)(arg)相当于f1(f2(f3(arg)))。
dispatch = compose(...chain)(store.dispatch);
(6)最终得到一个对象,包含store实例的方法和增强后的dispatch()方法。
return { ...store, dispatch };
2)使用方式
applyMiddleware()函数有两种使用方式,下面用一个例子来演示,先定义两个中间件:m1和m2,以及一个Reducer函数:caculate()。
const m1 = store => next => action => {console.log("m1");return next(action);
};
const m2 = store => next => action => {console.log("m2");return next(action);
};
function caculate(previousState = {digit:0}, action) {let state = Object.assign({}, previousState);switch (action.type) {case "ADD":state.digit += 1;break;case "MINUS":state.digit -= 1;}return state;
}
(1)applyMiddleware()是一个三级柯里化的函数,如果要使用,那么可以像下面这样调用,先传两个中间件,再传createStore()函数,最后传caculate()函数。
let store = applyMiddleware(m1, m2)(createStore)(caculate);
(2)applyMiddleware()函数还可以作为createStore()的最后一个参数,如下代码所示,第一个参数是caculate()函数,第二个参数是applyMiddleware()函数的结果。
let store = createStore(caculate, applyMiddleware(m1, m2));
在applyMiddleware()函数的内部,chain数组的值是[m1(next), m2(next)],由m1和m2返回的包含next参数的函数组成。增强后的dispatch()方法通过m1(m2(store.dispatch))得到,具体如下所示。
dispatch = action => {console.log("m1");return next(action);
};
当调用store实例的dispatch()方法(如下代码所示)时,会先输出“m1”;然后调用next()函数,也就是m2(next),输出“m2”;最后调用m2中的next()函数,也就是dispatch()方法。注意,不能在中间件中直接调用dispatch()方法,以免造成死循环。
store.dispatch({ type: "ADD" });
三、redux-thunk
如果要在Redux中处理异步请求,那么可以借助中间件实现,目前市面上已有很多封装好的中间件可供使用,例如redux-thunk、redux-promise或redux-saga等。本节将着重讲解redux-thunk中间件,其核心代码如下所示。
function createThunkMiddleware(extraArgument) {return ({ dispatch, getState }) => next => action => {if (typeof action === "function") {return action(dispatch, getState, extraArgument);}return next(action);};
}
首先检测action的类型,如果是函数,那么就直接调用并将dispatch、getState和extraArgument作为参数传入;否则就调用next参数,转移控制权。redux-thunk其实扩展了dispatch()方法,使其参数既可以是JavaScript对象,也可以是函数。
接下来用一个简单的例子演示redux-thunk的用法,如下代码所示,首先通过import引入redux-thunk,并定义一个异步Action。
import thunk from "redux-thunk";
function asynAction() {return dispatch => {fetch("server.php").then(response => response.json(),error => console.log(error)).then(data => {dispatch(data); //{type: "ADD"}});};
}
然后让asynAction()函数返回一个接收dispatch参数的函数,在函数体内通过fetch()函数请求服务端的资源,再利用得到的Promise处理获取到的数据。在第二个then()方法中,data参数被赋为{type: "ADD"},也就是server.php响应的数据,其代码如下所示。
<?php
$json = ['type' => 'ADD'
];
echo json_encode($json);
再接入redux-thunk中间件,即将thunk传给applyMiddleware()函数,最后发送一个异步Action,如下所示。
let store = createStore(caculate, applyMiddleware(thunk));
store.dispatch(asynAction());
redux异步action_React躬行记(12)——Redux中间件相关推荐
- HTML躬行记(4)——Web音视频基础
1.基础概念 本节音视频的基础概念摘自书籍<FFmpeg入门详解 音视频原理及应用>. 1.1音频 声音的三要素为频率.振幅和波形,即声音的音调.声波的响度和声音的音色. 音频是一种利用数 ...
- postgresql易学堂_Web优化躬行记(2)——JavaScript
一.语言 1)慎用全局变量 当变量暴露在全局作用域中时,由于全局作用域比较复杂,因此查找会比较慢. 并且还有可能污染window对象,覆盖之前所赋的值,发生意想不到的错误. 0 == '' //tru ...
- vue 数组添加元素_Vue躬行记(3)——样式和表单
Vue对DOM元素的class和style两个特性做了专门的增强,即对CSS类和内联样式做了一层封装,通过v-bind指令来处理它们,而接收的表达式既可以是简单的字符串.对象或数组,也可以是复杂的计算 ...
- Node.js躬行记(18)——半吊子的可视化搭建系统
- React躬行记(2)——JSX
JSX既不是字符串,也不是HTML,而是一种类似XML,用于描述用户界面的JavaScript扩展语法,如下代码所示.在使用JSX时,为了避免自动插入分号时出现问题,推荐在其最外层用圆括号包裹,并且必 ...
- Redux 异步数据流-- thunk中间件源码解析
Thunk 引入背景 这是一个关于Redux异步数据流的故事.引入thunk中间件的完整故事在Redux官方中文文档异步数据流.一句话总结就是:原生Redux只支持同步数据流,所以需要引入中间件(mi ...
- 精益 React 学习指南 (Lean React)- 3.4 掌控 redux 异步
书籍完整目录 3.4 redux 异步 在大多数的前端业务场景中,需要和后端产生异步交互,在本节中,将详细讲解 redux 中的异步方案以及一些异步第三方组件,内容有: redux 异步流 redux ...
- Redux异步解决方案之Redux-Thunk原理及源码解析
前段时间,我们写了一篇Redux源码分析的文章,也分析了跟React连接的库React-Redux的源码实现.但是在Redux的生态中还有一个很重要的部分没有涉及到,那就是Redux的异步解决方案.本 ...
- redux异步action_Redux数据状态管理
Redux 中文文档(https://www.redux.org.cn/) Redux入门教程(快速上手)(https://segmentfault.com/a/1190000011474522?fr ...
最新文章
- 合理利用延迟初始化优化 Spring Boot
- 全面剖析VeriSign代码签名证书
- Ubuntu14.04下C++程序编辑、编译、运行
- android控件拖动,移动、解决父布局重绘时控件回到原点
- ueditor 添加按钮不显示_不可思议按键精灵的按钮选择框居然这么简单
- 在Delphi中使用indy SMTP发送gmail邮件[转]
- rabbitmq可靠性投递_阿里Java研发二面:了解RabbitMQ?说说RabbitMQ可靠性投递
- 62 岁的比尔·盖茨当选外籍院士,但却与微软无关
- Linux之软件安装rpm、yum/dnf、源码(安装)
- autosar网络管理_Autosar 软件框架
- 全志 Allwinner V3S 开发环境搭建 (二)安装必要工具
- 大学四年,我把私藏的自学「学习网站/实用工具」都贡献出来了
- 替换PanDown神器 更新Pdown 3.4.6 清爽版
- php 视频裁剪,视频画面大小裁剪 把视频画面多余部分裁剪掉,视频画面裁剪工具的使用方法...
- android graphics,Android graphics值Bitmap
- C++中的重载丶重写丶重定义丶重定向的区别
- java将map根据key分组_Java将List中的实体类按照某个字段进行分组并存放至Map中操作代码...
- java hasnext_Java扫描仪的hasNext()方法与示例
- 随机算法 之随机数的产生
- 分享一个二维码生成的接口,简单好用