Wie teilen Sie den Anmeldestatus über Komponenten in React Native?

Question

In vue.js verwende ich , um Benutzerdaten zu speichern und Benutzer Login-Status zu teilen. In React.js gibt es einen Kontext, um Daten bequem zu teilen.

Aber ich habe kein Dokument darüber in React Native finden, was ist der richtige Weg, dies in React Native zu tun?

Answer 1

Ich verwende Reflux für diesen Zweck (https://github.com/reflux/refluxjs) sowohl in React & React Native.

Die Art, wie es funktioniert, ist, dass Sie einen Speicher mit Ihrem eingeloggten Status, Benutzerdaten usw. einrichten. Wenn sich etwas an diesen Werten ändert (entweder durch einen Ajax-Aufruf, eine Benutzeraktion usw.), können Sie ein Ereignis auslösen der Speicher mit einem Objekt als Argument. (Der Methodenname ist 'trigger').

import Reflux from 'reflux' 
import LoginActions from '../actions/LoginActions' 

var LoginStore = Reflux.createStore({ 

isLoggedIn: false, 
profile: {}, 

init: function() { 
    // Do some initialization, e.g. checking if you've set some login information or tokens in local storage 
}, 

listenables: [LoginActions], 

loginUser: function(e) { 
    // Do some call to a server to try and authenticate 
    // fetch(...) 
    if (fetch_result = true) { 
     this.isLoggedIn = true; 
     this.trigger({type: "LOGIN_STATUS", loggedIn: true}); 
    } 
}, 

logoutUser: function(e) { 
// ... 
} 

Die LoginActions oben verwiesen wird, sind ein sehr einfaches Modul, zum Beispiel:

import Reflux from 'reflux' 
export default LoginActions = Reflux.createActions([ 
    'loginUser', 
    'logoutUser', 
]); 

Ihre Hauptanwendung der Speicherereignisse hören sollte, durch einen Listener hinzufügen und das Objekt basierend auf (die Sie Definieren Sie sich selbst) Sie können Zustände aktualisieren oder eine Logik ausführen; z.B.

componentDidMount() { 
    this.login = LoginStore.listen(this.loginStoreListener.bind(this)); 
} 

componenWillUnmount() { 
    // Remove the listener on unmounting 
    this.login(); 
} 

loginStoreListener(obj) { 
    switch (obj.type) { 
     case "LOGIN_STATUS": 
     this.setState({loggedIn: obj.loggedIn}) 
     break; 
     case "PROFILE": 
     this.setState({profile: obj.profile}) 
     break; 
    } 
} 

In der Hauptanwendung auf der Grundlage des LoggedIn Zustand können Sie dann, die zum Beispiel in Kombination mit Navigator zeigen Ansichten entscheiden.