Build an Expense Manager App with React Native – Part 5

Make the app work offline

In order to make the app usable when no Internet connection is available we will use some neat libraries. One of these are redux-persist, which enables to save the state store of the app to local storage. Then we will need redux-offline-queue which makes it possible for the user to add new expenses when offline. When a connection is detected, all changes will be synced transparently.

Add the dependencies:

Import Redux Offline Queue reducer, in reducers/index.js:

Important

Notice above that we named our DataReducer as data, so in order to access it you will need to change calls to the state to this.props.data.expenses
for example

Now, we need to integrate the ROQ middleware with our Redux Saga configuration in our App.js:

It’s important to make sure the consumeActionMiddleware is the last to being called.

Configure Network Connectivity Saga

We will need to separate the Data Saga from the connectivity specific saga. So rename sagas/index.js to sagas/DataSaga.js. Create a new sagas/index.js:

Create sagas/AppStateRootSaga.js

The saga above will listen for all connectivity changes and save the connectivity status in the store.

At this point our state store looks like this :

Configure data persistence with redux-persist

Redux Persist enables to persist the state store to localStorage when the app is killed.

Add the dependency:

Edit App.js to add the persistence config: