在 next.js 应用程序上管理用户的全局状态

Posted 2023-02-23

【中文标题】在 next.js 应用程序上管理用户的全局状态

【英文标题】：Managing user's global state on next.js application

【发布时间】：2019-11-22 14:08:58

【问题描述】：

我来自 SPA's 和 REST/GraphQl API's。现在我正在用 Next.js 库为 s-s-r(Server Side Rendered) React App 构建个人项目。

由于我在所有单页应用程序中都使用了 Redux，我现在想知道当每个路由用户访问、加载新链接并刷新页面时，我应该如何管理用户状态.

我找到了一些关于会话和 cookie 的信息，但我都不熟悉这些信息。我查看了一些关于使用 Redux 和 Next.js 的在线文章，但似乎很复杂。

【参考方案1】：

如果您习惯以基于路由的方式进行操作，这可能有助于理解：

整个应用 (_app.js) 被封装在 redux 的 Provider 中，因此应用中的所有 pages 和组件都可以访问 store。 根据文档：

otherwise different user data can be mixed up. On the client side the
same store is used, even between page changes.```

因此，您的应用将在每次请求时重新创建商店，但将request、url，甚至可能是results（请求的）传递到store 的初始状态，所以每个页面和组件都可以在渲染之前使用store。 还可以查看 getInitialProps，它会在页面上的组件呈现之前执行一些副作用，并为页面的 props 提供数据。

一些资源：

https://github.com/zeit/next.js/tree/canary/examples/with-redux https://medium.com/@bhavikbamania/a-beginner-guide-for-redux-with-next-js-4d018e1342b2

【参考方案2】：

让我们简化 Next 的工作方式，浏览器向服务器发送请求，Next 在服务器端呈现，返回一个 html，然后，Next 重新水合页面，从现在开始它的行为就像 SPA。

Next 有一个example folder，基本上适用于所有技术，包括redux。

查看redux example。