sync offline actions

Sync-Offline-actions

これは、バックエンドとの同期を処理するために作成されたReactネイティブライブラリです。いくつかのアクションが派遣され、その瞬間にインターネットがなかったと想像してください。このライブラリを使用すると、その発生をキャッチし、アクションに関連する情報を保存し、接続が復元されているときに再び派遣できるようになります。これの最大の部分は、このライブラリが非常に簡単に使用できるということです。

はじめる

要件

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コンポーネントのセクションのアクションを宣言するために以前に使用した名前です。 2番目のargumentsは、接続が復元されると、最初の引数のnameに関連付けられたassociatedAction 2番目の引数のリストのリストで呼び出されます。見た目よりも簡単です。

おすすめ

アクションの名前を保存できる一定のファイルを使用することをお勧めします。

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

重要

接続が復元され、いくつかのアクションが派遣された後、すべての発生率が削除されます。それは、いくつかのセクションが派遣されていない行動ではなく、とにかく削除されます。この動作に同意しない場合は、問題を通じてお知らせください。

その他のツール

このツールはこのライブラリにとってプラスですが、これの実際の機能とは関係ありません。作業を容易にするのに役立ちます。

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の小道具として注入されます。Propは、ネットワークの変更で更新されます。

usenetinfo

これは、 withNetInfoと同じ機能を持つカスタムフックです。

 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. 新しいプルリクエストを作成します

について

このプロジェクトは、フェリペ・ロドリゲス・エストロによって作成されました。それは次のようにされています：

ライセンス

Sync-Offline-actionsは、 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.