如何在getInitialProps中使用redux钩子
如何在getInitialProps中使用redux钩子
提问于 2020-09-28 07:28:24
我一直在尝试通过重新加载来持久化我的redux存储。一开始我使用useEffect来分派我的操作，但是当我尝试重新加载页面路由器时，它变得没有定义，我得到了一个500错误。在那之后，我尝试使用getInitialProps和ctx.query.id，但我遇到了另一个错误，说钩子只能在函数组件的主体内调用。
如何让钩子在getInitialProps中工作，通过重新加载持久存储数据的最好方法是什么？
export default function CarPage() {
const dispatch = useDispatch()
const router = useRouter()
const car = useSelector((state) => state.cars.car)
/*
useEffect(() => {
if(!car && router) {
dispatch(getCar(router.query.id))
}
}, [])
*/
return (
<Container>
<h2>{car.model}</h2>
</Container>
)
}
CarPage.getInitialProps = async (ctx) => {
const dispatch = useDispatch()
dispatch(getCar(ctx.query.id))
}回答 1
Stack Overflow用户
回答已采纳
发布于 2020-09-28 07:39:46
要在页面重载过程中持久化redux存储，我们肯定需要使用浏览器存储。我建议使用https://github.com/rt2zz/redux-persist。
要在getInitialProps中使用dispatch，请尝试使用此代码片段，而不是使用useDispatch()挂钩。
CarPage.getInitialProps = async ({ store, query }) => {
store.dispatch(getCar(query.id));
return { initialState: store.getState() };
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64094224
复制相关文章
相似问题
腾讯云开发者
