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 you know for sure that the device is online. If you know that it isn’t, you can store any changes in the state locally. Then, when you’re back online, you can synchronize those stored changes with the remote API.

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

export function set(key: Key, value: boolean) {
  return new Promise((resolve, reject) => {
    if (connected) {
      fakeNetworkData[key] = value;
...