From af920729597ed43267178573b054e032b7695c8a Mon Sep 17 00:00:00 2001 From: Alejandro Lembke Barrientos Date: Mon, 18 Apr 2022 05:35:25 +0000 Subject: [PATCH] PR-753737: Se agrega hydrate y se inyecta initial state en SRR. --- src/frontend/index.js | 33 +++++++++++++++++++++++++-------- src/server/server.js | 8 ++++++-- 2 files changed, 31 insertions(+), 10 deletions(-) diff --git a/src/frontend/index.js b/src/frontend/index.js index 18b1a22..1130b35 100644 --- a/src/frontend/index.js +++ b/src/frontend/index.js @@ -1,5 +1,5 @@ import React from 'react'; -import { createRoot } from 'react-dom/client'; +import { hydrateRoot } from 'react-dom/client'; //Router import { BrowserRouter as Router } from 'react-router-dom'; //History @@ -10,7 +10,6 @@ import { Provider } from 'react-redux'; import { composeWithDevTools as composeWithDevToolsWeb } from 'redux-devtools-extension'; import { config } from '../config'; import reducer from './reducers'; -import initialState from './reducers/initialState'; import App from './components/App'; import './styles/global.sass'; @@ -28,26 +27,44 @@ const composeEnhancers = composeWithDevToolsWeb({ // Specify here name, actionsBlacklist, actionsCreators and other options }); +const preloadedState = window.__PRELOADED_STATE__ + const store = env === 'development' ? createStore( reducer, - initialState, + preloadedState, composeEnhancers(), ) : createStore( reducer, - initialState, + preloadedState, ) +delete window.__PRELOADED_STATE__ + const container = document.getElementById('app'); -const root = createRoot(container); const history = createBrowserHistory() -root.render( +const root = hydrateRoot(container, - + + + , + //Add this comment to update later app and remove warning + /*{ + onRecoverableError: (error) => { + console.error("recoverable", error); + } + }, */ +); + +// Use root.render to update later the app +/* root.render( + + + -); +); */ if (module.hot) { module.hot.accept(); diff --git a/src/server/server.js b/src/server/server.js index 07f2e4a..edc6a33 100644 --- a/src/server/server.js +++ b/src/server/server.js @@ -42,7 +42,7 @@ if(env === 'development'){ })); } -const setResponse = (html) => { +const setResponse = (html, preloadedState) => { return(` @@ -55,6 +55,9 @@ const setResponse = (html) => {
${html}
+ @@ -63,6 +66,7 @@ const setResponse = (html) => { const renderApp = (req, res) => { const store = createStore(reducer, initialState) + const preloadedState = store.getState(); const html = renderToString( @@ -70,7 +74,7 @@ const renderApp = (req, res) => { ) - res.send(setResponse(html)); + res.send(setResponse(html, preloadedState)); }; app.get('*', renderApp)