應用

最近給自己的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','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,3,4,5,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))) 。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。