redux中间件之redux-thunk的具体使用


Posted in Javascript onApril 17, 2018

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
从阶乘函数对比Javascript和C#的异同
May 31 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
详解javascript中原始数据类型Null和Undefined
Dec 17 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
解决vue中对象属性改变视图不更新的问题
Feb 23 Javascript
详解如何创建并发布一个 vue 组件
Nov 08 Javascript
详解JavaScript 的变量
Mar 08 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
Vue进度条progressbar组件功能
Apr 17 #Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 #Javascript
Angular数据绑定机制原理
Apr 17 #Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
Apr 17 #Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 #jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 #jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 #jQuery
You might like
php UTF8 文件的签名问题
2009/10/30 PHP
php编写简单的文章发布程序
2015/06/18 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
JavaScript 原型学习总结
2010/10/29 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
jQuery实现3D文字特效的方法
2015/03/10 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
JS正则表达式验证中文字符
2017/05/08 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
2017/07/21 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
Python返回真假值(True or False)小技巧
2015/04/10 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
python面向对象 反射原理解析
2019/08/12 Python
Python-numpy实现灰度图像的分块和合并方式
2020/01/09 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
家居设计专业个人自荐信范文
2013/11/26 职场文书
高中运动会广播稿
2014/01/21 职场文书
餐饮服务食品安全责任书
2014/07/25 职场文书
改革共识倡议书
2014/08/29 职场文书
公司承诺书格式范文
2015/04/28 职场文书
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL