Debe conservar su estado redux en el almacenamiento local cuando se actualice e inicializar su tienda desde el almacenamiento local cuando se cargue la aplicación.
Ejemplo mínimo de persistencia de la tienda Redux:
Cree un componente "intermedio" para manejar las actualizaciones de estado persistentes en localStorage.
import React, { useEffect } from 'react';
import { useSelector } from 'react-redux];
const StorePersister = ({ children }) => {
const state = useSelector(state => state);
useEffect(() => {
localStorage.setItem('myState', JSON.stringify(state));
}, [state]);
return children;
};
índice - envuelve la App
componente con el persistente de la tienda.
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './components/App';
import StorePersister from './components/StorePersister';
import store from "./store";
ReactDOM.render(
<Provider store={store}>
<StorePersister>
<App />
</StorePersister>
</Provider>,
document.getElementById('root')
);
Inicializa el estado desde el almacenamiento local. Si no hay una clave "myState" o el análisis devuelve null
luego el objeto vacío ({}
) se utilizará como alternativa.
import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";
const initialState = JSON.parse(localStorage.getItem('myState')) || {};
const store = createStore(
rootReducer,
initialState,
compose(
applyMiddleware(thunk),
(b&&a()) || compose
)
);
export default store;
También hay un redux-persist paquete disponible que ofrece un poco de personalización para lo que se persiste e inicializa desde la persistencia.