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

Question

我来自SPA和rest / graphql API的世界。现在，我正在使用next.js库为SSR（服务器端渲染）反应应用构建个人项目。

由于我在所有我的单页应用程序中都使用过redux，所以现在我想知道当每个路由用户访问，新链接已加载且页面已刷新时，我应该如何管理用户状态。

我找到了一些有关会话和cookie的信息，但是我都不熟悉。我看了一些有关将redux与next.js一起使用的在线文章，但到目前为止，这似乎有点复杂。

希望您可以在选择我应该采用的方法时对我有所帮助。

Answer 1

让我们简化Next的工作方式，浏览器向服务器发送请求，Next在服务器端进行渲染，返回html，然后Next将页面重新水化，从现在起它就像SPA。

Next基本上对包括redux在内的每种技术都有一个example folder。

检出redux example。

Answer 2

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

1. 整个应用程序（_app.js）都封装在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. 因此，您的应用会在每次请求时重新创建商店，但会将req用户，url甚至（请求的res ults）传递到初始状态store中的所有元素，因此每个页面和组件都可以在呈现之前利用store。
4. 还检出getInitialProps，它会在页面上的组件呈现之前执行一些副作用，并将数据提供给页面的道具。

一些资源：

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