2016-05-16 5 views
7

Reactネイティブアプリケーションにオフラインサポートを追加する予定です。このアプリケーションは現在、Postgresのデータベースに基づいてAPIを実行しています。Reactネイティブアプリケーションのオフラインサポート

私は既にNetInfoを使って接続しているかどうかを判断していますが、オフライン機能を追加する最善の方法を理解しようとしています。ユーザーがデータと情報の更新を続け、もう一度接続してください。

pouchdb/couchdbの解決策が推奨されるようですが、データベースを一切変更したくありません。理想的には、APIコールの「ジョブ」をキューに格納し、接続が復元された後にそれらを実行するための何らかの方法が必要です。

React Native Appでこのオフライン機能を利用するには、どのような方法が最適ですか。

ありがとうございます!

+0

アプリケーションの状態を管理するために何を使用していますか? –

+0

Flux – Karim

+1

現在、Reduxを使用している場合は、このライブラリを使用するよりも、状態をオフラインで使用できます。https://github.com/rt2zz/redux-persist –

答えて

4

一般的なデータ保存のための還元。

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

これだけあなたのような第二減速を書くと延期のために、データをロードしません:あなたはコンポーネントが時点で発射することがありLOAD_POSTS_DATAアクションを、持っていると仮定すると、あなたは、このようなAA減速機を使用することができますこの:

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

秒1つの店舗ごとに繰延アクションは、(他の減速からインポートする必要があります)とアクションのホールドを取得し、あなたがオンラインに戻っているとすぐにそれらをディスパッチするredux-thunkを使用しています。

1

レルムを見てみましょう:https://realm.io、あなたはあなたのアプリケーションのデータベースとしてそれを使用することができますし、すぐにあなたがデータを同期することができます接続している。

関連する問題