为什么我需要 redux async thunk

Question

我是整个 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 如何帮助我？

Answer 1

根据设计，redux 操作应该是同步的。添加像 redux-thunk 这样的 thunk 允许您编写异步的动作创建者，因此 return promises。

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

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

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

因此，无需调用 api、获取数据，然后分派操作，您可以让操作在其中执行获取操作

Answer 2

在您的示例中，loadData 仅等待一个 api 请求，然后分派一个简单的 redux 操作 (setMyData)。如果您正是这样需要它，那么您是对的，为什么还需要 thunk？

但想象一下：

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

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

Why do I need redux async thunks