Você deve manter seu estado redux no armazenamento local quando ele for atualizado e inicializar sua loja a partir do armazenamento local quando o aplicativo for carregado.
Exemplo de persistência mínima de armazenamento de redux:
Crie um componente "intermediário" para lidar com atualizações de estado persistentes para 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;
};
index - envolve o
App
componente com o persistente da loja. 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')
);
Inicialize o estado do armazenamento local. Se não houver nenhuma chave "myState" ou a análise retornar
null
então o objeto vazio ({}
) será usado como um substituto. 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;
Há também um redux-persist pacote por aí que oferece um pouco de personalização para o que é persistido e inicializado a partir do arquivo persistence.