简单介绍react redux的中间件的使用


Posted in Javascript onApril 06, 2018

用过react的同学都知道在redux的存在,redux就是一种前端用来存储数据的仓库,并对改仓库进行增删改查操作的一种框架,它不仅仅适用于react,也使用于其他前端框架。研究过redux源码的人都觉得该源码很精妙,而本博文就针对redux中对中间件的处理进行介绍。

在讲redux中间件之前,先用两张图来大致介绍一下redux的基本原理:

简单介绍react redux的中间件的使用

图中就是redux的基本流程,这里就不细说。

一般在react中不仅仅利用redux,还利用到react-redux:

简单介绍react redux的中间件的使用

react-redux这里也不细说。

redux中间件

一般情况下,redux是不具备处理异步请求的能力,稚嫩沟通过间接或者添加中间件的方式,加强了对dispatch的能力,是的redux具备异步的能力;

一般来说,redux处理异步的方式有两种:间接方式和中间件方式;

间接方式:

间接方式就死自定义异步的行为,保留dispatch同步的功能。
思路:就是讲异步返回的结果塞进action中,然后在通过dispatch同步到reduce中,再改变state;

简单介绍react redux的中间件的使用

demo:

request.get(API)
    .then(d => {
      store.dispatch(type: xxx, playload: d)
    })

这种方式没有破坏dispatch的同步机制,原汁原味的使用dispatch将数据同步到state中,但不好的地方就是每次调用都会写很长的一段。

中间件方式

中间件方式中核心部分就是redux提供的applyMiddleWare这个高阶函数,它通过多层调用后悔返回一个全新的store对象,全新的store对象和原来对象中,唯一的不同就是dispatch具备了异步的功能;

源码:

const applyMiddleWare = (...middlewares) => createStore => (reducer, initState) =>{
  const store = createStore(reducer, initState);
  const _dispatch = store.dispatch;
  const MiddleWareAPI = {
    getState: store.getState,
    dispatch: action => _dispatch(action)  1)
  };
  const chain = [];
  chain = middlewares.map(middleware => {middleware(MiddleWareAPI)}); 2)
  let dispatch = compose(...chain)(store.dispatch);  3)
  return {
    dispatch,
    ...store
  }
}

短短十几行代码,其中却蕴含着不少精妙之处,博主选择了其中三处地方进行分析其精妙之处:

1)MiddleWareAPI主要是通过塞进中间件,从而最终塞进action中,让action能具备dispatch的能力,而这里为什么要用匿名函数,主要原因是因为要让MiddleWareAPI.dispatch中的store和applyMiddleWare最终返回的store保持一致,要注意的是MiddleWareAPI.dispatch不是真正让state改变,它可以理解为是action和中间件的一个桥梁。

2)改地方就是将MiddleWareAPI塞进所有的中间件中,然后返回一个函数,而中间件的形式后面会说到。

3)该地方是最为精妙之处,compose会将chain数组从右到左一次地柜注入到前一个中间件,而store.dispatch会注入到最右边的一个的中间件。其实这里可以将compose理解为reduce函数。

eg:

M = [M1,M2,M3] ----> M1(M2(M3(store.dispatch)));

从这里其实就知道中间件大致是什么样子的了:

中间件基本形式:

const MiddleWare = store => next => action => {
  ...
}

参数解释:

  1. store:其实就是MiddleWareAPI;
  2. next: 这里有两种情况,如果改中间件是在middlewares数组里最右边,则next就是store.dispatch;否则就是它相邻左边的一个中间件返回值(闭包函数,就是action => {}这个函数);
  3. action:可以是函数,也可以是含有promise的对象;

到这里可能会有些糊涂,糊涂的地方可能就是next和store.dispatch的区别分不清;

区别:

next(最右边的中间件):其实是真正触发reducer,改变state的dispatch,这里的dispatch和state是同步关系的;这里的action必须是一个对象,不能含有异步信息;

