快捷導(dǎo)航

深入理解redux之compose的具體應(yīng)用

更新時(shí)間：2020年01月12日 16:20:38 作者：astonishqft

這篇文章主要介紹了深入理解redux之compose的具體應(yīng)用,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

應(yīng)用

最近給自己的react項(xiàng)目添加redux的時(shí)候，用到了redux中的compose函數(shù)，使用compose來(lái)增強(qiáng)store，下面是我在項(xiàng)目中的一個(gè)應(yīng)用:

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函數(shù)之前先來(lái)認(rèn)識(shí)下什么是reduce方法？
官方文檔上是這么定義reduce方法的：

reduce() 方法對(duì)累加器和數(shù)組中的每個(gè)元素（從左到右）應(yīng)用一個(gè)函數(shù)，將其簡(jiǎn)化為單個(gè)值。

看下函數(shù)簽名：

arr.reduce(callback[, initialValue])

callback

執(zhí)行數(shù)組中每個(gè)值的函數(shù)，包含四個(gè)參數(shù)：

accumulator(累加器)
累加器累加回調(diào)的返回值; 它是上一次調(diào)用回調(diào)時(shí)返回的累積值，或initialValue。

currentValue(當(dāng)前值)
數(shù)組中正在處理的元素。

currentIndex可選（當(dāng)前索引）
數(shù)組中正在處理的當(dāng)前元素的索引。如果提供了initialValue，則索引號(hào)為0，否則為索引為1。

array可選（數(shù)組）
調(diào)用reduce()的數(shù)組

initialValue可選（初始值）
用作第一個(gè)調(diào)用 callback的第一個(gè)參數(shù)的值。如果沒(méi)有提供初始值，則將使用數(shù)組中的第一個(gè)元素。在沒(méi)有初始值的空數(shù)組上調(diào)用 reduce 將報(bào)錯(cuò)。

下面看一個(gè)簡(jiǎn)單的例子:

數(shù)組求和

var sum = [0, 1, 2, 3].reduce(function (a, b) {
 return a + b;
}, 0);
// sum 值為 6

這個(gè)例子比較簡(jiǎn)單，下面再看個(gè)稍微復(fù)雜點(diǎn)的例子，計(jì)算數(shù)組中每個(gè)元素出現(xiàn)的次數(shù)：

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}

這個(gè)例子很巧妙的利用了數(shù)組的reduce方法，在很多算法面試題中也經(jīng)常用到。這里需要注意的是需要指定initialValue參數(shù)。

通過(guò)reduce函數(shù)還可以實(shí)現(xiàn)數(shù)組去重：

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函數(shù)

理解完了數(shù)組的reduce方法之后，就很容易理解compose函數(shù)了，因?yàn)閷?shí)際上compose就是借助于reduce來(lái)實(shí)現(xiàn)的?？聪?a target="_blank" rel="external nofollow" >官方源碼：

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的返回值還是一個(gè)函數(shù)，調(diào)用這個(gè)函數(shù)所傳遞的參數(shù)將會(huì)作為compose最后一個(gè)參數(shù)的參數(shù)，從而像'洋蔥圈'似的，由內(nèi)向外，逐步調(diào)用。

看下面的例子：

import { compose } 'redux'；

// function f
const f = (arg) => `函數(shù)f(${arg})` 

// function g
const g = (arg) => `函數(shù)g(${arg})`

// function h 最后一個(gè)函數(shù)可以接受多個(gè)參數(shù)
const h = (...arg) => `函數(shù)h(${arg.join('_')})`

console.log(compose(f,g,h)('a', 'b', 'c')) //函數(shù)f(函數(shù)g(函數(shù)h(a_b_c)))

所以最后返回的就是這樣的一個(gè)函數(shù) compose(fn1, fn2, fn3) (...args) = > fn1(fn2(fn3(...args))) 。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: