redux 中的 redux-thunk(中间件)
前言
空闲时间把redux中的redux-thunk中间件回顾下,因为以前没有写博客的习惯,都怪自己太年轻,好了
其实:
概念
dispatch一个action之后,到达reducer之前,进行一些额外的操作,就需要用到middleware。
你可以利用 Redux middleware 来进行日志记录、创建崩溃报告、调用异步接口或者路由等等
中间件
import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk'; const store = createStore(
reducers,
applyMiddleware(thunk)
);
直接将thunk中间件引入,放在applyMiddleware方法之中,传入createStore方法,就完成了store.dispatch()的功能增强。
即可以在reducer中进行一些异步的操
applyMiddleware
其实applyMiddleware就是Redux的一个原生方法,将所有中间件组成一个数组,依次执行。 中间件多了可以当做参数依次传进去
const store = createStore(
reducers,
applyMiddleware(thunk, logger)
);
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
这个函数,
返回的是一个细化过的函数。
redux-thunk思想
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)
}
}
将dispatch作为函数的第一个参数传递进去,在函数内进行异步操作就可以了。
中间件当然还是需要集合redux 来操作的,等下一篇讲解下redux吧 可能更加好理解
redux 中的 redux-thunk(中间件)的更多相关文章
- Redux thunk中间件
redux-thunk https://github.com/reduxjs/redux-thunk Why Do I Need This? Thunks are the recommended mi ...
- 如何优雅地在React项目中使用Redux
前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
- Redux学习(2) ----- 异步和中间件
Redux中间件,其实就是一个函数, 当我们发送一个action的时候,先经过它,我们就可以对action进行处理,然后再发送action到达reducer, 改变状态,这时我们就可以在中间件中,对a ...
- 25.redux回顾,redux中的action函数异步
回顾:Redux: 类似于 Vuex 概念:store/reducer/action action:动作 {type,.....} 一定要有type 其他属性不做限制 reducer:通过计算产生st ...
- 在react-native中使用redux
redux是什么? redux是一个用于管理js应用状态的容器.redux出现时间并不是很长,在它出现之前也有类似功能的模块出现,诸如flux等等.redux设计的理念很简单,似乎最初这个开发团队就有 ...
- 优雅的在React项目中使用Redux
概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...
- 在 react 项目里如何配合immutable在redux中使用
一.reducer文件的处理 先安装 immutable 与 redux-immutable yarn add immutable redux-immutable 我们可能会在很多地方定义子树,这就需 ...
- 通过三张图了解Redux中的重要概念
上周利用业余的时间看了看Redux,刚开始有点不适应,一下在有了Action.Reducer.Store和Middleware这么多新的概念. 经过一些了解之后,发现Redux的单向数据里的模式还是比 ...
- Redux中的重要概念
Action/Reducer/Store 首先,先看看第一张图,图中展示了Redux的单向数据流,以及Action.Reducer和Store这三个核心概念. 下面就围绕上图,非别介绍Action.R ...
随机推荐
- 阶段3 2.Spring_06.Spring的新注解_2 spring的新注解-Bean
下面要解决第二部分的配置问题 这两行一出场,就表示可以通过调用构造函数实例化.因为这都是newInstance 上面的需要加上参数,下面的没有任何参数 下面这俩实现的效果不一样. 下面这个除了会创建对 ...
- Linux常用命令:修改文件权限chmod 754/744
常用命令:chmod 777 文件或目录 chmod 777 /etc/squid 运行命令后,squid文件夹(目录)的权限就被修改为777(可读可写可执行). Linux系统中,每个用户的角色 ...
- PEP8-python编码规范(上)
包含主要 Python 发行版中的标准库的 Python 代码的编码约定. 1.代码缩进 (1)每个缩进需要使用 4 个空格.一般使用一个Tab键. Python 3 不允许混合使用制表符和空格来缩进 ...
- 车牌识别1:License Plate Detection and Recognition in Unconstrained Scenarios阅读笔记
一.WHAT 论文下载地址:License Plate Detection and Recognition in Unconstrained Scenarios [pdf] github 的项目地址: ...
- python基础--面向对象之封装
# 在python中用双下划线,开头的方式将属性隐藏起来(设置成私有的) # 但其实这只是一种变形操作,而且仅仅在类定义阶段会发生变形 # 类中所有双下划线开头的如__x都会在类定义的时候自动形成:_ ...
- value(C# )
上下文关键字 value 用在普通属性声明的 set 访问器中. 此关键字类似于方法的输入参数. 关键字 value 引用客户端代码尝试分配给属性的值. 在以下示例中,MyDerivedClass 有 ...
- Dubbo-zooKeeper入门讲解
1.Dubbo-zooKeeper史上最简单入门实例 2.Dubbo官方文档
- Java类初始化和实例初始化过程
1.类初始化过程 一个类要创建实例需要先加载并初始化该类 main方法所在的类需要先加载和初始化 一个子类要初始化需要先初始化父类 一个类初始化就是执行<client>()方法(编译器生成 ...
- Servlet概念及与Jsp的区别
一.Servlet概念 Servlet是在服务器上运行的小程序.一个Servlet就是一个Java类,并且可以通过”请求-响应”编程模型来访问这个驻留在服务器内存里的Servlet程序 二.Servl ...
- python-day25(正式学习)
目录 组合 多态 多态性 好处 封装 两个层面 property 组合 组合就是一个类的对象具备某一个属性,该属性的值是指向另外外一个类的对象 组合是用来解决类与类之间代码冗余的问题 首先我们先写一个 ...