OfflineReactNative
An offline storage extension that records events in AsyncStorage when offline, and resyncs them when back online. The extension adds a timestamp to each saved extension under the
timeSaved key.Like all offline storage extensions, this extension expects that you're already storing a connectivity flag in your app's state.
Installation
1
npm install --save @redux-beacon/offline-react-native
Copied!
Import
1
import OfflineReactNative from '@redux-beacon/offline-react-native';
Copied!
Usage
Step 1
The first step is to track the connection status in your state. Here's an example of how you would do so using NetInfo:
1
import { NetInfo } from 'react-native';
2
3
const initialState = {
4
isConnected: true, // by default the app is assumed to have a connection
5
}
6
7
function reducer(state = initialState, action) {
8
switch (action.type) {
9
case 'UPDATE_CONNECTIVITY' {
10
return Object.assign({}, state, { isConnected: action.payload });
11
}
12
...
13
default:
14
return state;
15
}
16
}
17
18
// add event listeners to update the connectivity flag when the
19
// connection status changes
20
NetInfo.isConnected.addEventListener('change', (isConnected) => {
21
store.dispatch({
22
type: 'UPDATE_CONNECTIVITY',
23
payload: isConnected,
24
});
25
});
Copied!
Step 2
Create a connectivity selector that accepts the state, and returns your app's connection status:
1
const isConnected = state => state.isConnected;
Copied!
The connectivity selector should return a boolean:
truewhen the app is onlinefalsewhen the app is offline
Step 3
Initialize the extension and provide it when creating the middleware:
1
import { AsyncStorage } from 'react-native';
2
import offlineReactNative from '@redux-beacon/offline-react-native';
3
4
// Pass the connectivity selector from Step 2 as the second parameter
5
const offlineStorage = offlineReactNative(AsyncStorage, isConnected);
6
7
// Create or import an events map and target.
8
// See "getting started" pages for instructions.
9
10
const middleware = createMiddleware(eventsMap, target, { offlineStorage });
Copied!
Now, whenever your app loses connection, your analytics events will now be saved offline until it regains its connection.
Last modified 4yr ago