在 Redux 中调度操作时出现异步/等待问题

Question

我正在使用 React 和 Redux 开发一个项目，在连续分派多个操作时我遇到了异步/等待问题。特别是，我有一个函数

joinCommumityHandler

可以调度多个操作以加入社区并检索与用户和社区相关的数据。当我运行代码时，我在 VS Code 中看到一条警告，提示“await 对这种类型的表达式没有影响”。我想按顺序发送动作。使用 .then() 有效，但在我使用 async/await 时显示警告。

任何人都可以帮助我了解我做错了什么以及如何解决这个问题吗？预先感谢您的帮助。 这是函数

  const handleJoinedCommunities = async () => {
    await dispatch(joinCommunityAction(communityName));
    await dispatch(getJoinedCommunitiesAction());
    await dispatch(getNotJoinedCommunitiesAction());
    if (userData) {
      await dispatch(getPostsAction(userData.id));
      await dispatch(getUserAction(userData.id));
    }
  };

  handleJoinedCommunities();
};

Answer 1

默认情况下，调度一个简单的动作是 100% 同步的。

然而，派遣返回承诺的 thunk 是很常见的，而你 can

await dispatch(someAsyncThunk())

:

• https://redux.js.org/tutorials/fundamentals/part-7-standard-patterns#thunks-and-promises

这里有两个可能的问题：

• 你可能已经把

  await

  放在一个正常动作的调度前面，这是不需要的
• 您可能在调度异步 thunk 之前有

  await

  ，但是如果您使用的是 TypeScript，您可能没有声明 thunk 返回一个承诺，在这种情况下 TS 认为 它仍然是同步的。 （如果你使用纯 JS，这甚至仍然适用，因为 VS Code 使用 TS 编译器来理解纯 JS 代码在做什么。）

因此，请仔细检查您要发送的内容，如果您发送的是异步 thunk，请使用

await

。