对 Redux createAction 和 dispatch 感到困惑答案

【问题标题】：Confused about Redux createAction and dispatch对 Redux createAction 和 dispatch 感到困惑
【发布时间】：2018-06-09 04:08:54
【问题描述】：

我想在 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 是否能够执行此操作？如果是这样，在不调用 dispatch 的情况下如何工作？

【问题讨论】：

你在哪里看到的第一个例子？

标签： reactjs redux react-redux redux-actions

【解决方案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。你会理解整个异步过程，至少它对我有用。

【讨论】：