为什么我需要 redux 异步 thunk

Question

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

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

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

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

createAsyncThunk对此有何帮助？

Answer 1

在您的示例中，loadData仅等待一个 api 请求，然后分派一个简单的 redux 操作 ( setMyData)。如果你确实需要这样的东西，你是对的，为什么你需要 thunks 呢？

但想象一下以下情况：

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

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

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