In the last few months, I am working on a Defi app which is based on the Expo platform. One of the ‘must have’ thing is that the app need to store insensitive user data locally, such as app settings. After comparing with several potential solutions, like react-native-mmkv (Not compatible with Expo), expo-sqlite (Not compatiblw with the Expo for web), redux-persist (build on top of Async Storage, compatible with Android, iOS and web, easy to use), I decided to adopt Redux.

I searched a bit regarding integrating Redux into Expo, however, in my Expo project, I used tabs navigation structure, so there is no app.js as the main entry (The file structure is listed blow). And all the solutions that I found only works on the Expo project that has an App component (normally app.js) as an entry point. After a few hours of trouble shooting, I finally found the solution myself and decided to share the method in this article, hopefully it will help someone in the future.

1
2
3
4
5
6
7
8
9
10
11
-- root
  -- app
    -- (tabs)
      -- home
      ...
    -- index.js // entry
    -- _layout.js
    ...
  ...
-- index.js
...

Step by Step Guide

Although the way to the destination is rugged, the solution is quite simple. To embed Redux into an Expo project with the tabs navigation structure, we only need to add the redux provider into two files: app/index.js and app/_lauout.js.

app/index.js

As shown below, we wrap the <Redirect href="/home" /> with the Redux provider and the PersistGate.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { useRootNavigationState, Redirect } from 'expo-router';

import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/es/integration/react';
// store and persistor are self-defined common redux component, nothing special
import { store, persistor } from '../services/redux/store';

const Home = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <Redirect href="/home" />
      </PersistGate>
    </Provider>
  );
};

export default Home;

app/_layout.js

This is the tricky part, I could not image that to make Redux work, I need to wrap the Stack with the Redux provider and the PersistGate until I found out that this is a key step.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { Stack } from 'expo-router';

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

const Layout = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <Stack>
          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        </Stack>
      </PersistGate>
    </Provider>
  );
};

export default Layout;

After adding the two, I am able to use the Redux in the files under /app. Happy coding: )