Persist Redux State

What does Persist Redux state mean?

One common challenge in React applications is rehydrating the Redux state after a page reload or between user sessions. A typical workaround is to re-fetch the data via an API call and store it in the Redux state. However, you can now rehydrate the Redux state without additional API calls using a technique called Persisted Redux State.

The redux-persist package

This package and the typical redux packages @reduxjs/toolkit and react-redux can be used to create a redux state that can persist across the page reload or user session in the browser.

Prerequisites

• You have a running react application.

Installations

Use this command to install all the necessary packages to set up a persisting redux state.

npm i --save @reduxjs/toolkit react-redux redux-persist

Setting up a Persisting Redux State

1.Configure your redux store [store.js].

import { combineReducers, configureStore } from "@reduxjs/toolkit";
import sampleSlice from "./sampleSlice";
import storageSession from "redux-persist/lib/storage/session"; // session storage
import { FLUSH, PAUSE, PERSIST, persistReducer, persistStore, PURGE, REGISTER, REHYDRATE } from 'redux-persist';

const rootReducer = combineReducers({
     sample : sampleSlice.reducer;
})
const persistConfig = {
     key:'root',
     storage: storageSession,
}
const persistedReducer = persistReducer(persistConfig, rootReducer)
const store = configureStore({
     reducer: persistedReducer,
     middleware: (getDefaultMiddleware) => 
               getDefaultMiddleware({
                   serializableCheck: {
                         ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
           },
     }) 
})
const persister = persistStore(store);
export default store

NOTE: If you want your redux to persist not only between the reloads but also between the user-sessions in the browser replace the

import storageSession from "redux-persist/lib/storage/session"; // session storage

import with

import storageSession from "redux-persist/lib/storage"; // local storage

2.Wrap your Root Component [index.js].

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { BrowserRouter } from 'react-router-dom';
import store, { persistor } from './store';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(<BrowserRouter>
    <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
            <App />
        </PersistGate>
    </Provider>
</BrowserRouter>);

and done! your persisting redux state is ready.

The above is the detailed content of Persist Redux State. For more information, please follow other related articles on the PHP Chinese website!