redux中间件之redux-thunk
redux的核心概念其实很简单:将需要修改的state都存入到store里,发起一个action用来描述发生了什么,用reducers描述action如何改变state tree 。创建store的时候需要传入reducer,真正能改变store中数据的是store.dispatch API。
1.概念
dispatch一个action之后,到达reducer之前,进行一些额外的操作,就需要用到middleware。你可以利用 Redux middleware 来进行日志记录、创建崩溃报告、调用异步接口或者路由等等。
换言之,中间件都是对store.dispatch()的增强
2.中间件的用法
import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';const store = createStore(reducers, applyMiddleware(thunk)
);
复制代码
直接将thunk中间件引入,放在applyMiddleware方法之中,传入createStore方法,就完成了store.dispatch()的功能增强。即可以在reducer中进行一些异步的操作。
3.applyMiddleware()
其实applyMiddleware就是Redux的一个原生方法,将所有中间件组成一个数组,依次执行。 中间件多了可以当做参数依次传进去
const store = createStore(reducers, applyMiddleware(thunk, logger)
);
复制代码
如果想了解它的演化过程可以去redux的官方文档:https://redux.js.org/advanced/middleware
4.redux-thunk
分析redux-thunk的源码node_modules/redux-thunk/src/index.js
function createThunkMiddleware(extraArgument) {return ({ dispatch, getState }) => next => action => {if (typeof action === 'function') {return action(dispatch, getState, extraArgument);}return next(action);};
}const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;export default thunk;
复制代码
redux-thunk中间件export default
的就是createThunkMiddleware()
过的thunk,再看 createThunkMiddleware
这个函数,返回的是一个柯里化过的函数。我们再翻译成ES5的代码容易看一点,
function createThunkMiddleware(extraArgument) {return function({ dispatch, getState }) {return function(next){return function(action){if (typeof action === 'function') {return action(dispatch, getState, extraArgument);}return next(action);};}}
}
复制代码
这么一看,就可以看出来redux-thunk最重要的思想,就是可以接受一个返回函数的action creator。如果这个action creator 返回的是一个函数,就执行它,如果不是,就按照原来的next(action)执行。
正因为这个action creator可以返回一个函数,那么就可以在这个函数中执行一些异步的操作。 例如:
export function addCount() {return {type: ADD_COUNT}
}export function addCountAsync() {return dispatch => {setTimeout( () => {dispatch(addCount())},2000)}
}
复制代码
addCountAsync
函数就返回了一个函数,将dispatch作为函数的第一个参数传递进去,在函数内进行异步操作就可以了。
参考文档: http://www.redux.org.cn/docs/advanced/Middleware.html
redux中间件之redux-thunk相关推荐
- redux中间件saga和thunk的区别
redux中的action仅支持原始对象(plain object),处理有副作用的action,需要使用中间件.中间件可以在发出action,到reducer函数接受action之间,执行具有副作用 ...
- redux异步action_React躬行记(12)——Redux中间件
Redux的中间件(Middleware)遵循了即插即用的设计思想,出现在Action到达Reducer之前(如图10所示)的位置.中间件是一个固定模式的独立函数,当把多个中间件像管道那样串联在一起时 ...
- redux中间件原理-讲义
1.redux中间件简介 1.1.什么是redux中间件 redux 提供了类似后端 Express 的中间件概念,本质的目的是提供第三方插件的模式,自定义拦截 action -> reduce ...
- Redux中间件(redux-thunk、redux-promise、redux-saga)
文章目录 1.redux中间件简介 1.1.什么是redux中间件 1.2.使用redux中间件 2.中间件的运行机制 2.1.createStore源码分析 2.2.applyMiddleware源 ...
- Redux中间件——Redux-thunk
什么是thunk? Redux-thunk是作为redux的middleware存在的,thunk是函数编程界的一个专有名词,主要用于calculation delay,也就是延迟计算. functi ...
- redux中间件+react高阶组件
1.redux中间件 中间件提供第三方插件的模式,自定义拦截 action -> reducer 的过程.变为 action -> middlewares -> reducer.这种 ...
- Koa2和Redux中间件源码研究
一.Koa2中间件源码分析 在Koa2中,中间件被存放在一个数组中. 使用koa中,最常见的就是app.use(fn),use函数部分源码如下所示.首先中间件必须是个函数.若是generator函数, ...
- redux引用多个中间件_如何轻松创建您的第一个Redux中间件
redux引用多个中间件 by Gabriele Cimato 加布里埃莱·西马托(Gabriele Cimato) 如何轻松创建您的第一个Redux中间件 (How to create your f ...
- [Redux/Mobx] 说说Redux的实现流程
[Redux/Mobx] 说说Redux的实现流程 通过分析redux的几个核心api,来看如何实现redux store.subscribe: 订阅数据的变化 store.dispatch:disp ...
- [Redux/Mobx] 在Redux中怎么发起网络请求?
[Redux/Mobx] 在Redux中怎么发起网络请求? 如果单纯的使用Redux,因为redux的actionCreator返回一个plain object,所以不能在actionCreator中 ...
最新文章
- 检测到目标服务器启用了trace方法_综述:目标检测中的多尺度检测方法
- GDCM:gdcm::FilenameGenerator的测试程序
- 逆向入门--何为OEP
- Qt 【遍历文件夹文件,为listwidgetItem设置图标】
- 【转】D365 FO第三方集成(三)---服务实现
- Windows下的PHP开发环境搭建——PHP线程安全与非线程安全、Apache版本选择,及详解五种...
- 设计灵感|拼贴风格海报设计,优秀案例让你它好看在哪里?
- 数字后端基本概念介绍<IO Cluster>
- 全网首发:以管理员身份运行bat,自动切换盘符、目录的正确做法
- wps怎么生成html,wps如何自动生成页码 wps页码设置详细方法
- es6之扩展运算符 三个点(...)
- 一个基于 Java 编写的物联网开源平台
- 修改文件句柄:ulimit 系统设置脚本(避免设置不彻底而无效)
- Linux放行单个8080端口和放行8000-9000端口区间
- linux获取当前日期yyyymmdd,获取当前的日期
- C语言 输出菱形 最短代码!
- C# 通过反射根据描述特性转换枚举型值
- 以太网卡TSO、GSO、LRO、GRO描述及相关配置
- 《人工智能杂记》人工智能时间简史
- 35 岁 学python 必要_30岁之前,要不要买房,买车
热门文章
- Swift - 发送消息(文本,图片,文件等)给微信好友或分享到朋友圈
- DelphiX教程系列 3 - 动画 part 1
- 只安装了JRE,没有手动配置环境变量,eclipse跑不起来,Exit code = -1
- VNCServer在Linux下设置
- PLSQL快捷键使用,让你高速开发
- user_tab_columns是什么
- java system.out.read_一个java文件操作小程序 system.out.in buffer read
- 百度网盘php文件怎么打开,如何通过网页版百度网盘下载大文件
- 计算机组装虚拟实验,组装计算机的虚拟实验室
- 鸿蒙日程管理若离,2020华为HDC日程确定,鸿蒙、HMS以及EMUI 11成最关注点