如何使组件卸载中调度的redux操作在上一页useEffect之前到达存储区

Question

我有两个反应成分：

const PageA = () => {
useEffect(()=>{
doXXXX()
}, [])
return ....
}
const PageB = () => {
useEffect(()=>{
return () => dispatch(SomeReduxAction())
}, [])
return ....
}

当用户从PageA转到PageB，然后在历史中从PageB返回到PageA。页面A中的useEffect块在SomeReduxAction到达redux存储之前运行，该存储在页面B卸载时调度。这会导致一个错误。有没有办法让SomeReduxAction在PageA运行useEffect之前到达redux存储？

Answer 1

由于调度操作是异步的。当组件卸载时，它会触发，您无法在调用端等待它完成。

但您可以在Redux商店中收听状态变化。使用状态作为useEffect的依赖项，这样当状态发生变化时，useEffect将再次执行。然后您可以像doXXXX()函数一样决定是否执行代码。

例如

const PageA = () => {
const someReduxActionStateSlice = useSelector(state => state.someReduxActionStateSlice);
useEffect(()=>{
if(someReduxActionStateSlice === condition) {
doXXXX()
}
}, [someReduxActionStateSlice])
return ....
}
const PageB = () => {
useEffect(()=>{
return () => dispatch(SomeReduxAction())
}, [])
return ...
}