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')
);