How to add redux-persist in your react/react-native application

After adding redux in our applications. We mostly come accross the problem of data being wiped once the browser tab is refreshed.

To our help we have redux-persist library which helps us persisting the data of our store even after the web page is closed or refreshed.

It's very simple to add redux-persist in our application that uses redux already.

Once you setup your redux this is how typically you configure redux store inside your application.

import React from "react";

// Redux Imports
import { Provider } from "react-redux";
import Reducer from "./Redux/Reducer";
import { createStore } from "redux";

const store = createStore(Reducer);

function App() {
  return (
    <Provider store={store}>
    </Provider>
  );
}

export default App;

• Step 1: Install Redux Persist

You can install redux-persist using

yarn install redux-persist

OR

npm install redux-persist

After that we need to do the following imports from redux-persist library that you just installed.
You have to import them inside the component where you are initialising your redux store.

import { persistStore, persistReducer } from "redux-persist";
import { PersistGate } from "redux-persist/integration/react";
import storage from "redux-persist/lib/storage";

After that we have to define the configuration for redux persist store

const persistConfig = {
  key: "root",
  storage,
};

const persistedReducer = persistReducer(persistConfig, Reducer);

const store = createStore(persistedReducer);
let persistor = persistStore(store);

After adding the above code snippet all you need to do is, to wrap your component inside PersistGate which helps in delaying the rendering of our app's UI until your persisted state has been retrieved and saved to redux.

Our final code for App.js or any file where you are initialising your store is gonna look like this

import React from "react";

// Redux Imports
import { Provider } from "react-redux";
import Reducer from "./Redux/Reducer";
import { createStore } from "redux";

// Components import
import ListTodos from "./Screen/ListTodos";

// Redux Persist
import { persistStore, persistReducer } from "redux-persist";
import { PersistGate } from "redux-persist/integration/react";
import storage from "redux-persist/lib/storage";

const persistConfig = {
  key: "root",
  storage,
};

const persistedReducer = persistReducer(persistConfig, Reducer);

const store = createStore(persistedReducer);
let persistor = persistStore(store);

function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <ListTodos />
      </PersistGate>
    </Provider>
  );
}

export default App;

And voila, you have your redux-persist settled in your application.

Here's is a working Todo Application that uses redux persist to store Todos.

For further explanation we can talk about what those different methods are doing in above code snippets.

• persistStore()

persistStore method accept a store parameter which is going to be the store that it's gonna persist.

• persistReducer()

In persistReducer method you have to pass the config of persist and the reducer that you created so it helps the package to load the data and initialise the actual redux store.

• PersistGate

PersistGate component accepts the persistStore() as a prop and it wraps our application code inside of it which helps in delaying the rendering of our app's UI until the persisted state has been retrieved and saved to redux. It also provides a loading prop which can show any component such as an Activity Indicator to tell the user that the data is being loaded.