sync offline actions

actions de synchronisation

Il s'agit d'une bibliothèque native React créée pour gérer les synchronisations avec le backend. Imaginez qu'une action est envoyée et à ce moment-là, vous n'aviez pas Internet, avec cette bibliothèque, vous pourrez attraper cette ocurrence, enregistrer les informations liées à l'action et la dépêcher à nouveau lorsque la connexion sera restaurée. La meilleure partie de cela, c'est que cette bibliothèque est très facile à utiliser.

Commencer

Exigences

redux

react-redux

@react-native-community/netinfo -> Vous devrez installer cette bibliothèque avant, voici les étapes: Info net

@react-native-community/async-storage

Installez la bibliothèque

 yarn add sync-offline-actions

ou npm:

 npm install --save sync-offline-actions

Comment l'utiliser

Nous fournissons quatre outils afin que vous puissiez gérer le comportement de votre projet. Ce sont:

RestoreOfflineActions

Il s'agit d'un composant que vous devrez utiliser à la racine de votre projet. Il est totalement nécessaire que vous utilisiez ce composant à la racine de votre projet car il doit exister dans un composant qu'il est toujours vivant. Ce composant devra envelopper les autres composants que vous avez à la racine de votre projet, par exemple:

 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 >

Les sections d'accessoires sont totalement obligatoires de l'utiliser. Voyons la structure:

Vous passerez une gamme de sections de votre application. Chaque section pourrait avoir plusieurs actions que vous souhaitez envoyer si elles se sont produites. Par exemple, imaginez que je souhaite définir certaines actions pour la section d' Authorization de mon application et quelques actions pour la section de App . Je vais définir la condition pour chaque section de la valeur generalCondition . J'aurai un tableau comme ceci:

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

Chaque section a des actions associées. Chaque action aura un name (nous verrons l'importance de ce nom plus tard) et une associatedAction , ce dernier sera l'action que vous souhaitez expédier lorsque la connexion sera restaurée.

SaveActionTobesync

Ceci est une fonction pour enregistrer les moments, les actions ou les ocurrencys qui seront expédiés plus tard. Voici quelques exemples d'utilisation:

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

Le premier argument de la méthode sera le nom que vous avez utilisé avant pour déclarer les actions des sections dans le composant RestoreOfflineActions . Le deuxième argument sera un tableau d' arguments , lorsque la connexion sera restaurée, l' associatedAction associée au name du premier argument sera appelé avec la liste des arguments du deuxième argument. C'est plus simple qu'il n'y paraît.

Recommandation

Nous vous recommandons d'avoir un fichier constant où vous pouvez enregistrer les noms des actions afin que vous puissiez avoir ces noms plus organisés, quelque chose comme ceci:

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

Important

Tous les Ocurrencys seront supprimés après la restauration d'une connexion et que certaines actions seront envoyées. Ce n'est pas Mather est que les actions de certaines sections n'ont pas été envoyées, elles seront de toute façon supprimées. S'il vous plaît, faites-le nous savoir par un problème si vous n'êtes pas d'accord avec ce comportement.

Plus d'outils

Ces outils sont un plus pour cette bibliothèque, mais ils ne sont pas liés à la vraie fonctionnalité de cela, ils pourraient vous aider à vous faciliter le travail.

avecNetInfo

Il s'agit d'un hoc pour demander l'état de la connexion. Voici un exemple d'utilisation:

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

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

export default withNetInfo ( SomeComponent ) ;

Le Prop isConnected sera injecté comme un accessoire de SomeComponent en raison du HOC avecNetInfo, l'hélice sera mise à jour avec les modifications du réseau.

usenetinfo

Ceci est un CustomHook avec les mêmes fonctionnalités de withNetInfo , exemple d'utilisation:

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

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

Ensuite, Isconned sera mis à jour avec les derniers modifications de la connexion.

Grâce à

Le peuple de @react-native-community/netinfo

Contributif

1. Le fourrer
2. Créez votre succursale de fonctionnalité ( git checkout -b my-new-feature )
3. Commissez vos modifications ( git commit -am 'Add some feature' )
4. Push à la branche ( git push origin my-new-feature )
5. Créer une nouvelle demande de traction

À propos

Ce projet a été créé par Felipe Rodriguez Esturo. Il est géré par:

Licence

Sync-OffLine-Action est disponible sous la licence 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.