next(非最右边的中间件):其实就是相邻前一个中间件返回的函数(action => {...});这里的action就是上一级中间件next(action)中的action,第一个中间件的action就是项目中store.dispatch(action)中的action。

中间件中的store.dispatch:其实就是用来塞进action的,这里就理解为action和中间件通信的渠道吧。

流程图:

简单介绍react redux的中间件的使用

demo:

export const MiddleForTest = store => next => action => {
  if (typeof action === 'function') {
    action(store);
  } else {
    next(action);
  }
};

export const MiddleForTestTwo = store => next => action => {
  next(action);
};

export function AjaxAction(store) {
  setTimeout(function () {
    store.dispatch({
      type: 'up',
      playload: '异步信息'
    })
  }, 1000)
}

store.dispatch(AjaxAction);

说道这里应该会对中间件有个大致的认识,接下来介绍一下常用的中间件以及自己写一个中间件。

redux-thunk:主要是适用于action是一个函数的情况,它是对原有的中间件模式再封装多一层,原则上是支持promise为主的action函数;

export function AjaxThunk (url, type) {
  return dispatch => {
    Ajax(url)
      .then(d => {
        dispatch({
          type,
          playload: d
        })
      })
  }
}
store.dispatch(AjaxThunk(url1, 'add'));

redux-promise:主要就是针对action对象,action对象是一个promise的异步请求函数:

它的大概实现思路是:

const promiseAction = store => next => action => {
    const {type, playload} = action;
    if (playload && typeof playload.then === 'function') {
      playload.then(result => {
        store.dispatch({type, playload: result});
      }).catch(e => {})
    } else {
      next(action);
    }
}

action = {
 type: 'xxx',
 playload: Ajax(url)
}

自定义中间件:很多时候网上的redux中间件可能不太符合项目中的需要,所以这时候可以自己写一套适合项目的中间件,以下指示本博主的一个demo,形式不唯一:

export const PromiseWares = store => next => action => {
  next({type: 'right', playload: 'loading'});
  if (typeof action === 'function') {
    const {dispatch} = store;
    action(dispatch);
  } else {
    const {type, playload} = action;
    if (playload && typeof playload.then === 'function') {
      playload.then(result => {
        store.dispatch({type, playload: result});
      }).catch(e => {})
    } else {
      next(action);
      next({type: 'right', playload: 'noLoading'});
    }
  }
};

以上就是本博主对redux中间件的理解,如有不对,请指出。

Javascript 相关文章推荐
Javascript学习笔记4 Eval函数
Jan 11 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
基于js disabled="false"不起作用的解决办法
Jun 26 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
关于node-bindings无法在Electron中使用的解决办法
Dec 18 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
JavaScript中CreateTextFile函数
Aug 30 Javascript
webpack源码之loader机制详解
Apr 06 #Javascript
vue.js项目nginx部署教程
Apr 05 #Javascript
常用的 JS 排序算法 整理版
Apr 05 #Javascript
通过 JS 判断页面是否有滚动条的实现方法
Apr 05 #Javascript
mint-ui在vue中的使用示例
Apr 05 #Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 #Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 #Javascript
You might like
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
初识通用数据库操作类――前端easyui-datagrid,form(php)
2015/07/31 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
javascript 定义新对象方法
2010/02/20 Javascript
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
Javascript计算时间差的函数分享
2011/07/04 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
AngularJS 过滤器(自带和自建)详解
2016/09/19 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
浅谈Python中数据解析
2015/05/05 Python
Python max内置函数详细介绍
2016/11/17 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
对python:print打印时加u的含义详解
2018/12/15 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
python入门教程之基本算术运算符
2020/11/13 Python
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
常务副总经理岗位职责
2014/04/12 职场文书
预备党员考察意见范文
2015/06/01 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
Java 死锁解决方案
2022/05/11 Java/Android