Reactjs React/Redux服务器端渲染初始状态

我有一个React/Redux应用程序，它跟踪本地存储中用户的身份验证状态。应用程序还设置为使用服务器端渲染。我在呈现初始应用程序状态时遇到问题。我的服务器创建一个新的存储并发出SET_INITIAL_STATE操作。客户端的这个初始操作读取localStorage，并将经过身份验证的信息传递给我的还原程序。但是，服务器不知道这种登录状态，因为我正在使用位于本地存储中的无状态JWT进行身份验证

由于服务器和客户端此时不同步，因此出现以下错误：

React试图在容器中重用标记，但校验和无效。这通常意味着您正在使用服务器呈现，并且在服务器上生成的标记不是客户机所期望的。React注入了新的标记以补偿其效果，但您已经失去了服务器呈现的许多好处。相反，请找出在客户端或服务器上生成的标记不同的原因：

这是有道理的，因为服务器正试图呈现未经验证的状态

---

设置此初始状态的公认标准或做法是什么？此初始状态完全依赖于客户端可以访问的内容。

我找到了一个有效的解决方案。

---

不幸的是，诀窍是将经过身份验证的状态存储在cookie中，以便在请求时自动将会话状态发送到服务器。

我发现OP是正确的，cookie存储是最佳选择。如果您正在使用react、redux和express作为通用应用程序，那么对我有效的选项是

基本上：

在服务器端代码中，您可以使用：

  import cookie from 'react-cookie';

  function handleRender(req, res) {
      cookie.setRawCookie(req.headers.cookie);

      // Create new Redux store instance
      const store = createStore(rootReducer, {
          username: cookie.load('username') || '',
          accessLevel: cookie.load('accessLevel') || userRoles.public,
      });

      //other react/redux/express related code
  }

在react应用程序中，在组件内部，您可以直接保存cookie：

  import cookie from 'react-cookie';

  //first parameter is anything you want, second is the data you want to save
  cookie.save( 'username', username );
  cookie.save('accessLevel', accessLevel);

此外，如果您想像我一样存储对象，可以传入

JSON.stringify（您的对象）

。cookie.load将自动为您分析它

---

在我的代码中，我从操作中调用了cookie.save，但您可以在组件或任何抽象中直接调用它。

如果实际上只有客户端可以访问它，那么您就不能（至少，我想不出一个好方法）。最好是在服务器上呈现一个非常简单的应用程序（或者该应用程序的某些其他版本对经过身份验证的用户不太合适，例如，您可能具有服务器呈现的“加载”状态或类似状态），以相同的方式初始化客户端应用程序，然后基于标记重新渲染-但这基本上是您已经在做的事情（除了警告：），您可以发布完成此操作所使用的代码/方法吗？