Fehler bei der Verwendung von Aktionen in react-redux darstellende Komponente

Question

Ich bin neu in Redux und Probleme mit meinem Kopf um Präsentation und Container-Komponenten.

Relevante Stapel:

• reagieren v0.14.8
• reagieren-native v0.24.1
• redux v3.5.2
• reagieren-redux v4.4.5

Das Problem:

Ich habe eine Login-Button-Komponente, die bei der Überprüfung überprüft den Anmeldestatus und ruft die onSuccessfulLogin Aktion, die den Status mit den Facebook-Anmeldeinformationen des Benutzers aktualisiert.

Wenn ich jedoch versuche, diese in separate Präsentations-/Container-Komponenten zu trennen, kann ich die Aktion onSuccessfulLogin nicht aufrufen: Error: onSuccessfulLogin is not defined.

Was mache ich hier falsch? Ich könnte mir vorstellen, dass es etwas Einfaches gibt, das ich nicht verstehe mit der Beziehung zwischen den beiden Komponenten und der connect() Funktion.

Präsentations Komponente (Login.js)

import React, { PropTypes } from "react-native"; 
import FBLogin from "react-native-facebook-login"; 
import UserActions from "../users/UserActions"; 

class LoginPage extends React.Component { 

    render() { 

     const { userData, onSuccessfulLogin } = this.props; 

     return (
      <FBLogin 
       permissions={["email","user_friends"]} 
       onLoginFound= { data => { 
        onSuccessfulLogin(data.credentials); 
       }} 
       /> 
     ) 
    } 
}; 

export default LoginPage; 

Container Komponente (LoginContainer.js)

import { connect } from 'react-redux'; 
import LoginPage from "../login/LoginPage"; 
import UserActions from "../users/UserActions"; 

const mapDispatchToProps = (dispatch) => { 
    return { 
    onSuccessfulLogin: (userData) => { 
     dispatch(UserActions.userLoggedIn(userData)) 
    } 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
    userData: state.userData 
    } 
} 

const LoginContainer = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(LoginPage); 

export default LoginContainer; 

Auch wenn ich wollte die aktualisierte state.userData zugänglich für die LoginPage machen Komponente, wie würde ich das tun? Jede Hilfe wird geschätzt!

Gelöst! Wenn ES6-Klassen, sind Sie erforderlich super(props) in einer Konstruktor-Methode aufrufen, um den Behältereigenschaften im angeschlossenen Präsentations-Komponente zuzugreifen:

class LoginPage extends React.Component { 
    constructor(props){ 
     super(props); 
    } 

    render(){  
     // ... 
    } 
} 

Answer 1

Ihre Container-Komponente soll ein Komponente und es werden muss eine Renderfunktion mit den dumb/presentational Komponenten haben, die Sie rendern möchten.

import { connect } from 'react-redux'; 
import LoginPage from "../login/LoginPage"; 
import UserActions from "../users/UserActions"; 


class LoginContainer extends React.Component { 
    constructor(props){ 
     super(props); 
    } 
    render() { 
     return (
      <LoginPage userData={this.props.userData} 
       onSuccessfulLogin={this.props.onSuccessfulLogin} 
       /> 
     ) 
    } 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
    onSuccessfulLogin: (userData) => { 
     dispatch(UserActions.userLoggedIn(userData)) 
    } 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
    userData: state.userData 
    } 
} 


export default connect(
    mapStateToProps, 
    mapDispatchToProps 
)(LoginPage);