reactjs redux

Estado inicial del servidor React/Redux que representa el estado inicial

Question

Tengo una aplicación React / Redux que realiza un seguimiento del estado autenticado de un usuario en el almacenamiento local. La aplicación también está configurada para usar la representación del lado del servidor. Me estoy encontrando con problemas al renderizar el estado inicial de la aplicación. Mi servidor crea una nueva tienda y emite la acción SET_INITIAL_STATE. Esta acción inicial en el lado del cliente lee localStorage y pasa la información autenticada a mis reductores. El servidor, sin embargo, no tiene conocimiento de este estado de sesión ya que estoy usando JWT sin estado ubicado en el almacenamiento local para la autenticación.

Como el servidor y el cliente no están sincronizados en este punto, recibo este error:

React intentó reutilizar el marcado en un contenedor, pero la suma de comprobación no era válida. Esto generalmente significa que está utilizando la representación del servidor y el marcado generado en el servidor no era lo que esperaba el cliente. Reacciona un nuevo marcado para compensar qué funciona pero has perdido muchos de los beneficios de la representación del servidor. En su lugar, descubra por qué el marcado que se genera es diferente en el cliente o servidor:

Lo cual tiene sentido, porque el servidor está intentando representar un estado no autenticado.

¿Cuál es la norma o práctica aceptada para establecer este estado inicial que depende únicamente de algo a lo que el cliente tiene acceso?

Answer 1

Encontré una solución de trabajo.

El truco, lamentablemente, es almacenar el estado autenticado en una cookie para que el estado de la sesión se envíe automáticamente al servidor cuando se solicite.

Answer 2

Descubrí que el OP es correcto, que el almacenamiento de cookies es la mejor opción. Si está utilizando reaccionar, reducir y expresar para una aplicación universal, la opción que funcionó para mí fue https://github.com/eXon/react-cookie .

Esencialmente:

En su código del lado del servidor puede usar:

  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
  }

En sus aplicaciones de reacción, dentro de los componentes, puede guardar las cookies directamente:

  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);

Además, si desea almacenar un objeto, como yo lo hice, puede pasar JSON.stringify(your object) . cookie.load lo analizará automáticamente.

En mi código llamé a cookie.save desde las acciones, pero puedes llamarlo directamente en componentes o cualquier abstracción que tengas.