react-reduxプレゼンテーションコンポーネントのアクションを使用する際に問題が発生する

Question

プレゼンテーションとコンテナコンポーネントの周りに頭を抱えてしまいました。

関連するスタック：

• が反応v0.14.8
• 反応ネイティブv0.24.1
• Reduxののv3.5.2
• 反応-Reduxのv4.4.5

問題：

私は、レンダリング時にログインステータスをチェックし、ユーザーのFacebook資格情報で状態を更新するonSuccessfulLoginアクションを呼び出すログインボタンコンポーネントを持っています。

ただし、これを独立したプレゼンテーション/コンテナコンポーネントに分割しようとすると、onSuccessfulLoginアクション：Error: onSuccessfulLogin is not definedを呼び出すことができません。

私はここで間違っていますか？私は、2つのコンポーネントとconnect()関数の関係を理解し​​ていないという単純なものがあると思います。

表現的コンポーネント（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; 

コンテナコンポーネント（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; 

また、私はLoginPageに更新state.userDataアクセスできるようにしたい場合コンポーネント、どうしたらいいですか？どんな助けもありがとう！

解決済み！ ES6クラスを使用する場合は、あなたが接続されているプレゼンテーションコンポーネントでコンテナのプロパティにアクセスするために、コンストラクタメソッドでsuper(props)を呼び出すために必要だ：

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

    render(){  
     // ... 
    } 
} 

Answer 1

があなたのコンテナコンポーネントがコンポーネント、それことになっていますレンダリング機能と、レンダリングするダン/プレゼンテーションコンポーネントが必要です。

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);