Question

我一直在尝试通过重新加载来保留我的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))
}

Answer 1

要通过页面重新加载来保留redux存储，我们肯定需要使用浏览器存储。我建议使用https://github.com/rt2zz/redux-persist。

要在dispatch中使用getInitialProps，请尝试使用此代码段，而不要使用useDispatch()钩子。

CarPage.getInitialProps = async ({ store, query }) => {
   store.dispatch(getCar(query.id));
   return { initialState: store.getState() };
}

如何在getInitialProps中使用Redux钩子

1 个答案: