我一直在做一个使用NextJS和Redux的项目。我能够使用一些NextJS examples来获得thunk的redux设置,但是我遇到了跨页面持久化redux状态的问题。
所以我知道你可以在Redux中使用NextJS,但是每当我使用href
时,它都会清除我的redux存储。
如何让Redux在不同的页面上持久化?
我一直在做一个使用NextJS和Redux的项目。我能够使用一些NextJS examples来获得thunk的redux设置,但是我遇到了跨页面持久化redux状态的问题。
所以我知道你可以在Redux中使用NextJS,但是每当我使用href
时,它都会清除我的redux存储。
如何让Redux在不同的页面上持久化?
2条答案
按热度按时间u0sqgete1#
NextJS的一个优点是有一个内置的React Router钩子,名为
useRouter
,但我没有意识到的是,如果你要使用Redux,你必须使用useRouter
,因为否则它会触发另一个服务器端渲染,并将状态重置回你设置的initialState。另一个美中不足的地方是,当你使用NextJS时,如果你想在不引入另一个react的情况下存储用户信息,那么很难访问localStorage。要做到这一点,你需要在页面加载时运行一个
localStorage
调用(所以可以使用useEffect
或componentDidMount
)我最终会做一个写了这一点后,我完成了我的初始项目。希望这对某人有帮助。
tp5buhyn2#
首先,你使用了
href
,这不是Next.js中路由的首选方式因此,每当你点击链接
(using href)
时,它会重新加载页面,而Next.js是SPA(单页应用程序),它会自行清除redux存储。Next.js是一个
(not a library like react)
框架,提供了一个内置的路由功能,有一个名为useRouter的钩子,这是推荐的路由方式。