Javascript 在Next.js中创建页面状态的快照

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

我想在路由之间切换，但保留页面上的所有状态，这样我就可以返回页面而不失去它的状态。我知道我需要在顶层使用initalProps。但这只适用于简单的情况。让我们举一个例子，一个页面上有数百个不同层次的状态。是否可以创建所有页面状态的快照

---

我从反应上看。另外，我认为Redux会对我有所帮助，但我根本不在应用程序中使用它，它是一个额外的依赖项。也许这可以通过使用解决。

据我所知，这将是一个架构问题。对于全局状态管理，您需要使用例如：Redux、graphql、

ContextAPI

，或者在

pages/_app.js

中为应用程序提供全局状态。这将包装您的页面，并提供跨页面状态。（您可以修改并重用该状态）

---

选项：如果确实需要，请实现

Redux

。（对于状态中的大量数据）。因为它更容易实现，所以请将其删除。
其他情况：使用内置

ContextAPI

，或

pages/\u app.js

状态处理程序，直到实现为止“s适合您的应用程序。

如果您有需要在不同页面之间共享的全局状态，并且该状态是简单的，您可以使用

上下文API

，

组件需要由
\u app.js
中自定义应用程序组件中的
上下文提供程序
包装

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

//上下文和提供程序组件
export const MyContext=React.createContext（）；
export const MyCtxProvider=（{children}）=>{
//状态逻辑
返回(
{儿童}
)
}

在
\u app.js中

从“下一个/应用程序”导入应用程序
将{MyCtxProvider}从“/路径导入MyCtxProvider”
类MyApp扩展了应用程序{
render（）{
const{Component，pageProps}=this.props
返回(
)
}
}
导出默认MyApp

下面是一个来自nextjs repo的示例，它使用上下文API在页面之间共享状态

但是，如果您的全局状态有点复杂，即您希望将服务器状态（从远程API获取的数据）和UI状态都保持在全局状态，那么在这种情况下，您可能需要使用类似于
redux
的状态管理系统。在nextjs repo中有很多内容展示了如何实现它。您可以从这里开始。
上下文api可以对状态进行快照吗？或者我需要保存其中的所有状态？只要页面
unmuount
。比如：
useffect（（）=>{console.log（“挂载页面”）；return（）=>{console.log（“卸载页面”\u在这里调用\u快照\u API”）}，[]）
但是如果应用程序使用
上下文API
直接在
上下文中修改数据肯定会更好，并在用户导航回页面时重用它，而与
快照无关