redux之compose的理解

应用

最近给自己的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);

上面这段代码可以让storeapplyMiddlewaredevToolsExtension一起使用。

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)))

下面的是我的公众号二维码图片,欢迎关注。

在这里插入图片描述

https://juejin.im/post/5e19dd58f265da3e0a54fe76

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论