在 Next.js 中制作页面状态的快照答案

【问题标题】：Make snapshot of page state in Next.js在 Next.js 中制作页面状态的快照
【发布时间】：2020-10-21 19:40:33
【问题描述】：

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

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

我从 React 看向 memo。另外，我认为 Redux 会帮助我，但我根本不会在应用程序中使用它，而且它是另一个依赖项。也许这可以使用Context Api 来解决。

【问题讨论】：

标签： javascript reactjs typescript state next.js

【解决方案1】：

如果你有需要在不同页面之间共享的全局状态，并且状态是简单，你可以使用Context API，Component需要被ContextProvider包裹在_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 存储库的 example，它使用上下文 API 在页面之间共享状态。

但是，如果您的全局状态有点复杂，即您希望将服务器状态（从远程 API 获取的数据）和 UI 状态都保持在全局状态，您可能想要使用状态管理系统在这种情况下就像redux。 nextjs repo 中有很多examples 展示了如何实现它。你可以从那里开始。

【讨论】：

【解决方案2】：

据我了解，这将是一个架构问题。对于全局状态管理，您需要使用例如：Redux、graphql、ContextAPI，或者在 pages/_app.js 中为您的应用程序提供全局状态。这将包装您的页面，并提供跨页面状态。（您可以修改并重用它）
选项：如果确实需要，请实施Redux。（对于状态中的大量数据）。因为它更容易实施，所以将其删除。
其他情况：使用内置 ContextAPI 或 pages/_app.js 状态处理程序，直到它适合您的应用程序。

【讨论】：

context api可以做状态快照吗？还是我需要把所有的状态都保存在里面？
你可以做一个快照，只要页面unmuount页面。喜欢：useEffect(() => { console.log("MOUNTING THE PAGE"); return ()=> { console.log("UNMOUNT_THE_PAGE_CALL_THE_SNAPSHOT_API_HERE"); } }, [])
但如果你的应用程序使用context api直接修改context中的数据，并在用户导航回页面时重用它，与@无关987654330@