Redux Persistor
*Saves redux state to local or session storages
Local Storage ・Data is stored in tabs and windows ・The data will not expire. ・Data remains after browser restart
Session Storage ・Data is stored in current tab only ・Data remains after browser restart but not closing and reopening
install
npm i redux-persist
root-reducers.js
import { persistReducer } from 'redux-persist'; import storage from 'redux-persist/lib/storage'; // for local storage import storage from 'redux-persist/lib/storage/session'; // for session storage const persistConfig = { key: 'root', storage, whitelist: ['cart'], }; const rootReducer = combineReducers({ }); export default persistReducer(persistConfig, rootReducer);
store.js
import { persistStore } from 'redux-persist'; const store = createStore(rootReducer, applyMiddleware(...middleWares)); const persistor = persistStore(store); export { store, persistor };
index.js
import { persistor } from './redux/store.js'; import { PersistGate } from 'redux-persist/integration/react'; ReactDOM.render( <Provider store={store}> <PersistGate persistor={persistor}> <App /> </PersistGate> </Provider>, document.getElementById('root') );