sync offline actions

Sync-offline-actions

Ini adalah perpustakaan asli React yang dibuat untuk menangani sinkronisasi dengan backend. Bayangkan beberapa tindakan dikirim dan pada saat itu Anda tidak memiliki internet, dengan perpustakaan ini Anda akan dapat menangkap ocurrency itu, menyimpan informasi yang terkait dengan tindakan dan mengirimnya lagi ketika koneksi sedang dipulihkan. Bagian terbaik dari ini, perpustakaan ini sangat mudah digunakan.

Memulai

Persyaratan

redux

react-redux

@react-native-community/netinfo > Anda harus menginstal perpustakaan ini sebelumnya, berikut adalah langkah-langkahnya: info bersih

@react-native-community/async-storage

Instal perpustakaan

 yarn add sync-offline-actions

atau NPM:

 npm install --save sync-offline-actions

Cara menggunakannya

Kami menyediakan empat alat sehingga Anda dapat menangani perilaku proyek Anda. Itu adalah:

RESTOREOFFLINECTIONS

Ini adalah komponen, yang harus Anda gunakan di akar proyek Anda. Sangat penting bahwa Anda menggunakan komponen ini di akar proyek Anda karena harus ada dalam komponen yang selalu hidup. Komponen ini harus membungkus komponen lain yang Anda miliki di akar proyek Anda, misalnya:

 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 prop sepenuhnya wajib untuk menggunakan ini. Mari kita lihat strukturnya:

Anda akan melewati serangkaian bagian aplikasi Anda. Setiap bagian dapat memiliki beberapa tindakan yang ingin Anda kirim jika mereka terjadi. Misalnya, bayangkan bahwa saya ingin menetapkan beberapa tindakan untuk bagian Authorization aplikasi saya dan beberapa tindakan untuk bagian App . Saya akan mengatur kondisi untuk setiap bagian dalam nilai generalCondition . Saya akan memiliki array seperti ini:

 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 }] }
]}

Setiap bagian memiliki tindakan terkait. Setiap tindakan akan memiliki name (kita akan melihat pentingnya nama ini nanti) dan associatedAction , yang terakhir ini akan menjadi tindakan yang ingin Anda kirim ketika koneksi dipulihkan.

SaveActionTobesync

Ini adalah fungsi untuk menyimpan momen, tindakan atau ocurrencys yang akan dikirim nanti. Berikut adalah beberapa contoh penggunaan:

 // 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 ] ) ;
      } )
    ]
  } ) ,

Argumen pertama dari metode ini adalah nama yang Anda gunakan sebelumnya untuk mendeklarasikan tindakan bagian dalam komponen RestoreOfflineActions . Argumen kedua adalah array arguments , ketika koneksi dipulihkan, associatedAction yang terkait dengan name argumen pertama akan dipanggil dengan daftar argumen argumen kedua. Ini lebih sederhana dari yang terlihat.

Rekomendasi

Kami menyarankan Anda untuk memiliki file konstan di mana Anda dapat menyimpan nama -nama tindakan sehingga Anda dapat memiliki nama -nama itu lebih terorganisir, sesuatu seperti ini:

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

Penting

Semua Ocurrencys akan dihapus setelah koneksi dipulihkan dan beberapa tindakan dikirim. Itu tidak Mather adalah tindakan beberapa bagian tidak dikirim, mereka akan dihapus. Tolong, beri tahu kami melalui masalah jika Anda tidak setuju dengan perilaku ini.

Lebih banyak alat

Alat ini merupakan nilai tambah untuk perpustakaan ini, tetapi mereka tidak terkait dengan fungsionalitas nyata dari ini, mereka dapat membantu Anda membuat pekerjaan Anda lebih mudah.

dengan Netinfo

Ini adalah HOC untuk meminta keadaan koneksi. Berikut adalah contoh penggunaan:

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

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

export default withNetInfo ( SomeComponent ) ;

Prop isConnected akan disuntikkan sebagai penyangga SomeComponent karena hoc withinfo, prop akan diperbarui dengan perubahan jaringan.

usenetinfo

Ini adalah customhook dengan fungsionalitas yang sama dari withNetInfo , contoh penggunaan:

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

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

Kemudian, ISConnected akan diperbarui dengan perubahan terakhir dari koneksi.

Berkat

Orang-orang @react-native-community/netinfo

Berkontribusi

1. Membayar itu
2. Buat cabang fitur Anda ( git checkout -b my-new-feature )
3. Komit perubahan Anda ( git commit -am 'Add some feature' )
4. Dorong ke cabang ( git push origin my-new-feature )
5. Buat Permintaan Tarik Baru

Tentang

Proyek ini dibuat oleh Felipe Rodriguez Esturo. Itu diolah oleh:

Lisensi

Sync-offline-actions tersedia di bawah lisensi 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.