前言

空闲时间把redux中的redux-thunk中间件回顾下,因为以前没有写博客的习惯,都怪自己太年轻,好了

其实:

     redux的核心概念其实很简单:将需要修改的state都存入到store里,发起一个action用来告诉(What happened?),
     用reducers描述action如何改变state tree 。创建store的时候需要传入reducer,真正能改变store中数据的是store.dispatch API。
 
      推荐 react 的官网https://redux.js.org/advanced/middleware
     当然也可以这个 http://www.redux.org.cn/docs/advanced/Middleware.html 这个中文比较看的懂 ,哈哈
 

概念

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(中间件)的更多相关文章

  1. Redux thunk中间件

    redux-thunk https://github.com/reduxjs/redux-thunk Why Do I Need This? Thunks are the recommended mi ...

  2. 如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...

  3. Redux学习(2) ----- 异步和中间件

    Redux中间件,其实就是一个函数, 当我们发送一个action的时候,先经过它,我们就可以对action进行处理,然后再发送action到达reducer, 改变状态,这时我们就可以在中间件中,对a ...

  4. 25.redux回顾,redux中的action函数异步

    回顾:Redux: 类似于 Vuex 概念:store/reducer/action action:动作 {type,.....} 一定要有type 其他属性不做限制 reducer:通过计算产生st ...

  5. 在react-native中使用redux

    redux是什么? redux是一个用于管理js应用状态的容器.redux出现时间并不是很长,在它出现之前也有类似功能的模块出现,诸如flux等等.redux设计的理念很简单,似乎最初这个开发团队就有 ...

  6. 优雅的在React项目中使用Redux

    概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...

  7. 在 react 项目里如何配合immutable在redux中使用

    一.reducer文件的处理 先安装 immutable 与 redux-immutable yarn add immutable redux-immutable 我们可能会在很多地方定义子树,这就需 ...

  8. 通过三张图了解Redux中的重要概念

    上周利用业余的时间看了看Redux,刚开始有点不适应,一下在有了Action.Reducer.Store和Middleware这么多新的概念. 经过一些了解之后,发现Redux的单向数据里的模式还是比 ...

  9. Redux中的重要概念

    Action/Reducer/Store 首先,先看看第一张图,图中展示了Redux的单向数据流,以及Action.Reducer和Store这三个核心概念. 下面就围绕上图,非别介绍Action.R ...

随机推荐

  1. Web08_MySQL&JDBC回顾

    数据库操作:DATABASE 查看正在使用的数据库: SELECT DATABASE(); 表操作:TABLE 修改表修改列明 ALTER TABLE 表名 CHANGE 旧列名 新列名 类型(长度) ...

  2. CentOS7上安装配置破解Elasticsearch+Kibana 6.4.2-6.5.1全过程

    最近正在学习服务器应用平台的搭建的相关知识.有幸从朋友与书上了解到Elastic套件的使用,我花了两天的时间把最新的套件部署在我的服务器上,中间踩了数不清的坑.我把整个过程都记录了下来与各位有需要的朋 ...

  3. python学习之socket&黏包

    7.4 socket ​ [重要] 避免学习各层的接口,以及协议的使用, socket已经封装好了所有的接口,直接使用这些接口或者方法即可,方便快捷,提升开发效率. socket在python中就是一 ...

  4. centos6.5安装mysql报错

    安装完mysql后,mysql服务无法打开. 报错 查看mysql日志 执行命令:less /var/log/mysqld.log  发现是权限不够,不能创建pid文件.因此改变权限,再次启动服务 问 ...

  5. 1.LTE系统概述

    信息源:中国大学MOOC 中搜索 移动通信网络与优化 兰州交通大学 3GPP协议:https://www.3gpp.org/DynaReport/36-series.htm 可以在中国大学MOOC中搜 ...

  6. 【VS开发】win7下让程序默认以管理员身份运行

    在win7中用自己写的程序读取MBR时,突然提示无法对磁盘进行操作,而在xp下并没有这个问题:最后点右键以管理员身份运行才可以正常运行.于是想办法让程序在双击启动时默认以管理员身份运行.具体方法: 1 ...

  7. 封装jquery插件

    最近要到使用别的jquery插件,但部分功能并不能满足,为满足功能,只能对插件进行修改来满足,要修改插件,先要了解插件如何封装, 明白了如何封装插件,才能更好修改插件:如何封装插件? 1.插件封装类型 ...

  8. IDEA 如何批量修改变量名

    修改前的变量 System.out.println("bbbbb"); System.out.println("bbbbb"); System.out.prin ...

  9. 第七周课程总结&实验报考(五)

    第七周课程总结&实验报考(五) 实验四 类的继承 实验目的: 1.理解抽象类与接口的使用: 2.了解包的作用,掌握包的设计方法. 实验要求: 1.掌握使用抽象类的方法. 2.掌握使用系统接口的 ...

  10. Redis数据类型Strings、Lists常用操作指令

    Redis数据类型Strings.Lists常用操作指令 Strings常用操作指令 GET.SET相关操作 # GET 获取键值对 127.0.0.1:6379> get name (nil) ...