1

我是整个 react redux 世界的新手，但我想我现在知道 redux 是如何工作的。但是现在我面临着一个新的挑战，我需要实现异步数据获取。我选择使用 axios 作为我的 http 客户端。

我现在遇到的问题是我已经阅读了有关 redux async thunk 的信息，但我不知道何时以及为什么要使用它。我知道它向 redux 添加了可以处理 async/await 和 promises 的中间件。

我想简单地使用 axios 来获取数据，然后使用 dispatch 来存储它们。像这样

const loadData = async () => {
  const res = await axios.get('https://www.api.com/mydata');
  const data = res.data;
  dispatch(setMyData(data));
}

这将如何createAsyncThunk帮助我？

4

2 回答 2

2

在您的示例中，loadData只等待一个 api 请求，然后调度一个简单的 redux 操作（setMyData）。如果你完全需要它，你是对的，你为什么需要thunk？

但是想象一下：

  • 您的应用程序中的几个组件需要知道此 api 请求正在进行中（例如显示加载指示器或隐藏按钮）
  • 不止一个地方需要这个功能
  • 您需要处理对 api 请求的特定错误响应
  • 在等待 api 请求完成时，全局 redux 状态中的某些内容可能已更改。您需要在调度之前对此做出反应setMyData()。

所有这些都是复杂的 react/redux 应用程序的常见要求，你现在可能没有它们，但可能会在某个时候遇到它们。

thunk 中间件提供了处理它们的抽象。您可以通过编写自己的辅助函数等来实现相同的目的，但最终您会重新发明轮子，并且许多 react/redux 开发人员最终会编写完全相同的样板代码。

于 2021-11-01T15:32:19.713 回答
0

按照设计，redux 操作是同步的。添加 thunk 之类的redux-thunk允许您编写异步的操作创建器，因此返回承诺。

例如，我可以编写一个如下所示的动作创建器：

const getUsers = () => async dispatch => {
   let users = await getUsers();

    dispatch({
       type: GET_USERS,
       payload: users
    });
}

因此，无需调用 api，获取数据，然后分派一个动作，您可以有一个动作在其中进行获取

于 2021-10-29T15:51:54.580 回答