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

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

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

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

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

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

我发现OP是对的,cookie存储是最好的选择.如果您正在使用react,redux和express for a universal app,那么对我有用的选项是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,但您可以直接在组件或任何抽象中调用它.