How to use Redux Persist in React Native

Automatically persist and sync your Redux store on-device using Redux Persist

Redux Persist syncs and maintains app state between sessions

The Problem Redux Persist Solves

Workflow for fetching more list items while scrolling

Structuring and Nesting Reducers

// simple multi-reducer setupreducers/
account.js
auth.js
index.js
plans.js
sessions.js
// reducers/index.jsimport account from './account'
import auth from './auth'
...
export default combineReducers({
account,
auth,
...
});

Calling reducers from other reducers

// providing a reducer namespace manuallyimport authReducer from './auth'
...
export default combineReducers({
auth: authReducer,
...
});
// reducers/auth.jsimport settingsReducer from ./settings'function authReducer(state = {}, action) {
switch (action.type) {
case SET_AUTH_SETTINGS:
return {
...state,
settings: settingsReducer(state.settings, action)
}
}
}

Nesting multiple combineReducers

// nested reducer setupreducers/
account.js
auth/
account.js
index.js
subscription.js
security.js

index.js
plans.js
...
// reducers/auth/index.jsimport { combineReducers } from 'redux'
import account from './account'
import security from './security'
import subscription from './subscription'

export default combineReducers({
account,
security,
subscription,
});

Integrating Redux Persist

Redux Persist basic setup

// basic redux boilerplate
import { createStore } from 'redux'
import { Provider } from 'react-redux'
// redux-persist wrappers
import { persistStore, persistReducer } from 'redux-persist'
// the local storage we'll be using to persist data
import AsyncStorage from '@react-native-community/async-storage'
// redux-persist merge level
import autoMergeLevel2 from 'redux persist/lib/stateReconciler/autoMergeLevel2'
// root reducer - reducers/index.js
import rootReducer from './reducers'
// the component we'll use to wrap our component tree
import { PersistGate } from 'redux-persist/lib/integration/react';
// persist config
const persistConfig = {
key: 'root',
storage: AsyncStorage,
stateReconciler: autoMergeLevel2
};
// wrap persist API around root reducer and store
const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = createStore(persistedReducer);
export const persistor = persistStore(store);
// App component
const App = () => {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<RootComponent />
</PersistGate>
</Provider>
);
};

export default App;

Working with the blacklist and whitelist

// defining a blacklistconst persistConfig = {
key: 'root',
storage: AsyncStorage,
stateReconciler: autoMergeLevel2,
blacklist: ['plans', 'session'],
};
// reducers/auth/index.jsimport { combineReducers } from 'redux'
import account from './account'
import security from './security'
import subscription from './subscription'
import AsyncStorage from '@react-native-community/async-storage'
import { persistReducer } from 'redux-persist';
const persistConfig = {
key: 'auth',
storage: AsyncStorage,
blacklist: ['security']
};
const authReducer = combineReducers({
account,
security,
subscription,
});
export default persistReducer(persistConfig, authReducer);

Where should persistConfig objects be defined?

// reducers/index.js...// define persistConfig objects for needed reducersconst rootPersistConfig = {
key: 'root',
storage: AsyncStorage,
};

const authPersistConfig = {
key: 'auth',
storage: AsyncStorage,
blacklist: ['security']
};
const rootReducer = combineReducers({
account,
auth: persistReducer(authPersistConfig, authReducer),
...
});
export default persistReducer(rootPersistConfig, rootReducer);

A Mention on Transforms

In Summary

Programmer and Author. Director @ JKRBInvestments.com. Creator of LearnChineseGrammar.com for iOS.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store