React router v6 useNavigate在redux调度后不工作

mitkmikd  于 2023-08-05  发布在  React
关注(0)|答案(2)|浏览(155)

在我的React
应用程序,我试图导航到一个新的页面后,我派遣一个redux行动。
useNavigate钩子定义:
const navigate = useNavigate();

const handleEmailsent = async() => {
 await dispatch(sendEmail(email)); //if removed, navigate works. 
navigate("/login"); //does not navigate with the previous line.

};

个字符
如何在分派操作后使导航工作?

pod7payv

pod7payv1#

await dispatch()没有任何意义,因为dispatch函数是异步的。但是在内部,redux异步在动作被调度后立即将值更新为更新后的值。你可以在redux的官方文档中阅读到它的全部工作原理。
回到代码中,由于您希望在redux存储更新了值之后才**导航,因此需要使用useEffect钩子。
例如:

const { value } = useSelector((store) => store.reducer);

useEffect(() => {
  if (value) {
     navigate("/any-route");
  }
}, [value]);

const someFunction = () => {
   dispatch(yourAction("new value"));
};

字符串
不同的是

  • 它会让你的行动
  • redux异步地将存储更新为您指定的值
  • useEffect钩子侦听存储更改(您使用useSelector获取的值)
  • 只要该值更改,就会执行useEffect回调函数
  • 它检查该值是否存在
  • 如果是,则导航到指定的路线。

这里要注意的关键是,dispatch函数本身不是一个异步函数,但它在内部使redux异步地将其存储更新为最新值。因此,一个简单的await关键字不会让程序执行等待,直到存储中的值实际更新。
因此,分派实际上正在发生,但您的代码并没有等待redux在商店中反映它。当它甚至告诉redux更新它的时候,它会导航到一个新的路由,因此redux甚至没有机会在商店中更新它。

xuo3flqw

xuo3flqw2#

可以有几种方法来解决这个问题。我通常是通过承诺来做到的。下面是简单的解决方案:
sendEmail函数应该返回promise,这样代码就可以正常工作了。

// You need to return promise by sendEmail function 

const sendEmail = () => dispatch => {
    return new Promise(async (resolve, reject) => {

        // Call your API here

        if(API_SUCCESS){
            resolve();
        }else{
            reject();
        }
        
    })
}

字符串
现在,下面的代码将按照您的预期工作:

const handleEmailsent = async() => {
 await dispatch(sendEmail(email)); //if removed, navigate works. 
navigate("/login"); //does not navigate with the previous line.

};

相关问题