redux中间件之redux-thunk

标签: redux redux-thunk react
20人阅读 评论(0) 收藏 举报
分类:

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-thunk 例子

  • 2017年11月24日 11:39
  • 65KB
  • 下载

理解redux和redux的中间件redux-thunk的认识

一、Action的认识 简单点说Action就是一个对象,一个必须带key为type的对象[value是自己定义的],其他的key就根据用户自己喜好自己定义: 以下都是action的定义 1、{t...
  • kuangshp128
  • kuangshp128
  • 2017-03-28 10:29:42
  • 11152

react项目学习笔记四(redux和redux的中间件redux-thunk的认识)

一、Action的认识 简单点说Action就是一个对象,一个必须带key为type的对象[value是自己定义的],其他的key就根据用户自己喜好自己定义:  以下都是action的定义  1、...
  • jimolangyaleng
  • jimolangyaleng
  • 2017-08-03 17:45:20
  • 753

Redux 入门教程(二):中间件与异步操作

作者: 阮一峰 日期: 2016年9月20日 上一篇文章,我介绍了 Redux 的基本做法:用户发出 Action,Reducer 函数算出新的 State,View 重新渲染...
  • sinat_17775997
  • sinat_17775997
  • 2016-10-11 21:57:33
  • 707

redux-thunk异步redux

redux默认是同步的,redux-thunk是一个redux异步中间件,可以处理异步操作。 1、在创建store时,加上thunk中间件 const store = createStore(...
  • zcwforali
  • zcwforali
  • 2018-02-10 11:08:46
  • 33

React常用插件介绍:React中我们为什么要用 redux-thunk,它能做什么?

redux-thunk 是一个比较流行的 redux 异步 action 中间件,比如 action 中有 setTimeout 或者通过  fetch 通用远程 API 这些场景,那么久应该使用 ...
  • u010977147
  • u010977147
  • 2016-12-08 15:35:50
  • 6233

使用redux-thunk实现异步操作的中止

前端开发中常常会有这样的需求:设计一个select组件,每做一次选择就用ajax异步加载数据到指定页面。实现这个需求并不困难,但是仅仅是这样做,难免会出现一些不太理想的体验:如果用户迅速的切换选项,那...
  • u010582082
  • u010582082
  • 2017-07-06 19:51:18
  • 488

关于Redux的一些总结(一):Action & 中间件 & 异步

在浅说Flux开发中,简单介绍了Flux及其开发方式。Flux可以说是一个框架,其有本身的 Dispatcher 接口供开发者;也可以说是一种数据流单向控制的架构设计,围绕单向数据流的核心,其定义了一...
  • u011043843
  • u011043843
  • 2016-08-26 10:42:23
  • 6480

【React全家桶入门之十三】Redux中间件与异步action

Redux进阶:使用Redux中间件异步触发action
  • awaw00
  • awaw00
  • 2017-02-18 16:47:52
  • 6752

redux在react-native上使用(三)--加入redux-thunk

这篇 redux在react-native上使用(二)--加入saga 是使用redux-saga, 可以跟这篇做个对比看下redux-thunk和redux-saga使用上的区别. 直接在这项目...
  • sinat_17775997
  • sinat_17775997
  • 2017-04-15 00:17:54
  • 707
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 11万+
    积分: 1151
    排名: 4万+
    千山万水总是情,捐个一毛行不行 微信赞助
    微信赞助
    博客专栏
    最新评论