sync offline actions

동기화 된 플린-액션

이것은 백엔드와의 동기화를 처리하기 위해 생성 된 React Native 라이브러리입니다. 일부 조치가 파견되었다고 상상해보십시오. 그 순간 인터넷이 없었습니다.이 라이브러리를 사용하면 해당 Ocurrency를 잡고 작업과 관련된 정보를 저장하고 연결이 복원 될 때 다시 파견 할 수 있습니다. 이것의 가장 좋은 점은이 라이브러리가 사용하기가 매우 쉽다는 것입니다.

시작하기

요구 사항

redux

react-redux

@react-native-community/netinfo > 이전 에이 라이브러리를 설치해야합니다. 다음 단계는 다음과 같습니다.

@react-native-community/async-storage

라이브러리를 설치하십시오

 yarn add sync-offline-actions

또는 NPM :

 npm install --save sync-offline-actions

사용하는 방법

프로젝트의 동작을 처리 할 수 ​​있도록 4 가지 도구를 제공합니다. 그게 :

회복 된 반응

이것은 프로젝트의 루트에서 사용해야하는 구성 요소입니다. 이 구성 요소는 프로젝트의 루트에서 항상 살아있는 구성 요소에 존재해야하기 때문에 완전히 필요합니다. 이 구성 요소는 프로젝트의 루트에있는 다른 구성 요소를 랩핑해야합니다.

 import { RestoreOfflineActions } from 'sync-offline-actions' ;
import actions from '@redux/some/actions' ;

// Some stuff

// Render/return
    < RestoreOfflineActions
      sections = { [
        { generalCondition : /* Condition of something */ , actions : { name : 'login' , associatedAction : actions . login } }
      ] } >
        < AppNavigator />
  </ RestoreOfflineActions >

소품 sections 이것을 사용해야합니다. 구조를 보자 :

앱의 배열을 전달합니다. 각 섹션에는 발생한 경우 파견하려는 여러 조치가있을 수 있습니다. 예를 들어, 내 앱의 Authorization 섹션과 App 섹션에 대한 조치에 대한 조치를 설정하고 싶다고 상상해보십시오. 각 섹션의 조건을 generalCondition 값으로 설정합니다. 나는 다음과 같은 배열을 가질 것이다.

 sections={[
   { generalCondition: /* Condition to know if the user is not logged in */, actions: [{ name: 'someAction', associatedAction: actions.someAction }] },
   { generalCondition: /* Condition to know if the user is logged in */, actions: [{ name: 'otherAction', associatedAction: actions.otherAction }, {name: 'otherAction2', associatedAction: actions.otherAction2 }] }
]}

각 섹션에는 관련 작업이 있습니다. 모든 조치에는 name 있으며 (나중에이 이름의 중요성을 보게 될 것입니다) associatedAction 있습니다. 마지막 것은 연결이 복원 될 때 파견하고자하는 조치입니다.

SaveActionTobesync

이것은 나중에 발송 될 순간, 행동 또는 옥외를 저장하는 기능입니다. 다음은 사용의 몇 가지 예입니다.

 // actions.js

import { saveActionToBeSync } from 'sync-offline-actions' ;

// Some code

// Imagine that you have an action and that action which send a request to back, that action will fail and you will want to save that request to do it later. You will do

saveActionToBeSync ( 'someAction' , [ arg1 , arg2 , arg3 ] ) ;

//Thunk Action example

function myThunkActionCreator ( id , someValue ) {
 return async ( dispatch , getState ) => {
  dispatch ( { type : "REQUEST_STARTED" } ;
  let response ;
  try {
      response = myAjaxLib . post ( "/someEndpoint" , { id , data : someValue } ) ;
  } catch ( error ) {
      saveActionToBeSync ( 'someThunkAction' , [ id , someValue ] ) ; // here we register the failed event that want to dispatch when the connection is restored
      dispatch ( { type : "REQUEST_FAILED" , error } ) ;
  }
  dispatch ( { type : "REQUEST_SUCCEEDED" , payload : response } ) ;
 }
}

// redux-recompose example

login : ( authData : AuthData ) => ( {
    type : actions . LOGIN ,
    target : TARGETS . CURRENT_USER ,
    service : AuthService . login ,
    payload : authData ,
    successSelector : ( ) => null ,
    injections : [
      withPostFailure ( ( ) => {
        //Check the reason of the failure
        saveActionToBeSync ( 'login' , [ authData ] ) ;
      } )
    ]
  } ) ,

이 메소드의 첫 번째 인수는 RestoreOfflineActions 구성 요소에서 섹션의 동작을 선언하기 전에 사용한 이름입니다. 두 번째 인수는 arguments 이 복원되면 첫 번째 인수의 name 과 관련된 associatedAction 두 번째 인수의 인수 목록과 함께 호출됩니다. 외모보다 ​​더 간단합니다.

추천

동작 이름을 저장할 수있는 상수 파일이있어서 다음과 같은 이름을 더 구성 할 수 있습니다.

 // some constant file
export const OFFLINE_ACTION_NAMES = {
  SOME_ACTION : "someAction" ,
  OTHER_ACTION : "otherAction" ,
} ;

중요한

연결이 복원되고 일부 조치가 발송 된 후 모든 Ocurrencys가 삭제됩니다. 그것은 일부 섹션의 행동이 파견되지 않았으며 어쨌든 삭제 될 것입니다. 이 행동에 동의하지 않으면 문제를 통해 알려주십시오.

더 많은 도구

이 도구는이 라이브러리의 장점이지만, 이것의 실제 기능과 관련이 없으므로 작업을보다 쉽게 ​​만들 수 있습니다.

WithnetInfo

이것은 연결 상태를 요청하는 사악한 것입니다. 다음은 사용의 예입니다.

 import { withNetInfo } from "sync-offline-actions" ;

class SomeComponent extends Component {
  /*some code*/
  someMethod = ( ) => {
    const { isConnected } = this . props ;
    /*Do something*/
  } ;
}

export default withNetInfo ( SomeComponent ) ;

소품 isConnected 소품은 hoc withnetinfo로 인해 SomeComponent 의 소품으로 주입되며, 소품은 네트워크 변경으로 업데이트됩니다.

usenetinfo

이것은 withNetInfo 의 기능과 동일한 기능을 사용하는 CustomHook입니다.

 import { useNetInfo } from "sync-offline-actions" ;

const SomeFunction = ( ) => {
  const isConnected = useNetInfo ( ) ;
  // More of the function
} ;

그런 다음 ISConnected는 연결의 마지막 변경 사항으로 업데이트됩니다.

감사합니다

@react-native-community/netinfo 의 사람들

기여

1. 포크
2. 기능 분기 생성 ( git checkout -b my-new-feature )
3. 변경 사항을 커밋하십시오 ( git commit -am 'Add some feature' )
4. 지점으로 밀기 ( git push origin my-new-feature )
5. 새 풀 요청을 만듭니다

에 대한

이 프로젝트는 Felipe Rodriguez Esturo에 의해 만들어졌습니다. 다음과 같이 화를냅니다.

특허

동기화 된 플린-액션은 MIT 라이센스에 따라 사용할 수 있습니다.

 Copyright (c) 2020 Felipe Rodriguez Esturo <[email protected]>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.