深入理解redux之compose的具體應用

 更新時間:2020-01-12 19:00:21   作者:佚名   我要評論(0)

應用


最近給自己的react項目添加redux的時候,用到了redux中的compose函數,使用compose來增強store,下面是我在項目中的一個應用:


import {createStore,apply

應用

最近給自己的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', '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來實現的?聪鹿俜皆创a:

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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

您可能感興趣的文章:

  • react-redux中connect的裝飾器用法@connect詳解
  • react router4+redux實現路由權限控制的方法
  • 詳解react、redux、react-redux之間的關系
  • 淺談redux以及react-redux簡單實現
  • ReactNative中使用Redux架構總結
  • 簡單介紹react redux的中間件的使用
  • 詳解如何優雅地在React項目中使用Redux
  • 微信小程序Redux綁定實例詳解

相關文章

  • 深入理解redux之compose的具體應用

    深入理解redux之compose的具體應用

    應用 最近給自己的react項目添加redux的時候,用到了redux中的compose函數,使用compose來增強store,下面是我在項目中的一個應用: import {createStore,apply
    2020-01-12
  • Java使用DateTimeFormatter實現格式化時間

    Java使用DateTimeFormatter實現格式化時間

    用掃描器獲取輸入的時間(年月日時分),這個時間的格式是常用的格式,然后格式化這個時間,把格式化的時間輸出到控制臺,可以在控制臺重復輸入時間.格式化的時間參考企業
    2020-01-12
  • Ranorex通過Python將報告發送到郵箱的方法

    Ranorex通過Python將報告發送到郵箱的方法

    Ranorex測試報告如何發送到郵箱在網上看了下,其實可以通過在Ranorex上或者VS調用編寫發送郵箱代碼就可以執行發送了,RX主要涉及到的開發語言是C++或者.NET。但是我
    2020-01-12
  • 通過實例解析JMM和Volatile底層原理

    通過實例解析JMM和Volatile底層原理

    這篇文章主要介紹了通過實例解析JMM和Volatile底層原理,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下 JMM和
    2020-01-11
  • 淺談pytorch卷積核大小的設置對全連接神經元的影響

    淺談pytorch卷積核大小的設置對全連接神經元的影響

    3*3卷積核與2*5卷積核對神經元大小的設置 #這里kerner_size = 2*5 class CONV_NET(torch.nn.Module): #CONV_NET類繼承nn.Module類 def __init__(self): super(
    2020-01-11
  • python如何獲取apk的packagename和activity

    python如何獲取apk的packagename和activity

    這篇文章主要介紹了python如何獲取apk的packagename和activity,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-01-11
  • 在pytorch中對非葉節點的變量計算梯度實例

    在pytorch中對非葉節點的變量計算梯度實例

    在pytorch中一般只對葉節點進行梯度計算,也就是下圖中的d,e節點,而對非葉節點,也即是c,b節點則沒有顯式地去保留其中間計算過程中的梯度(因為一般來說只有葉節點
    2020-01-11
  • 詳解Linux環境變量配置全攻略

    詳解Linux環境變量配置全攻略

    在自定義安裝軟件的時候,經常需要配置環境變量,下面列舉出各種對環境變量的配置方法。 下面所有例子的環境說明如下: 系統:Ubuntu 14.0 用戶名:uusama 需
    2020-01-11
  • Java JVM程序指令碼實例解析

    Java JVM程序指令碼實例解析

    這篇文章主要介紹了Java JVM程序指令碼實例解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下 java程序轉化
    2020-01-11
  • Pytorch 保存模型生成圖片方式

    Pytorch 保存模型生成圖片方式

    三通道數組轉成彩色圖片 img=np.array(img1) img=img.reshape(3,img1.shape[2],img1.shape[3]) img=(img+0.5)*255##img做過歸一化處理,【-0.5,0.
    2020-01-11

最新評論

双色球基本走势图200