How to add redux-persist in your react/react-native application
Tags: reactnative, react, javascript, redux
Published: 2021-10-07 22:36:33

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](https://www.npmjs.com/package/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](https://github.com/ahsanihsan/redux-tutorial) 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.