redux-offline examples 사용법

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

기능 버튼이 3으로 돌아가기 버튼(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}
다음에 요청을 기다리는 경우,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
};