深入理解redux之compose的具体应用


Posted in Javascript onJanuary 12, 2020

应用

最近给自己的react项目添加redux的时候,用到了redux中的compose函数,使用compose来增强store,下面是我在项目中的一个应用:

import {createStore,applyMiddleware,compose} from 'redux';
import createSagaMiddleware from 'redux-saga';
const sagaMiddleware = createSagaMiddleware();
const middlewares = [];

let storeEnhancers = compose(
  applyMiddleware(...middlewares,sagaMiddleware),
  (window && window .devToolsExtension) ? window .devToolsExtension() : (f) => f,
);

const store = createStore(rootReducer, initialState={} ,storeEnhancers);

上面这段代码可以让store与 applyMiddleware 和 devToolsExtension 一起使用。

reduce方法

在理解compose函数之前先来认识下什么是reduce方法?
官方文档上是这么定义reduce方法的:

reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其简化为单个值。

看下函数签名:

arr.reduce(callback[, initialValue])

callback

执行数组中每个值的函数,包含四个参数:

accumulator(累加器)
累加器累加回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue。

currentValue(当前值)
数组中正在处理的元素。

currentIndex可选(当前索引)
数组中正在处理的当前元素的索引。 如果提供了initialValue,则索引号为0,否则为索引为1。

array可选(数组)
调用reduce()的数组

initialValue可选(初始值)
用作第一个调用 callback的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初 始值的空数组上调用 reduce 将报错。

下面看一个简单的例子:

数组求和

var sum = [0, 1, 2, 3].reduce(function (a, b) {
 return a + b;
}, 0);
// sum 值为 6

这个例子比较简单,下面再看个稍微复杂点的例子,计算数组中每个元素出现的次数:

var series = ['a1', 'a3', 'a1', 'a5', 'a7', 'a1', 'a3', 'a4', 'a2', 'a1'];

var result= series.reduce(function (accumulator, current) {
  if (current in accumulator) {
    accumulator[current]++;
  }
  else {
    accumulator[current] = 1;
  }
  return accumulator;
}, {});

console.log(JSON.stringify(result));
// {"a1":4,"a3":2,"a5":1,"a7":1,"a4":1,"a2":1}

这个例子很巧妙的利用了数组的reduce方法,在很多算法面试题中也经常用到。这里需要注意的是需要指定initialValue参数。

通过reduce函数还可以实现数组去重:

var a = [1, 1, 2, 3, 4, 4, 5, 6, 6, 6, 7];
Array.prototype.duplicate = function() {
  return this.reduce(function(cal, cur) {
    if(cal.indexOf(cur) === -1) {
      cal.push(cur);
    }
    return cal;
  }, [])
}

var newArr = a.duplicate();

compose函数

理解完了数组的reduce方法之后,就很容易理解compose函数了,因为实际上compose就是借助于reduce来实现的。看下官方源码:

export default function compose(...funcs) {
 if (funcs.length === 0) {
  return arg => arg
 }

 if (funcs.length === 1) {
  return funcs[0]
 }

 return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

compose的返回值还是一个函数,调用这个函数所传递的参数将会作为compose最后一个参数的参数,从而像'洋葱圈'似的,由内向外,逐步调用。

看下面的例子:

import { compose } 'redux';

// function f
const f = (arg) => `函数f(${arg})` 

// function g
const g = (arg) => `函数g(${arg})`

// function h 最后一个函数可以接受多个参数
const h = (...arg) => `函数h(${arg.join('_')})`

console.log(compose(f,g,h)('a', 'b', 'c')) //函数f(函数g(函数h(a_b_c)))

所以最后返回的就是这样的一个函数 compose(fn1, fn2, fn3) (...args) = > fn1(fn2(fn3(...args))) 。

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

Javascript 相关文章推荐
javascript实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
JS实现单行文字不间断向上滚动的方法
Jan 29 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
详解vee-validate的使用个人小结
Jun 07 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
详解Vue源码学习之双向绑定
Apr 10 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 Javascript
利用promise及参数解构封装ajax请求的方法
Mar 24 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 #Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 #Javascript
ES2020 新特性(种草)
Jan 12 #Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 #Javascript
es6 for循环中let和var区别详解
Jan 12 #Javascript
js 计数排序的实现示例(升级版)
Jan 12 #Javascript
JS实现动态无缝轮播
Jan 11 #Javascript
You might like
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
PHP中的表达式简述
2016/05/29 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
python实现ipsec开权限实例
2014/11/11 Python
python中dir函数用法分析
2015/04/17 Python
python删除特定文件的方法
2015/07/30 Python
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
安装docker-compose的两种最简方法
2019/07/30 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
《燕子》教学反思
2014/02/18 职场文书
信息科学与技术专业求职信范文
2014/02/20 职场文书
求职意向书范文
2014/04/01 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
文明单位创建材料
2014/12/24 职场文书
追讨欠款律师函
2015/05/27 职场文书
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