Question

我想在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，减速机是否能够采取行动？如果是这样，如果不调用调度，这如何工作？

Answer 1

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

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

对于第二个示例，我们在这里使用redux-thunk来执行异步作业和多个操作。因此，我们可以在那里使用异步作业，并在我们的动作创建者中执行多个有条件的事情。就像派遣不同的动作创作者一样。 fetchPhraseRequest（）和fetchPhraseResponse（）是这里的两个不同的动作，并针对不同的情况进行调度。也许第一个开始一个过程并设置状态，如＆＃34; fetching＆＃34;，然后第二个获得响应并正确设置状态。我们甚至可以在错误块中使用其他单独的错误操作，如fetchPhraseError（）。

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

对Redux createAction和发送

1 个答案: