在我的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.
};
个字符
如何在分派操作后使导航工作?
2条答案
按热度按时间pod7payv1#
await dispatch()
没有任何意义,因为dispatch
函数是非异步的。但是在内部,redux异步在动作被调度后立即将值更新为更新后的值。你可以在redux的官方文档中阅读到它的全部工作原理。回到代码中,由于您希望在redux存储更新了值之后才**导航,因此需要使用
useEffect
钩子。例如:
字符串
不同的是
useEffect
钩子侦听存储更改(您使用useSelector
获取的值)useEffect
回调函数这里要注意的关键是,
dispatch
函数本身不是一个异步函数,但它在内部使redux异步地将其存储更新为最新值。因此,一个简单的await
关键字不会让程序执行等待,直到存储中的值实际更新。因此,分派实际上正在发生,但您的代码并没有等待redux在商店中反映它。当它甚至告诉redux更新它的时候,它会导航到一个新的路由,因此redux甚至没有机会在商店中更新它。
xuo3flqw2#
可以有几种方法来解决这个问题。我通常是通过承诺来做到的。下面是简单的解决方案:
sendEmail函数应该返回promise,这样代码就可以正常工作了。
字符串
现在,下面的代码将按照您的预期工作:
型