redux offline

Die Betreuer gesucht

Persistenter Redux Store für Requemedaceable ™ ️ Offline-First-Anwendungen mit erstklassiger Unterstützung für eine optimistische Benutzeroberfläche. Verwendung mit React, React Native oder als eigenständiger Zustandsbehälter für jede Web -App.

Redux Offline wird nun von einem Community -geprägten Team gepflegt. Die neuen Versionen der Bibliothek sind jetzt unter der NPM-Organisation @redux-offline verfügbar. Vielen Dank an @jevakallio für die Erstellung dieser erstaunlichen Bibliothek.

Schneller Start

1. Installieren Sie mit NPM (oder Garn)

Für React Native 0,60+

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

Für React Native Expo SDK 36

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

Für React Native <= 0,59

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

2. Fügen Sie den offline -Store -Enhancer mit 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.. Dekorieren Sie Aktionen mit Offline -Metadaten

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

Wenn die Effekt -Nutzlast etwas anderes als JSON ist, können Sie den Körper und die Header übergeben:

 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. (Reagieren Sie native Android React) Bitten Sie die Erlaubnis, den Netzwerkstatus zu lesen

Wenn Sie eine native App für Android schreiben, müssen Sie sicherstellen, dass Sie die Berechtigung beantragen, in Ihrem AndroidManifest.xml zugreifen zu können:

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

---

Siehe Dokumentation für Konfigurationsoptionen, die vollständige API und gemeinsame Rezepte.

Beitragen

Verbesserungen und Ergänzungen willkommen. Für große Änderungen geben Sie bitte ein Diskussionsproblem ein, bevor Sie zur Codierung springen. Wir würden Sie hassen, um die Mühe zu verschwenden.

Wenn Sie einen Fehler melden, geben Sie bitte Code an, der den Fehler reproduziert. Hier ist eine Startanwendung auf Codesandbox.

Befolgen Sie anstelle eines formellen Stilhandbuchs die enthaltenen Eslint -Regeln und verwenden Sie schöner, um Ihren Code zu formatieren.

Verschiedenes

Verwendung mit Redux persist v5

Falls Sie eine benutzerdefinierte Redux-Persist-Version verwenden möchten, gibt es eine Beispielkonfiguration.

Vorherige Kunst

Redux Offline ist eine Destillation von Mustern, die beim Erstellen von Apps mit zuvor vorhandenen Bibliotheken entdeckt wurden:

• Forbes Lindesays Redux-Optimist
• Zack Story's Redux-Persist

Ohne ihre Arbeit würde Redux offline nicht existieren. Wenn Sie die Ideen hinter Redux offline mögen, aber Ihren eigenen Stapel aus Komponenten auf niedrigerer Ebene bauen möchten, sind dies gute Orte zum Starten.

Lizenz

MIT