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

前端之家收集整理的这篇文章主要介绍了深入理解redux之compose的具体应用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

应用

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

  1. import {createStore,applyMiddleware,compose} from 'redux';
  2. import createSagaMiddleware from 'redux-saga';
  3. const sagaMiddleware = createSagaMiddleware();
  4. const middlewares = [];
  5.  
  6. let storeEnhancers = compose(
  7. applyMiddleware(...middlewares,sagaMiddleware),(window && window .devToolsExtension) ? window .devToolsExtension() : (f) => f,);
  8.  
  9. const store = createStore(rootReducer,initialState={},storeEnhancers);

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

reduce方法

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

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

看下函数签名:

  1. arr.reduce(callback[,initialValue])

callback

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

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

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

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

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

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

下面看一个简单的例子:

数组求和

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

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

  1. var series = ['a1','a3','a1','a5','a7','a4','a2','a1'];
  2.  
  3. var result= series.reduce(function (accumulator,current) {
  4. if (current in accumulator) {
  5. accumulator[current]++;
  6. }
  7. else {
  8. accumulator[current] = 1;
  9. }
  10. return accumulator;
  11. },{});
  12.  
  13. console.log(JSON.stringify(result));
  14. // {"a1":4,"a3":2,"a5":1,"a7":1,"a4":1,"a2":1}

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

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

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

compose函数

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

  1. export default function compose(...funcs) {
  2. if (funcs.length === 0) {
  3. return arg => arg
  4. }
  5.  
  6. if (funcs.length === 1) {
  7. return funcs[0]
  8. }
  9.  
  10. return funcs.reduce((a,b) => (...args) => a(b(...args)))
  11. }

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

看下面的例子:

  1. import { compose } 'redux'
  2.  
  3. // function f
  4. const f = (arg) => `函数f(${arg})`
  5.  
  6. // function g
  7. const g = (arg) => `函数g(${arg})`
  8.  
  9. // function h 最后一个函数可以接受多个参数
  10. const h = (...arg) => `函数h(${arg.join('_')})`
  11.  
  12. 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相关文章