sync offline actions
1.0.0
Dies ist eine reag -native Bibliothek, die für die Verarbeitung von Synchronisierungen mit Backend erstellt wurde. Stellen Sie sich vor, einige Aktionen werden versandt und in diesem Moment haben Sie kein Internet. Mit dieser Bibliothek können Sie diese Okurrenschaft aufnehmen, die Informationen zur Aktion speichern und erneut versenden, wenn die Verbindung wiederhergestellt wird. Das Beste daran ist, dass diese Bibliothek sehr einfach zu verwenden ist.
redux
react-redux
@react-native-community/netinfo > Sie müssen diese Bibliothek zuvor installieren. Hier sind die Schritte: Netzinfo
@react-native-community/async-storage
yarn add sync-offline-actions
oder NPM:
npm install --save sync-offline-actions
Wir bieten vier Tools, damit Sie das Verhalten Ihres Projekts bewältigen können. Das sind:
Dies ist eine Komponente, die Sie in der Wurzel Ihres Projekts verwenden müssen. Es ist absolut notwendig, dass Sie diese Komponente in der Wurzel Ihres Projekts verwenden, da sie in einer Komponente existieren muss, die sie immer lebt. Diese Komponente muss die anderen Komponenten einwickeln, die Sie in der Wurzel Ihres Projekts haben, zum Beispiel:
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 > Die Prop sections sind völlig obligatorisch, um dies zu verwenden. Lassen Sie uns die Struktur sehen:
Sie werden eine Reihe von Abschnitten Ihrer App übergeben. Jeder Abschnitt könnte mehrere Aktionen haben, die Sie entsenden möchten, wenn er stattgefunden hat. Stellen Sie sich beispielsweise vor, ich möchte einige Aktionen für den Abschnitt der Authorization meiner App und einige Aktionen für den App -Abschnitt festlegen. Ich werde die Bedingung für jeden Abschnitt im generalCondition festlegen. Ich werde ein Array wie dieses haben:
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 }] }
]}
Jeder Abschnitt hat Maßnahmen zugeordnet. Jede Aktion hat einen name (wir werden die Bedeutung dieses Namens später sehen) und eine associatedAction , diese letzte ist die Aktion, die Sie beim Wiederherstellen der Verbindung entsenden möchten.
Dies ist eine Funktion, um die Momente, Aktionen oder Ocurrencys zu speichern, die später versandt werden. Hier sind einige Beispiele für die Verwendung:
// 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 ] ) ;
} )
]
} ) , Das erste Argument der Methode ist der Name, den Sie zuvor verwendet haben, um die Aktionen der Abschnitte in RestoreOfflineActions -Komponente zu deklarieren. Das zweite Argument wird ein Array von arguments sein, wenn die Verbindung wiederhergestellt wird, wird die mit dem name des erste Arguments verbundene associatedAction mit der Liste der Argumente des zweiten Arguments aufgerufen. Es ist einfacher als es aussieht.
Wir empfehlen Ihnen, eine konstante Datei zu haben, in der Sie die Namen der Aktionen speichern können, damit Sie diese Namen mehr organisieren können, so etwas wie folgt:
// some constant file
export const OFFLINE_ACTION_NAMES = {
SOME_ACTION : "someAction" ,
OTHER_ACTION : "otherAction" ,
} ;Alle Ocurrencys werden nach der Wiederherstellung einer Verbindung gelöscht und einige Aktionen versandt. Es ist nicht Mather, dass die Handlungen einiger Abschnitte nicht versandt wurden, sie werden trotzdem gelöscht. Bitte teilen Sie uns dies durch ein Problem mit, wenn Sie diesem Verhalten nicht zustimmen.
Diese Tools sind ein Plus für diese Bibliothek, sind jedoch nicht mit der tatsächlichen Funktionalität in Verbindung gebracht. Sie können Ihnen helfen, Ihre Arbeit zu erleichtern.
Dies ist ein HOC, um nach dem Zustand der Verbindung zu fragen. Hier ist ein Beispiel für die Verwendung:
import { withNetInfo } from "sync-offline-actions" ;
class SomeComponent extends Component {
/*some code*/
someMethod = ( ) => {
const { isConnected } = this . props ;
/*Do something*/
} ;
}
export default withNetInfo ( SomeComponent ) ; Die isConnected wird als Requisite von SomeComponent injiziert, da der HOC mit NETINFO die Requisite mit den Netzwerkänderungen aktualisiert wird.
Dies ist ein CustomHook mit der gleichen Funktionalität von withNetInfo , Beispiel für die Verwendung:
import { useNetInfo } from "sync-offline-actions" ;
const SomeFunction = ( ) => {
const isConnected = useNetInfo ( ) ;
// More of the function
} ;Dann wird Isconnected mit den letzten Änderungen der Verbindung aktualisiert.
Die Menschen von @react-native-community/netinfo
git checkout -b my-new-feature ).git commit -am 'Add some feature' )git push origin my-new-feature )Dieses Projekt wurde von Felipe Rodriguez Esturo erstellt. Es ist mantiniert von:
Sync-offline-Actions ist im Rahmen der MIT-Lizenz verfügbar.
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.
