2

我想在 React + Redux 中构建一个函数，当用户单击按钮时，调用 API 并将数据加载到存储中，然后在页面上显示数据。

我想使用该redux-actions框架：https ://redux-actions.js.org/但我对我见过的不同示例感到有些困惑。

在某些示例中，我看到以下内容：

export const GET_USER_DATA = 'GET_USER_DATA';
export const getUserData = createAction(
  GET_USER_DATA,
  async () => {
      try {
          return await getUserInfo(config);
      } catch (error) {
          console.log("Error occurred");
      }
  },
);

然后我看到了其他使用dispatch这样的示例（取自：https ://codeburst.io/redux-actions-through-example-part-3-91dc41ebe4be ）：

const fetchPhraseRequest = createAction('PHRASE_FETCH_REQUEST');
const fetchPhraseResponse = createAction('PHRASE_FETCH_RESPONSE');
export const clearPhrase = createAction('PHRASE_CLEAR');
export const fetchPhrase = () => (dispatch) => {
  dispatch(fetchPhraseRequest());
  fromAPI.getPhrase()
    .then((value) => {
      dispatch(fetchPhraseResponse(value));
    })
    .catch((err) => {
      dispatch(fetchPhraseResponse(err));
    });
};

我是 React 和 Redux 的新手，我试图了解你为什么/什么时候会做其中之一。

我对第一个示例有一个问题： - 如果不调用dispatch，reducer 是否能够执行此操作？如果是这样，这如何在不调用调度的情况下工作？

4

1 回答 1

1

我对 redux-actions 库不太熟悉，但我认为在第一个示例中，您正在创建一个动作，但带有一个有效负载。这里的有效负载是从您的创建者中的异步函数返回的内容。这里的第二部分（函数）是payloadCreator。我是通过查看相关代码来这么说的：https ://github.com/redux-utilities/redux-actions/blob/master/src/createAction.js

因此，对于第一个示例，其余部分正常流动。createAction 创建一个带有有效负载的操作，在 handleActions 中使用它。因此，对于您的最后一个问题，如果不调用调度，reducer 就无法知道发生了什么。您不必担心在这里分派，因为无论如何您都是在您的应用程序中进行的。但是，我在图书馆的文档或其创建者的教程中没有看到这样的示例。

对于第二个示例，我们在这里使用 redux-thunk 来执行异步作业和多个操作。所以，我们可以在那里使用异步作业，并在我们的动作创建器中做多个有条件的事情。就像调度不同的动作创建者一样。fetchPhraseRequest() 和 fetchPhraseResponse() 在这里是两个不同的操作，并针对不同的情况进行调度。也许第一个启动一个进程并将状态设置为“获取”，然后第二个得到响应并正确设置状态。我们甚至可以在错误块中使用其他单独的错误操作，例如 fetchPhraseError()。

如果你的目标是更深入地消化 Redux，我建议使用带有 redux-thunk 的纯 Redux。您将了解整个异步过程，至少它对我有用。

于 2018-06-09T05:33:29.743 回答