redux-promise

redux-promise 是一個符合 Flux Standard Action(FSA)規範且專門給 Redux 所用的 middleware。接收 promise 作為輸入,並回傳 resolved 結果。

說明

redux-promise 的運作流程如下。

redux-promise middleware flowchart

redux-promise 的預設輸出(export)的是一個 function,這個 function 接收一個 promise 作為輸入,並將 promise 已解決(resolved)的結果回傳;但若 promise 的狀態是已拒絕(rejected)則不回傳任何值。

也就是說,若 redux-promise 在 action.payload 收到 promise,以下動作則一執行

由於 redux-promise 回傳一個 promise 給呼叫者,因此呼叫者可等待直到這個工作結束才繼續下一步的任務。 如果發現 promise 沒有被返回,請確保所有在 redux-promise 前面的 middleware 有執行 next() 將執行權還給呼叫者。

安裝與使用

安裝。

npm install --save redux-promise

載入並與 Redux 合併使用。

import { createStore, applyMiddleware } from 'redux';
import promise from 'redux-promise';

const createStoreWithMiddleware = applyMiddleware(promise)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>// 省略...</Provider>,
  document.querySelector('.app'),
);

在 actions 就可直接將 promise 當成 payload 代入,接著就會在 action.payload 得到結果。

export function fetchList() {
  const request = axios.get('https://sample.com/api/list');

  return {
    type: FETCH_STORE_LIST,
    payload: request,
  };
}

官方說明-Using in combination with redux-actions

優點

使用 redux-promise 的好處是

References


redux promise