Zugriff auf Daten von Aktionen innerhalb von Komponenten | Redux

Question

Hey alle (Entschuldigung für noob Frage)!

Ich möchte meine navbar den Benutzernamen anzeigen, die ich von meiner API bekomme. Und ich kann in meiner Konsole sehen, dass ich die user object mit dem Schlüssel name bekomme.

So frage ich mich, was ist die beste Praxis den Zugang zu den Daten zu bekommen? Hier sind einige Schnipsel von meiner Navbar übrigens!

class MainNavbar extends Component { 
    logout(e) { 
    e.preventDefault() 
    this.props.logout() 
    } 
    render() { 
    return (
     <Navbar inverse collapseOnSelect> 
     <Navbar.Header> 
      <Navbar.Brand> 
      <div> 
       <img id="logo" alt="Qlocx Logo" src={qlocx} /> 
      </div> 
      </Navbar.Brand> 
      <Navbar.Toggle /> 

und unten:

MainNavbar.propTypes = { 
    logout: React.PropTypes.func.isRequired 
    // I guess I need to do something here 
} 

function mapStateToProps(state) { 
    return { 
    auth: state.auth 
    // And here as well, but what? :O 
    } 
} 

export default connect(mapStateToProps, { logout })(MainNavbar) 

Vielen Dank für diese schlechte und nooby Frage zu lesen. Ich schätze all die Hilfe, die ich bekommen kann!

Danke!

Answer 1

Um den Benutzernamen aus der Redux-Zustand in den Requisiten der Komponente abzubilden, müssen Sie zu:

es In den propTypes.

MainNavbar.propTypes = { 
    logout: React.PropTypes.func.isRequired, 
    name: React.PropTypes.string 
} 

Ordnen Sie die neue Stütze aus dem Redux-Zustand zu. Sie müssen prüfen, ob diese korrekt von Ihrem Zustand abbildet

function mapStateToProps(state) { 
    return { 
    auth: state.auth 
    name: state.user.name 
    } 
} 

anzuzeigen Bedingtes den Namen in Ihrer Komponente.

<Navbar.Header> 
    <Navbar.Brand> 
    <div> 
     <img id="logo" alt="Qlocx Logo" src={qlocx} /> 
    </div> 
    </Navbar.Brand> 
    {this.props.name ? this.props.name : null} 
    <Navbar.Toggle /> 

Answer 2

Möglicherweise benötigen Sie <Provider store>, dann können Sie Redux speichern in der Komponente verwenden.

https://github.com/reactjs/react-redux/blob/master/docs/api.md#provider-store