This content originally appeared on DEV Community and was authored by Harshit Bhawsar
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.
This content originally appeared on DEV Community and was authored by Harshit Bhawsar
Harshit Bhawsar | Sciencx (2024-08-20T04:43:54+00:00) Persist Redux State. Retrieved from https://www.scien.cx/2024/08/20/persist-redux-state/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.