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

Question

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

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

React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:

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

设置这种完全依赖于客户端有权访问的内容的初始状态的公认标准或做法是什么？

Answer 1

我找到了可行的解决方案。

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

Answer 2

我发现OP是对的，cookie存储是最好的选择。如果您正在为通用应用程序使用 React、Redux 和 Express，那么对我有用的选项是 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
  }

在您的 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(your object)。 cookie.load 会自动为你解析。

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

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

React/Redux server side rendering initial state

flux

reactjs

redux