How do unrelated components affect the underlying state of the application?

I have a component <Navbar />at the top of the rendering in my component <App />, and in Navbar, a link to some login page that the router is processing. How can I raise the state from changes made in Login.js, if I can not pass it, it supports the traditional way, as in <Login loginHandler={this.loginHandler} />?

Someone told me that I have to abstract the functions of a single module and share it between both components, but I react too much to a newbie, and I need some kind of example.

thank

Here is the repo: https://github.com/charlesdarkwind/vitae-eternam

Components Added:

basically the login methods are authHandler and authentication, for now it just sets the state for the user id (uid) that I want to be global

App.js:

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;
+4
source share
1 answer

If you use the reaction without any state management libraries, then details are the only way to transfer data. Actually, to be more precise, this is the only way to transfer data correctly , technically you can get around this by associating the data with an object windowto make it global or using localStorage . I would stay away from the window object, but localStorage is a viable option.

, , , redux MobX. , , .

, , localStorage, /global, .

+1

Source: https://habr.com/ru/post/1676030/


All Articles