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 相关文章推荐
javascript 词法作用域和闭包分析说明
Aug 12 Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
js带按钮的提示框可供选择示例代码
Sep 17 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 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 结果集的分页实现代码
2009/03/10 PHP
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
python 保存float类型的小数的位数方法
2018/10/17 Python
解决Python使用列表副本的问题
2019/12/19 Python
使用Tensorflow将自己的数据分割成batch训练实例
2020/01/20 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
Python如何自动获取目标网站最新通知
2020/06/18 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
商务日语专业的自荐信
2014/05/23 职场文书
运动会报道稿300字
2014/10/02 职场文书
七年级地理教学计划
2015/01/22 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
Python IO文件管理的具体使用
2022/03/20 Python
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python