Synchronizing application data

So far in this chapter, you've learned how to detect the state of a network connection, and how to store data locally in a React Native application. Now it's time to combine these two concepts and implement an app that can detect network outages and continue to function.

The basic idea is to only make network requests when we know for sure that the device is online. If we know that it isn't, we can store any changes in state locally. Then, when we're back online, we can synchronize those stored changes with the remote API.

Let's implement a simplified React Native app that does this. The first step is implementing an abstraction that sits between the React components and the network calls that store data. We'll call this module store.js:

import { 
  NetInfo, 
  AsyncStorage, 
} from 'react-native'; 
import { Map as ImmutableMap } from 'immutable'; 
 
// Mock data that would otherwise come from a real 
// networked...