是因为在Next.js中,每个页面都是一个独立的模块,它们在服务器端和客户端上都有自己的状态。当页面刷新或导航到新页面时,Redux store会被重新初始化,因此在页面初始化后,Redux store是空的。
为了解决这个问题,可以通过在Next.js中使用Redux Persist来持久化Redux store。Redux Persist是一个用于持久化和恢复Redux store的库,它可以将Redux store的状态保存到本地存储中,并在页面刷新或导航时自动恢复。
下面是一些解决方案和相关资源:
- 使用Redux Persist:可以通过在Redux中使用Redux Persist来持久化store。它可以将store的状态保存到本地存储中,例如localStorage或sessionStorage,并在页面刷新或导航时自动恢复。
- 使用Next.js的getInitialProps方法:在Next.js中,可以使用getInitialProps方法来在服务器端获取数据并传递给页面组件。你可以在getInitialProps方法中初始化Redux store,并将初始状态作为props传递给页面组件。这样,在页面初始化后,Redux store就会包含初始状态。
- 使用Next.js的getServerSideProps方法:类似于getInitialProps方法,getServerSideProps方法也可以在服务器端获取数据并传递给页面组件。你可以在getServerSideProps方法中初始化Redux store,并将初始状态作为props传递给页面组件。这样,在页面初始化后,Redux store就会包含初始状态。
- 使用Next.js的useEffect钩子:在客户端渲染的情况下,可以使用React的useEffect钩子来初始化Redux store。在useEffect钩子中,你可以检查Redux store是否为空,并在为空时进行初始化。这样,在页面初始化后,Redux store就会包含初始状态。
总结起来,为了解决带Redux - store的NextJS在初始化后为空的问题,可以使用Redux Persist、Next.js的getInitialProps方法、getServerSideProps方法或React的useEffect钩子来初始化Redux store并保持状态的持久化。这样,页面初始化后,Redux store就会包含初始状态。