当前位置 主页 > 网站技术 > 代码类 > 最大化 缩小

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

    栏目:代码类 时间:2020-01-12 21:08

    应用

    最近给自己的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)))
    }
    
    
    
    下一篇:没有了