redux offline

Les mainteneurs voulaient

Store redux persistant pour les applications Offline First Offline, avec un support de première classe pour une interface utilisateur optimiste. Utilisez avec React, React Native ou comme conteneur d'état autonome pour toute application Web.

Redux Offline est maintenant entretenu par une équipe axée sur la communauté. Les nouvelles versions de la bibliothèque seront désormais disponibles sous l'organisation NPM @redux-offline . Un grand merci à @jevakallio d'avoir créé cette bibliothèque incroyable en premier lieu.

Démarrage rapide

1. Installer avec NPM (ou fil)

Pour React Native 0.60+

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

Pour React Native Expo SDK 36

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

Pour React Native <= 0,59

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

2. Ajouter l'ampliseur de magasin offline avec compose

 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. Décorez les actions avec des métadonnées hors ligne

 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 } }
    }
  }
} ) ;

Si la charge utile de l'effet est autre chose que JSON, vous pouvez passer le corps et les en-têtes:

 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) Demandez à la permission de lire l'état du réseau

Si vous rédigez une application native pour Android, vous devrez vous assurer de demander l'autorisation d'accéder à l'état du réseau dans votre AndroidManifest.xml :

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

---

Voir la documentation pour les options de configuration, l'API complète et les recettes communes.

Contributif

Les améliorations et les ajouts sont les bienvenus. Pour les changements importants, veuillez soumettre un problème de discussion avant de passer au codage; Nous détestions que vous gaspillez l'effort.

Si vous signalez un bogue, veuillez inclure le code qui reproduit l'erreur. Voici une application de départ sur codes et boîte.

Au lieu d'un guide de style formel, suivez les règles d'Eslint incluses et utilisez plus jolie pour formater votre code.

MISCELLANEA

Utilisation avec redux persist v5

Dans le cas où vous souhaitez utiliser une version personnalisée Redux-Persist, il existe un exemple de configuration.

Art antérieur

Redux Offline est une distillation des modèles découverts lors de la création d'applications à l'aide de bibliothèques précédemment existantes:

• Redux-optimiste de Forbes Lindesay
• Persiste redux de Zack Story

Sans leur travail, Redux hors ligne n'existerait pas. Si vous aimez les idées derrière Redux hors ligne, mais que vous souhaitez construire votre propre pile à partir de composants de niveau inférieur, ce sont de bons endroits pour commencer.

Licence

Mit