La hidratación del estado después de la creación de la tienda se puede lograr mediante la creación de un reductor principal que pueda pasar por alto los reductores de nivel superior y reemplazar todo el estado.

Los reductores son funciones que obtienen el estado actual, lo combinan con la carga útil de una acción y devuelven un nuevo estado. Por lo general, el reductor principal es una combinación de todos los reductores superiores que usan combineReducers , y el estado es la combinación de piezas de estado devueltas por los reductores de nivel superior.

Sin embargo, el reductor principal puede reaccionar directamente a las acciones. Si el reductor principal recibe una determinada acción ( hydrate ), en lugar de llamar a los reductores combinados, devuelve la carga útil de la acción (el estado guardado). Otras acciones se pasan a los reductores combinados.

 const mainReducer = (state = {}, action) => action.type === 'hydrate' ? action.payload // hydrate the state : reducers(state, action); // create new state by using combined reducers

Ejemplo de trabajo:

 const { combineReducers, createStore } = Redux; const people = (state = [], action) => action.type === 'people' ? [...state, action.payload] : state; const items = (state = [], action) => action.type === 'items' ? [...state, action.payload] : state; const reducers = combineReducers({ people, items }); const mainReducer = (state = {}, action) => action.type === 'hydrate' ? action.payload : reducers(state, action); const store = createStore(mainReducer); store.subscribe(() => console.log(store.getState())); store.dispatch({ type: 'people', payload: 5 }); store.dispatch({ type: 'items', payload: 'green' }); store.dispatch({ type: 'hydrate', payload: { people: [20, 30, 50, 100], items: ['green', 'yellow', 'red'] }});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>

Aunque la respuesta aceptada podría funcionar, creo que lo que estás persiguiendo es un antipatrón, después de todo.

Si está realizando la representación del cliente y manejando la autenticación del lado del cliente, lo único que debe enviar a su cliente, en mi opinión, es un <Spinner/> , con cero estado precargado.

Una vez que esté en el cliente, inicie su tienda, realice su autenticación y decida si va a obtener datos y presentar la versión autenticada de la página, o si el usuario aún no está autenticado, muéstrele el formulario de inicio de sesión. Todo a partir de este punto debe manejarse del lado del cliente.

Esto es lo que Redux tiene que decir al respecto:

https://redux.js.org/usage/server-rendering

Por lo tanto, si durante el procesamiento inicial obtuvo el usuario "Schrödinger" (puede estar autenticado o no), lo único que puede suponer con seguridad que se muestra es una rueda giratoria.

OTRA OPCIÓN

Si realmente necesita obtener nuevos datos precargados del servidor en múltiples solicitudes (eso es lo que sucede en las aplicaciones NextJS).

Si va a renderizar previamente cada página (y obtener un nuevo estado en cada cambio de página), puede hacer lo que NextJS sugiere que haga:

• Básicamente, reinician la tienda y combinan los nuevos datos cada vez que recibe nuevos datos precargados del servidor.

Aquí está el ejemplo:

https://github.com/vercel/next.js/tree/canary/examples/with-redux-thunk

Y la parte principal de su código:

 import { useMemo } from 'react' import { createStore, applyMiddleware } from 'redux' import { composeWithDevTools } from 'redux-devtools-extension' import thunkMiddleware from 'redux-thunk' import reducers from './reducers' let store function initStore(initialState) { return createStore( reducers, initialState, composeWithDevTools(applyMiddleware(thunkMiddleware)) ) } export const initializeStore = (preloadedState) => { let _store = store ?? initStore(preloadedState) // After navigating to a page with an initial Redux state, merge that state // with the current state in the store, and create a new store if (preloadedState && store) { _store = initStore({ ...store.getState(), ...preloadedState, }) // Reset the current store store = undefined } // For SSG and SSR always create a new store if (typeof window === 'undefined') return _store // Create the store once in the client if (!store) store = _store return _store } export function useStore(initialState) { const store = useMemo(() => initializeStore(initialState), [initialState]) return store }