Supporto offline per React Native App

Question

Sto cercando di aggiungere il supporto offline a un'applicazione React Native. L'app attualmente esegue un'API supportata da un db Postgres.

Sto già utilizzando NetInfo per determinare se un utente ha una connessione o meno, ma sto cercando di capire il modo migliore per aggiungere funzionalità offline dove un utente può continuare ad aggiornare i propri dati e informazioni e quindi avere tutto sincronizzato quando ottenere una connessione di nuovo.

Sembra che spesso si consiglia una soluzione pouchdb/couchdb, tuttavia, non desidero affatto modificare il mio database. Idealmente, mi piacerebbe avere una sorta di modo per archiviare "lavori" di chiamate API in una coda e poi eseguirli una volta ripristinata la connessione.

Qual è il modo migliore per ottenere questa funzionalità offline su un'app React Native.

Grazie in anticipo!

Answer 1

È possibile utilizzare ad es. ridondante per l'archiviazione dei dati in generale. Supponendo di avere un'azione LOAD_POSTS_DATA, che un componente può sparare ad un punto del tempo è possibile utilizzare aa riduttore come questo:

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, 
    }; 
} 

questo sarebbe solo non caricare i dati, per il differimento si può scrivere un secondo riduttore come questo:

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, 
    }; 
    }; 
} 

la seconda negozi ogni azione differibile (deve essere importato da altri riduttori) e usa redux-thunk di entrare in possesso delle azioni e inviare, non appena si è di nuovo online.

Answer 2

Dai un'occhiata al regno: https://realm.io, puoi utilizzarlo come database nella tua app, quindi non appena hai la connettività puoi sincronizzare i dati.