compose

compose(...functions)

從右到左來(lái)組合多個(gè)函數(shù)。

這是函數(shù)式編程中的方法，為了方便，被放到了 Redux 里。當(dāng)需要把多個(gè) store 增強(qiáng)器 依次執(zhí)行的時(shí)候，需要用到它。

參數(shù)

1. (arguments): 需要合成的多個(gè)函數(shù)。每個(gè)函數(shù)都接收一個(gè)函數(shù)作為參數(shù)，然后返回一個(gè)函數(shù)。

返回值

(Function): 從右到左把接收到的函數(shù)合成后的最終函數(shù)。

示例

下面示例演示了如何使用 compose 增強(qiáng) store，這個(gè) store 與 applyMiddleware 和 redux-devtools 一起使用。

import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import * as reducers from '../reducers/index';

let reducer = combineReducers(reducers);
let middleware = [thunk];

let finalCreateStore;

// 生產(chǎn)環(huán)境中，我們希望只使用 middleware。
// 而在開(kāi)發(fā)環(huán)境中，我們還希望使用一些 redux-devtools 提供的一些 store 增強(qiáng)器。
// UglifyJS 會(huì)在構(gòu)建過(guò)程中把一些不會(huì)執(zhí)行的死代碼去除掉。

if (process.env.NODE_ENV === 'production') {
  finalCreateStore = applyMiddleware(...middleware)(createStore);
} else {
  finalCreateStore = compose(
    applyMiddleware(...middleware),
    require('redux-devtools').devTools(),
    require('redux-devtools').persistState(
      window.location.href.match(/[?&]debug_session=([^&]+)\b/)
    ),
    createStore
  );

  // 不使用 compose 來(lái)寫(xiě)是這樣子：
  //
  // finalCreateStore =
  //   applyMiddleware(middleware)(
  //     devTools()(
  //       persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))(
  //         createStore
  //       )
  //     )
  //   );
}

let store = finalCreateStore(reducer);

小貼士

• compse 做的只是讓你不使用深度右括號(hào)的情況下來(lái)寫(xiě)深度嵌套的函數(shù)。不要覺(jué)得它很復(fù)雜。