时间戳

首页 > 解决方案 > 从动作创建器内部的 Google API 获取（React + Redux）

javascript - 从动作创建器内部的 Google API 获取（React + Redux）

问题描述

我正在尝试实现Google Quickstart Sheets API。该示例是一个纯 HTML 文件。

我正在使用反应，我已经发出了一个动作调用fetchData，我将从那里分派动作（我正在使用 Thunk，所以我将分派 LOADING、SUCCESS 和 FAILURE 动作）。

问题是，在示例中，它包含一个 JS 文件，加载时带有回调，然后它调用本地函数。我如何在动作创建者中实现这一点。整个 JS 文件如下所示：

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

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

  //fetch from google api
}

标签： javascriptreactjsgoogle-sheets

解决方案

您需要返回一个进行调度的函数。它会是这样的：

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，我向您推荐这个包：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 会为你提供它们。

推荐阅读