How To Use Redux Persist In React Application

In this article, I will explain my understanding of Redux persistence.

How does Redux Persistence work?

Redux persist takes your Redux state object and save it to Persistence storage.

For example, If we store your redux reducers using redux persist, It will not clear when you close your app. You have that old data when you open your app again.

Whenever you uninstall your app, at that time only your reducers will be clear.

How do we use Redux Persist?

how do we use redux persist?

For pre-request, we should have to configure with redux. Follow this guideline for install redux.

Installation for redux persist:

npm install --save redux-persist - OR - yarn add redux-persist

import { persistStore, persistReducer } from 'redux-persist';

For persistReducer is wrap your app’s root reducers and pass it to the persistStore function it ensures your redux state is stored to persisted storage whenever it changes.

import React from 'react';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import rootReducer from '../reducers';
const persistConfig = {
  key: 'authType',
  storage: storage,
  whitelist: ['authType'] // which reducer want to store
};
const pReducer = persistReducer(persistConfig, rootReducer);
const middleware = applyMiddleware(thunk, logger);
const store = createStore(pReducer, middleware);
const persistor = persistStore(store);
export { persistor, store };

In persistConfig I used the whitelist. It (whitelist) ensures which reducer want to save in persistence storage rest of the reducers are not save in persistence storage.

In the above code authType is one of the reducers. But authType data only store in the storage.

const INITIAL_STATE = {
  authType: null
};
const applySetUserType = (state, action) => ({
  ...state,
  authType: action.payload
});
function authTypeReducer(state = INITIAL_STATE, action) {
  switch (action.type) {
    case 'AUTH_TYPE': {
      return applySetUserType(state, action);
    }
    default:
      return state;
  }
}
export default authTypeReducer;

The above one is my authType reducer. This reducer data save in persistence storage.

const persistConfig = {
  key: 'authType',
  storage: storage,
  blacklist: ['authType']
};

blacklist is also one of the keys in persistConfig. It defines which are the reducers do not want to save in the persistence storage.

//App.js
import React from 'react';
import Boot from './src/boot';
import { Provider } from 'react-redux';
import { store } from './src/redux/store';
export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Boot />
      </Provider>
    );
  }
}

In your provider you just your store alone.

Thank for reading…!

This basic my understanding of redux persistence knowledge. Want to more follow below links….

rt2zz/redux-persist