從 Google API 內部動作創建器獲取（React + Redux）

Question

我正在嘗試實施Google Quickstart Sheets API 。 該示例是一個普通的 HTML 文件。

我正在使用反應，我已經從我將分派動作的地方調用fetchData （我正在使用 Thunk，所以我將分派 LOADING、SUCCESS 和 FAILURE 動作）。

問題是，在示例中，它包含一個 JS 文件，加載時帶有回調，然后它調用本地 function。 我如何在動作創建者中實現這一點。 整個 JS 文件如下所示：

import { FETCH_DATA } from './actions-types';

const fetchData = async () => dispatch => {
  dispatch({ type: `${FETCH_DATA}_LOADING` });

  //fetch from google api
}

Answer 1

您需要返回將進行調度的 function。 它會是這樣的：

export default function fetchData() {
  return async dispatch => {
    dispatch({ type: `${FETCH_DATA}_LOADING` });
    try {
      const dataYouNeed = await fetchGoogleAPI();
      // do something with dataYouNeed
      const payload = { the payload you need to save in state }
      dispatch({ type: `${FETCH_DATA}_SUCCESS`, payload });
    } catch (error) {
      console.error(error);
      dispatch({ type: `${FETCH_DATA}_FAILURE`, payload });
    }
}

選擇：

由於您使用的是 Thunk，我向您推薦這個 package: redux-promise-middleware ，它將為您調度FETCH_DATA_PENDING 、 FETCH_DATA_FULFILLED和FETCH_DATA_FAIL ，讓您的生活更輕松。

export default function fetchData() {
  return async dispatch => {
    const payload = () async => {
      const dataYouNeed = await fetchGoogleAPI();
      // do something with dataYouNeed
      return dataYouNeed
    }
    dispatch({ type: FETCH_DATA, payload });
}

上面代碼的主要變化，是因為當您調度 promise 有效負載時，中間件將為您處理 PENDING、FULFILLED 和 FAIL 狀態。 然后你可以在你的 reducer 中使用FETCH_DATA_PENDING 、 FETCH_DATA_FULFILLED和FETCH_DATA_FAIL ，因為 redux-promise-middleware 會為你提供它們。