如何使组件卸载中调度的 redux 动作在上一页 useEffect 之前到达商店？

Question

我有 2 个反应组件：

const PageA = () => {
  useEffect(()=>{
    doXXXX()
  }, [])

  return ....
}

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

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

Answer 1

因为分派动作是异步的。并且在组件卸载时触发，你不能等待它在调用端完成。

但是你可以在 Redux Store 中监听状态变化。使用状态作为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 ...
}

如何使组件卸载中调度的 redux 动作在上一页 useEffect 之前到达商店？

How to make redux action dispatched in component unmount reach the store before previous page useEffect?

reactjs

redux

react-redux