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 函数 returns 无论其参数（动作）如何 returns.

所以在这种情况下，dispatch(thunk) returns 无论如何 thunk returns。

thunk，根据 createAsyncThunk 的工作方式，returns 承诺要么解析为完成的操作，要么解析为被拒绝的操作。（你在额外的减速器中收到的那些动作）。

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

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.
})

Answer 2

尝试使用纯 React 和 redux 钩子

...

const state = useStore(yourStore) //use your method to read state 
const dispatch = useDispatch();
const checkValue = () => {
   const stateMatch = window.location.href.match(/state=([^&]*)/);
    const codeMatch = window.location.href.match(/code=([^&]*)/);

    if ((stateMatch && codeMatch) || localStorage.getItem("access_token")) {
        return true;
    }
    return false;
}

useEffect(() => {
    if(checkValue())
        dispatch(fetchUser());
    }
}, []);

useEffect(() => {
    if(checkValue() && state.authState)
        dispatch(fetchSubs());
    }
}, [state.authState]);


...

Redux：按顺序调度动作

Redux: Dispatch actions in sequence

javascript

reactjs

redux