How to persist data across sessions in react native with redux-persist

2 minute read

In this blog post I’ll show you how to persist your data across sessions in react native using redux-persist.

In this blog post I assume that you:

  • have a working react native app
  • you have a working redux store with a root reducer
  • want to learn how to persist data across sessions

Let’s get started!

1. Setup

We first have to install redux-persist.

npm install redux-persist

And we also have to install async-storage.

npm install @react-native-community/async-storage

2. Changing your store configuration

After installing, the second thing we have to do is update the file that has our redux store configuration.

Mine is very simple and looks like this:

import { createStore } from 'redux';
import rootReducer from './reducer';

const store = createStore(rootReducer);

export default store;

And this is what it looks like after:

import AsyncStorage from '@react-native-community/async-storage'; // 1. import AsyncStorage
import { persistStore, persistReducer } from 'redux-persist'; // 2. import persistStore and persistReducer

import { createStore } from 'redux';
import rootReducer from './reducer';

// 3. create a persistConfig and pass AsyncStorage explicitly for storage
const persistConfig = { 
    key: 'root',
    storage: AsyncStorage 
  }

const persistedReducer = persistReducer(persistConfig, rootReducer); // 4. create a persistedReducer
const store = createStore(persistedReducer); // 5. create persisted store
const persistor = persistStore(store) // 6. create the store persistor

export default { store, persistor }; // 7. export both of them

3. Wrap your App in a PersistGate

The third and last things that we have to do is wrap our App component in a PersistGate.

Before:

import store from './redux/store';
import {Provider, useSelector, useDispatch} from 'react-redux';

// ...

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

And this is what it looks like after wrapping the contents of Provider with the PersistGate with the persistor as the argument. Optionally, we can add a loading component.

import { PersistGate } from 'redux-persist/integration/react'
import {Provider, useSelector, useDispatch} from 'react-redux'
import { store, persistor } from './redux/store';

// ...

export default function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <NavigationContainer>
          <Tab.Navigator>
          // ...
          </Tab.Navigator>
        </NavigationContainer>
      </PersistGate>
    </Provider>
  );
}

After saving everything I ran into this error.

undefined is not an object react native redux persist

Which I fixed by removing the default keyword here:

export default { store, persistor };

Into this:

export { store, persistor };

After which everything worked!

That’s it!

Now your redux data persist across sessions. Have fun!

Subscribe

Comments