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

Question

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

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

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

Answer 1

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

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

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

3. 因此，您的应用将在每次请求时重新创建商店，但将request、url，甚至可能是results（请求的）传递到store 的初始状态，所以每个页面和组件都可以在渲染之前使用store。
4. 还可以查看 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

Answer 2

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

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

查看redux example。