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


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方法
reduce方法reduce方法在理解compose函数之前先来认识下什么是reduce方法？
官方文档上是这么定义reduce方法的：官方文档reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其简化为单个值。
看下函数签名：
arr.reduce(callback[, initialValue])
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 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}


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


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函数
compose函数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)))
}


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


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))) 。以上就是本文的全部内容，希望对大家的学习有所帮助。