深入理解redux之compose的具体应用
应用
最近给自己的react项目添加redux的时候，用到了redux中的compose函数，使用compose来增强store，下面是我在项目中的一个应用:
import{createStore,applyMiddleware,compose}from'redux';
importcreateSagaMiddlewarefrom'redux-saga';
constsagaMiddleware=createSagaMiddleware();
constmiddlewares=[];
letstoreEnhancers=compose(
applyMiddleware(...middlewares,sagaMiddleware),
(window&&window.devToolsExtension)?window.devToolsExtension():(f)=>f,
);
conststore=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将报错。
下面看一个简单的例子:
数组求和
varsum=[0,1,2,3].reduce(function(a,b){
returna+b;
},0);
//sum值为6
这个例子比较简单，下面再看个稍微复杂点的例子，计算数组中每个元素出现的次数：
varseries=['a1','a3','a1','a5','a7','a1','a3','a4','a2','a1'];
varresult=series.reduce(function(accumulator,current){
if(currentinaccumulator){
accumulator[current]++;
}
else{
accumulator[current]=1;
}
returnaccumulator;
},{});
console.log(JSON.stringify(result));
//{"a1":4,"a3":2,"a5":1,"a7":1,"a4":1,"a2":1}
这个例子很巧妙的利用了数组的reduce方法，在很多算法面试题中也经常用到。这里需要注意的是需要指定initialValue参数。
通过reduce函数还可以实现数组去重：
vara=[1,1,2,3,4,4,5,6,6,6,7];
Array.prototype.duplicate=function(){
returnthis.reduce(function(cal,cur){
if(cal.indexOf(cur)===-1){
cal.push(cur);
}
returncal;
},[])
}
varnewArr=a.duplicate();
compose函数
理解完了数组的reduce方法之后，就很容易理解compose函数了，因为实际上compose就是借助于reduce来实现的。看下官方源码：
exportdefaultfunctioncompose(...funcs){
if(funcs.length===0){
returnarg=>arg
}
if(funcs.length===1){
returnfuncs[0]
}
returnfuncs.reduce((a,b)=>(...args)=>a(b(...args)))
}
compose的返回值还是一个函数，调用这个函数所传递的参数将会作为compose最后一个参数的参数，从而像'洋葱圈'似的，由内向外，逐步调用。
看下面的例子：
import{compose}'redux'；
//functionf
constf=(arg)=>`函数f(${arg})`
//functiong
constg=(arg)=>`函数g(${arg})`
//functionh最后一个函数可以接受多个参数
consth=(...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)))。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。