Redux：按顺序分派操作

Question

我正在 Redux 上创建一个 Reddit 客户端，并且在应用程序中触发了 2 个商店调度：

// App()
const dispatch = useDispatch();

useEffect(() => {
    const stateMatch = window.location.href.match(/state=([^&]*)/);
    const codeMatch = window.location.href.match(/code=([^&]*)/);

    if ((stateMatch && codeMatch) || localStorage.getItem("access_token")) {
        dispatch(fetchUser());
        dispatch(fetchSubs());
    }
});

...

但是，我想在开始fetchUser()之前运行并完成fetchSubs()，因为前者目前似乎会破坏后者在运行时的 API 调用。我该如何解决这个问题？

Answer 1

既然您正在使用，createAsyncThunk您可以执行以下操作：

  dispatch(fetchUser())
  .unwrap()
  .then((user) => {
    // do anything you want with user, or don't, also dispatch actions
    dispatch(fetchSubs());
  })
  .catch((e) => {
    // error in case of rejection inside createAsyncThunk second argument
    console.log(e);
  });

解释

可以说const thunk = fetchUser() 基本上dispatch(fetchUser())与 相同dispatch(thunk)。

Redux 的dispatch函数返回其参数（操作）返回的任何内容。

所以在这种情况下，dispatch(thunk)返回任何thunk返回值。

thunk，根据createAsyncThunk工作原理，返回一个承诺，该承诺要么解决已完成的操作，要么解决被拒绝的操作。（您在额外的减速器中收到的那些操作）。

您可以通过以下方式访问这些操作：

dispatch(thunk).then(fullfilledAction=>...).catch(rejectedAction=>...`

RTK 库还提供了一种称为 的方法unwrap。它允许您使用 的第二个参数的返回值，而不是我上面解释的那些操作对象createAsyncThunk。

export const fetchUser = createAsyncThunk("user/fetchUser", async () => {
const user = await Reddit.getUser().then(val => {
    return val;
});

return user; // unwrap lets you use this instead of action objects.
})