A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Hydrate y estado de Redux desde Express

12/22
Recursos

Aportes 26

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

script para setResponse

        <script>
          window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
        </script>```

Gran manera de resumir renderToString e hydrate, definitivamente todo queda m谩s claro 馃槃

Hydrate y estado de Redux desde Express

En este punto, la aplicaci贸n ya esta siendo servida mediante SSR pero de una manera ineficiente. Actualmente se est谩n realizando dos renderizados: uno en el servidor que carga solamente el html y css (sin eventos asociados) para ser servido como respuesta y luego otro en el browser (como normalmente lo har铆a). Para solventar esto, se debe configurar la aplicaci贸n desde el front para que hidrate (complemente) lo que viene precargado como respuesta del servidor.

En el index de la carpeta frontend se debe reemplazar la funcion render de ReactDOM por hydrate:

ReactDOM.hydrate(
  <Provider store={store}>
    <Router history={history}>
      <App />
    </Router>
  </Provider>,
  document.getElementById('app'),
);

El initialState de la aplicaci贸n esta siendo declarado 2 veces, siendo esto una forma ineficiente de utilizarlo. Para optimizar esta situacion se debe definir un estado base (preloadedState) en la funcion que inicializa el store y crea el string renderizado de la app. Luego se debe enviar como parametro ese estado a la funcion setResponse para que esta lo incluya dentro del cuerpo de la respuesta del servidor.

const renderApp = (req, res) => {

  const store = createStore(reducer, initialState);
  const preloadedState = store.getState();

  const html = renderToString(
    <Provider store={store}>
      <StaticRouter location={req.url} context={{}}>
        {renderRoutes(serverRoutes)}
      </StaticRouter>
    </Provider>,
  );

  res.send(setResponse(html, preloadedState));
};

Para poder enviar el estado base (preloadedState) en la respuesta, se debe guardar de la siguiente forma:

const setResponse = (html, preloadedState) => {
  return (`
  <!DOCTYPE html>
  <html>
    <head>
      <link rel="stylesheet" href="assets/app.css" type="text/css">
      <title>Platzi Video</title>
    </head>
    <body>
      <div id="app">${html}</div>

      <script>
        window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
      </script>

      <script src="assets/app.js" type="text/javascript"></script>
    </body>
  </html>
  `);
};

Ahora en el archivo index.js de la carpeta frontend se debe eliminar la referencia al initialState: import initialState from './initialState'; y luego se llama al preloadedState definido desde el servidor. Con ese mismo estado precargado se debe crear el store y luego por temas de seguridad ha de ser eliminado:

const preloadedState = window.__PRELOADED_STATE__;
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, preloadedState, composeEnhancers());

delete window.__PRELOADED_STATE__;

Si alguien de pronto tuvo un error al desplegar el JS recuerden que SIEMPRE debe ir primero el script que trae el state, antes del script con el css y el JS de la siguiente forma.

Estaba pas谩ndolo al rev茅s y por eso la pas茅 bastante con un error pendejillo jeje 馃槃

Gran analog铆a :V

Me esta saliendo este error alguien que me pueda decir porque sale Gracias

react-dom.development.js:88 Warning: Expected server HTML to contain a matching <div> in <div>.
in div (created by Layout)
in Layout (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in App
in Router
in Provider

si tengo puesto el 鈥渉ydrate鈥 no me carga algunas imagenes ni esyilos, cuando recargo la pagina.
solo con el 鈥渞ender鈥 :c

Primero se env铆a un string con html y css, despu茅s se hidrata con javascript y el preloaded state? de 茅sta forma el cliente puede ver el html y css antes de tener la pagina totalmente interactiva. Estoy bien?

Hola Devs:
Aqui tienen la lectura del ReactDOM.hydrate(): Click Aqui

wow todo mas claro la verdad.
Hydrate para evitar el doble render y luego window.preload_state para de pre-cargar el estado del que se alimenta el redux.

Me surge la duda al momento de eliminar el PREALOADED_STATE del window. 驴Realmente lo hacemos bien de esta forma? si hago una b煤squeda en el c贸digo y pongo un punto de ruptura antes de eliminarlo puedo inspeccionar el initialState. 驴o al enviar a producci贸n o en unas clases siguientes hay m谩s pasos que evitan que esto pueda hacerse?

Me fascina cuando dice la frase "Vamos a hacer una recapitulacion鈥, Excelent Teacher!!!

Despu茅s de mucho luchar se pudo estabilizar el proyecto, todos los errores eran por las librer铆as de babel las actualice todas y se solucion贸 el problema

mind blowing

Es la tercera vez que veo el curso y apenas le estoy entendiendo

Excelente clase! Super explicado. As铆 es como deber铆an de ser todas las clases en los cursos de Platzi. A mi parecer, este profesor explica mucho mejor que el del curso anterior de la ruta de JS. La neta.

Te amo un poquito Sampol

excelente clase

Osea que a esta altura ya tendr铆an que funcionar los eventos con el JavaScript desactivado?

Hola, hice todo al pie de la letra, pero cuando quiero ir a otras rutas de la app, me aparece el siguiente error en consola: 鈥淯ncaught SyntaxError: Unexpected token 鈥<鈥欌 y muestra el html plano de app.js como referencia de la linea. A alguien le pas贸 algo as铆? Estoy trabado hace varios dias con esto

Ahora si se puso bueno 馃槃

Ayuda, algui茅n sabe como manejar el combinereducer de redux desde el lado del servidor?

complejo

Que gran clase, aqu铆 qued贸 mucho m谩s claro lo que estabamos realizando.

Un poco complejo