redux-offline/redux-offline: Build Offline-First Apps for Web and React Native
APIサーバー側
以下を実行でポート4000でAPIサーバーが起動する
cd examples/web
npm i
npm start
クライアント側
以下を実行でポート3000でクライアントが起動する
cd examples/web/client
npm i
npm start
APIサーバーの挙動
/succeed-always
常にstatus(200)を返す。
/succeed-sometimes
50%の確率でstatus(500)とstatus(200)を返す
/fail-sometimes
50%の確率でstatus(500)とstatus(400)を返す
クライアントの挙動
以下のようなあっさりしたクライアントが起動します。
BasicとPromiseを使うバージョに分岐する画面です。
Basic
機能ボタンが３と戻るボタン（home）
- Succeed Always
- Succeed Sometimes
- Fail Sometimes
Succeed Always
成功を返すAPIを呼ぶ（status:200を常に返す）
成功：status: 200
Succeed Sometimes
時々成功するAPIを呼ぶ。status:200が応答あるまでリトライ続ける
成功：status: 200
失敗：status: 500 (internal server error)
Succeed Always
失敗の種類変えるAPIを呼ぶ。status:400が応答あるまでリトライ続ける
失敗A：status: 500 (internal server error)
失敗B：status: 400 (bad request)
クライアント画面 React構成
<SyncStatus
現在進行している状況を表示する
busyの場合(Request投げ中)には、
Waiting on request - Attempt #{attempt}
次回のRequestまで待機中の場合には、
Waiting on retry: {timer}s - Attempt #{attempt}
何もしてない時にはSyncedを表示
Attemptは試行回数
表示はRedux
<RequestsQueue
<MakeRequests
設定
import defaultConfig from '@redux-offline/redux-offline/lib/defaults';
カスタム
const config = {
...defaultConfig,
retry(_action, retries) {
return (retries + 1) * 1000;
},
returnPromises: true
};