在 Next.js 中制作页面 state 的快照

Question

我在开发 Next.js 应用程序时遇到了一些问题。 这是一个架构问题。

我想在路线之间切换，但保留页面上的所有状态，以便我可以返回页面而不会丢失它的 state。 我知道我需要在顶层使用 initalProps 。 但这仅适用于简单的情况。 让我们举一个例子，一个页面上有数百个具有不同层次结构的状态。 是否可以对所有页面状态进行快照？

我看向 React 的备忘录。 另外，我认为 Redux 会对我有所帮助，但我根本不在应用程序中使用它，它是一种依赖。 也许这可以使用Context Api来解决。

Answer 1

如果您有全局 state 需要在不同页面之间共享，并且 state 很简单，您可以使用Context API ContextProvider该Component需要在自定义_app.js中包装。

对于您的用例，伪代码可能看起来像这样，

// context and the provider component

export const MyContext = React.createContext();


export const MyCtxProvider = ({ children }) => {
   
  // state logic  
  
  return (
    <MyContext.Provider value={/* state value */}>
       {children}
    </MyContext.Provider>
  )
}

在_app.js中

import App from 'next/app'
import { MyCtxProvider } from './path-to-myctxprovider'

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return (
      <MyCtxProvider>
        <Component {...pageProps} />
      </MyCtxProvider>
    )
  }
}

export default MyApp

这是 nextjs 存储库中的一个示例，它使用上下文 API 在页面之间共享 state。

But if your global state is somewhat complex ie you want to keep both server state(fetched data from a remote API) and UI state in the global state, you might wanna use a state management system like redux in this case. nextjs repo 中有很多例子展示了如何实现它。 你可以从那里开始。

Answer 2

据我了解，这将是一个架构问题。 For global state management you need to use eg: Redux, graphql, ContextAPI , or give a global state to your app in pages/_app.js . 这将包装您的页面，并提供交叉页面 state。（您可以修改并重用它）
Opnion : 实现Redux ，如果它真的需要。（对于大量的数据状态）。因为它更容易实现，然后删除它。
其他情况：使用内置ContextAPI或pages/_app.js state 处理程序，直到它适合您的应用程序。