Get rid of data consistency with the redux-persist

Recently my manager asked me to prepare POC using React.js and Redux (I hope you are familiar with the Redux 😀) to pitch the client. We have to build an event tracker (to book the event on the calendar). At that moment, I had a very small window of time that I could not put my efforts and time into API development and integration. Though we needed a clear structure of data and its representation while submitting the app to the client. So I thought about preserving data and can access it without Storing/Fetching in DB via Backend TechStack 🤔. And suddenly redux-persist came to the rescue 💡.

What does a redux-persist do?

Initially, it grabs all data from your redux store and accumulates it on sustainable storage. Then it restores this data back to the redux store while kicking off our app. So this way your data will be kept up even after refreshing the app.

Sounds interesting right! Want to give it a try in your next app (in fact your ongoing app)? Here are the steps to follow.

How to use redux-persist?

For the installation

npm install redux-persist

Then to use the features of the package

import { persistReducer, persistStore } from ‘redux-persist’;

Hold on, will go through every bit of code and get it clear.

persistReducer is a reducer that will be the parent of the main reducer your app. Under the hood, it encloses all your redux store data against one key with configurations having a type of storage where you want to store the data. This storage can be anything session storage or async storage but for the web, local storage will be the best fit.

import storage from “redux-persist/lib/storage”;
const persistenceConfigs = {
  key: “eventTracker”, // whatever you want to keep as your key
  storage
};
const persistedReducer = persistReducer(persistenceConfigs, rootReducers);

Now, while creating the redux store it will take this persisted reducer as an argument instead of your normal root reducer.

export const store = createStore(
  persistedReducer, 
  composeWithDevTools(applyMiddleware(thunk))
);

I prefer to use redux-thunk as middleware and during the development to debug every action performed with the redux store using redux devtool.

persistStore coverup this redux-store and return the persisted object of your store data.

export const persistedStore = persistStore(store);

To use this whole setup in your app you have to tweak your entry point of the app where you have defined the redux store provider.

import { PersistGate } from “redux-persist/integration/react”;
import { store, persistedStore } from “./store”;
//…
<Provider store={store}>
  <PersistGate loading={<Loader />} persistor={persistedStore}>
    <MainContainer />
  </PersistGate>
</Provider>;

Here persistGate comes in the picture which reacts as a gateway to the app with persistence configuration. This persistGate will wrap your root component and hold your app until it fetches all the persisted data from the storage. Meanwhile, to give the better user experience you can define the loading component along with the persistor object returned by the persisted store.

Wrapping Up

That’s it. In case you want to preserve the data which will be used throughout the app, then redux-persist is the option to keep your redux store consistent and you can access that data after reloading your app until you clear your local storage.

I hope, this article will make your next React.js app more Optimized, Organized and Professional. Happy Coding! 😊