Question

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

由于此时服务器和客户端不同步，我收到此错误：

React尝试在容器中重用标记，但校验和无效。这通常意味着您正在使用服务器呈现，并且在服务器上生成的标记不是客户端所期望的。 React注入了新的标记以补偿哪些有效但你已经失去了服务器渲染的许多好处。相反，弄清楚为什么生成的标记在客户端或服务器上是不同的：

这是有道理的，因为服务器正在尝试呈现未经身份验证的状态。

设置此初始状态的公认标准或惯例是什么，该状态仅依赖于客户可以访问的内容？

Answer 1

我发现OP是对的，cookie存储是最好的选择。如果您正在使用react，redux和express for通用应用程序，那么对我有用的选项是https://github.com/eXon/react-cookie。

本质：

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

  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
  }

在您的反应应用程序中，在组件内部，您可以直接保存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(your object)。 cookie.load会自动为你解析它。

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

Answer 2

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

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

React / Redux服务器端呈现初始状态

2 个答案: