Offline-Unterstützung für React Native App

Question

Ich bin auf der Suche nach Offline-Unterstützung für eine React Native-Anwendung. Die App läuft derzeit von einer API, die von einer Postgres-Datenbank unterstützt wird.

Ich benutze bereits NetInfo, um zu bestimmen, ob ein Benutzer eine Verbindung hat oder nicht, aber ich bin auf der Suche nach der besten Möglichkeit zum Hinzufügen von Offline-Funktionen, wo ein Benutzer weiterhin ihre Daten und Informationen aktualisieren und dann alles synchronisieren können, wenn sie bekomme wieder eine Verbindung.

Es scheint, dass eine pouchdb/couchdb Lösung oft empfohlen wird - aber ich möchte meine Datenbank überhaupt nicht ändern. Idealerweise würde ich gerne eine Art haben, "Jobs" von API-Aufrufen in einer Warteschlange zu speichern und sie dann auszuführen, sobald die Verbindung wiederhergestellt ist.

Was ist der beste Weg, diese Offline-Funktionalität auf eine React Native App zu bekommen.

Vielen Dank im Voraus!

Answer 1

Sie können z. Redux für die Datenspeicherung im Allgemeinen. Angenommen, Sie haben eine LOAD_POSTS_DATA Aktion, die eine Komponente zu einem Zeitpunkt abfeuern können, können Sie aa Minderer wie folgt verwenden:

export const LOAD_POSTS_DATA = 'LOAD_POSTS_DATA'; 
var connected = ... // filled by NetInfo 

const initialState = { 
    data: [], 
}; 

export default function reducer(state = initialState, action) { 
    switch (action.type) { 
    case LOAD_POSTS_DATA: 
     if (connected) { 
     return { 
      open: true, 
     }; 
     } 

     return state; 

    default: 
     return state; 
    } 
} 

export function load() { 
    return { 
    type: LOAD_POSTS_DATA, 
    }; 
} 

Dies würde nicht nur die Daten laden, für das Aufschieben Sie würden eine zweite Reduktions schreiben wie dies:

const CLEAR_QUEUE = 'CLEAR_QUEUE'; 
import { LOAD_POSTS_DATA } from './otherReducer'; 
var connected = ... // filled by NetInfo 

const initialState = { 
    queue: [], 
}; 

export default function reducer(state = initialState, action) { 
    switch (action.type) { 
    case LOAD_POSTS_DATA: 
     if (!connected) { 
     var q = state.queue; 
     q.push(action); 

     return { 
      queue: q, 
     }; 
     } 

     return state; 

    case CLEAR_QUEUE: 
     return { 
     queue: [] 
     } 

    default: 
     return state; 
    } 
} 

// needs to be called as soon as you go back only 
// requires redux-thunk 
export function getOperations() { 
    return (dispatch, getState) => { 
    const { thisReducer: { queue } } = getState(); 
    queue.forEach(action => dispatch(action)); 

    return { 
     type: CLEAR_QUEUE, 
    }; 
    }; 
} 

Die zweite speichert jede deferrable Aktion (muss von anderen Reduzierungen eingeführt werden) und verwendet redux-thunk halten, die Aktionen zu erhalten und versenden sie, sobald Sie wieder online sind.

Answer 2

Werfen Sie einen Blick auf Realm: https://realm.io, können Sie es als Datenbank in Ihrer App verwenden, dann, sobald Sie die Konnektivität haben, können Sie die Daten synchronisieren.