Wie haben nicht verwandte Komponenten Auswirkungen auf den App-Hauptstatus?

Question

Ich habe eine <Navbar /> Komponente an der Spitze der Render in meiner <App /> Komponente, und in der Navbar Theres ein Link zu einigen Login-Seite, wird dies vom Router behandelt. Wie kann ich den Status von den Änderungen, die in Login.js vorgenommen wurden, aufheben, wenn ich sie nicht wie in <Login loginHandler={this.loginHandler} /> traditionell weitergeben kann?

Jemand sagte mir, ich sollte die Funktionen zu einem separaten Modul abstrahieren und es zwischen beiden Komponenten teilen, aber ich bin zu viel von einem Anfänger und ich würde ein Beispiel brauchen. Hier

Dank

ist das Repo: https://github.com/charlesdarkwind/vitae-eternam

Hinzugefügt Komponenten:

im Grunde die Anmeldemethoden sind authHandler und authentifizieren, denn jetzt justs er den Zustand für die Benutzer-ID (uid) Wich eingestellt ich möchte

App.js global sein:

import React from 'react'; 
import NavbarTop from './NavbarTop'; 

class App extends React.Component { 
    constructor() { 
    super();  
    this.authenticate = this.authenticate.bind(this); 
    this.authHandler = this.authHandler.bind(this); 
    } 

    state = { 
    items: {}, 
    order: {}, 
    uid: null 
    }; 

    render() { 
    return (
     <div> 
     <NavbarTop /> 
     </div>   
    ); 
    } 
} 

export default App; 

Login.js:

import React from 'react'; 
import { Button } from 'react-bootstrap'; 
import base from '../base'; 
import NavbarTop from './NavbarTop'; 

class Login extends React.Component { 
    componentDidMount() { 
     base.onAuth((user) => { 
      if(user) { 
       this.authHandler(null, { user }); 
      } 
     }); 
    } 

authenticate(provider) { 
    console.log(`Tentative de connexion avec ${provider}`); 
    base.authWithOAuthPopup(provider, this.authHandler); 
    } 

    authHandler(err, authData) { 
    console.log(err, authData); 
    if(err) { 
     console.error(err); 
     return; 
    } 

    // grab the cart/order info 
    const orderRef = base.database().ref(this.props.uid); //NEED SOME ID REFERING TO CURRENT ORDER CART 

    // query the firebase ref once for the cart data and set the state 
    orderRef.once('value', (snapshot) => { 
     const data = snapshot.val() || {}; 
     this.setState({ 
     uid: authData.user.uid 
     }); 
    }); 
    } 

    render() { 
     return (
      <div> 
       <NavbarTop /> 
       <div className="loginWrap"> 
        <nav className="login"> 
         <p>Connexion</p> 
         <Button bsStyle="primary" className="facebook" onClick={() => this.props.authenticate('facebook')}>Connexion avec FaceBook</Button> 
         <Button bsStyle="danger" className="google" onClick={() => this.props.authenticate('google')}>Connexion avec Google</Button> 
       </nav>    
       </div> 
      </div> 
     ) 
    } 
} 

export default Login; 

Answer 1

Wenn Sie Bibliotheken ohne Statusverwaltung reagieren verwenden dann Requisiten ist der einzige Weg, um Daten um zu bestehen. Genauer gesagt ist es die einzige richtige Art der Datenübermittlung, technisch können Sie umgehen, indem Sie Daten an das window Objekt anschließen, um es global zu machen oder indem Sie localStorage verwenden. Ich würde mich vom Fensterobjekt fernhalten, aber localStorage ist eine praktikable Option.

Dass gesagt wird Sie wahrscheinlich wie redux und MobX Blick in State Management Bibliotheken starten soll. Sie werden aus genau diesem Grund verwendet und geben Ihrer Anwendung eine bessere Möglichkeit, persistente Daten- und Datenzugänglichkeit über Komponenten hinweg zu implementieren.

Wenn Sie nur verfolgen müssen, ob der Benutzer angemeldet ist oder nicht, dann können Sie mit localStorage auskommen, aber wenn Sie das gleiche Problem mit anderen Teilen Ihrer Anwendung bekommen und mehr und mehr Daten machen müssen persistent/global Dann sollten Sie eine Zustandsverwaltungsbibliothek verwenden.