redux offline

관리자가 원했습니다

낙관적 UI에 대한 일류 지원과 함께 Orgonaboutable ™ ™ 오프라인 우선 응용 프로그램을위한 영구적 인 Redux Store. React, React Native 또는 모든 웹 앱의 독립형 상태 컨테이너와 함께 사용하십시오.

Redux 오프라인은 이제 커뮤니티 주도 팀에 의해 유지되고 있습니다. 새로운 버전의 라이브러리는 이제 NPM 조직 @redux-offline 에서 사용할 수 있습니다. 이 놀라운 도서관을 처음 만들어 주신 @jevakallio에게 큰 감사를드립니다.

빠른 시작

1. NPM (또는 원사)으로 설치

React Native 0.60+의 경우

npm install --save @redux-offline/redux-offline@native

React Native Expo SDK 36

npm install --save @redux-offline/redux-offline@expo

React Native <= 0.59의 경우

npm install --save @redux-offline/redux-offline

2. compose 와 함께 offline 스토어 인핸서를 추가하십시오

 import { applyMiddleware , createStore , compose } from 'redux' ;
import { offline } from '@redux-offline/redux-offline' ;
import offlineConfig from '@redux-offline/redux-offline/lib/defaults' ;

// ...

const store = createStore (
  reducer ,
  preloadedState ,
  compose (
    applyMiddleware ( middleware ) ,
    offline ( offlineConfig )
  )
) ; 

3. 오프라인 메타 데이터로 동작을 장식하십시오

 const followUser = userId => ( {
  type : 'FOLLOW_USER_REQUEST' ,
  payload : { userId } ,
  meta : {
    offline : {
      // the network action to execute:
      effect : { url : '/api/follow' , method : 'POST' , json : { userId } } ,
      // action to dispatch when effect succeeds:
      commit : { type : 'FOLLOW_USER_COMMIT' , meta : { userId } } ,
      // action to dispatch if network action fails permanently:
      rollback : { type : 'FOLLOW_USER_ROLLBACK' , meta : { userId } }
    }
  }
} ) ;

효과 페이로드가 JSON 이외의 다른 경우 신체와 헤더를 전달할 수 있습니다.

 const registerUser = ( name , email ) => ( {
  type : 'REGISTER_USER' ,
  payload : { name , email } ,
  meta : {
    offline : {
      // the network action to execute:
      effect : { url : '/api/register' , method : 'POST' , body : `name= ${ name } &email= ${ email } ` , headers : { 'content-type' : 'application/x-www-form-urlencoded' } } ,
      // action to dispatch when effect succeeds:
      commit : { type : 'REGISTER_USER_COMMIT' , meta : { name , email } } ,
      // action to dispatch if network action fails permanently:
      rollback : { type : 'REGISTER_USER_ROLLBACK' , meta : { name , email } }
    }
  }
} ) ; 

4. (React Native Android) 네트워크 상태를 읽을 수있는 권한 요청

Android 용 기본 앱을 작성하는 경우 AndroidManifest.xml 에서 네트워크 상태에 액세스 할 수있는 권한을 요청해야합니다.

  < uses-permission android : name = " android.permission.ACCESS_NETWORK_STATE " />

---

구성 옵션, 전체 API 및 일반적인 레시피에 대한 설명서를 참조하십시오.

기여

개선 및 추가 기능을 환영합니다. 큰 변경 사항은 코딩으로 점프하기 전에 토론 문제를 제출하십시오. 우리는 당신이 노력을 낭비하는 것을 싫어합니다.

버그를보고하는 경우 오류를 재현하는 코드를 포함하십시오. 다음은 Codesandbox의 시작 응용 프로그램입니다.

공식 스타일 가이드 대신에 포함 된 eslint 규칙을 따르고 더 예쁘게 사용하여 코드를 형식화하십시오.

잡집

Redux 사용은 v5를 유지합니다

사용자 정의 Redux-Persist 버전을 사용하려는 경우 예제 구성이 있습니다.

사전 예술

Redux Offline은 이전에 기존 라이브러리를 사용하여 앱을 구축하는 동안 발견 된 패턴의 증류입니다.

• 포브스 린데이의 레드 럭스-오르 타이스트
• 잭 스토리의 Redux-Persist

그들의 작업이 없으면 Redux 오프라인은 존재하지 않을 것입니다. 오프라인으로 Redux의 아이디어가 마음에 들지만 하위 수준 구성 요소에서 자신의 스택을 구축하려면 시작하기에 좋은 장소입니다.

특허

MIT