Redux/Reactの認定コンポーネントセットアップ

Question

私のReact/Redux認可設定に深刻な問題があり、私は迷っています。現在のエラーは次のとおりです。

HomeHeader.js 8595：？26キャッチされないにReferenceError：ディスパッチが定義されていない

がここにたくさん間違ってありますし、任意の助けをいただければ幸いです。

登録するコンポーネントとログインするコンポーネントが2つ作成されています。 AuthorizationLoginコンポーネントは私が最初に取り組んでいるものです。

フォームフィールドを作成し、変数credを入力し、HomeHeaderコンポーネントを上にして、次にHomePageコンテナまでイベント情報を渡す方法を知りません。すべての認証コンポーネントを1つの巨大なHomeHeaderコンポーネントに入れますか？

ここにメインコードとフローがあります。何らかの理由でコードがStackOverflowに正しく読み込まれません。

HomePage.js 
import React from 'react'; 
import {connect} from 'react-redux'; 
import * as actions from '../../../actions/homeEventFormActions'; 
import HomeHeader from '../homeHeader/HomeHeader'; 
import HomeEventForm from '../homeEventForm/HomeEventForm'; 
class HomePage extends React.Component { 
constructor(props) { 
    super(props); 
} 
render() { 
    const { dispatch } = this.props; 
    return (
    <div> 
    < HomeHeader /> 
    < HomeEventForm 
     onSubmit={this.props.onSubmit} 
    /> 
    </div> 
); 
} 
} 

function mapStateToProps(state) { 
return { 
    homeEventForm: state.homeEventForm 
}; 
} 

function mapDispatchToProps(dispatch) { 
return { 
    onSubmit: (eventName) => dispatch(actions.createEventButton(eventName)), 
}; 
} 

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





HomeHeader.js 
import React, { Component, PropTypes } from 'react'; 
import AuthorizeLogin from '../../Authorization/AuthorizeLogin'; 
import AuthorizeRegister from '../../Authorization/AuthorizeRegister'; 
import { loginUser } from '../../../actions/authorizationActions'; 
class HomeHeader extends React.Component { 
    constructor() { 
     super(); 
    } 
    _handleChange(eventKey) {
 
    ... 
    <AuthorizeLogin 
     onLoginClick={ (creds) => dispatch(loginUser(creds))} 
    /> 
    ... 
    } 
    return; 
    } 
    render() { 

     const { dispatch } = this.props; 

     return (
     ... 
      <Modal.Header closeButton onClick={()=> this._handleChange(5)}> 
     ...  
    ); 
    } 
    } 
    export default HomeHeader; 



AuthorizeLogin.js 

import React from 'react'; 


class AuthorizeLogin extends React.Component { 

constructor(props, context) { 
    super(props, context); 
    this.state = {}; 
    this._login = this._login.bind(this); 
} 
_login(e) { 
    e.preventDefault; 
    const email = this.refs.email; 
    const password = this.refs.password; 
    const creds = { email: email.value.trim(), password: password.value.trim() }; 
    this.props.onLoginClick(creds); 
} 
render() { 
return (
<Form horizontal onSubmit={this._login}> 
    <h4 className="authEmailText">Login with your email</h4> 
    <input type="email" placeholder="urawesome@example.com" ref='email' /> 
    <input type="password" placeholder="Password" ref='password' /> 
</Form> 
); 
} 
} 
export default AuthorizeLogin; 

Answer 1

すべてのアクションは、コンテナから派遣されなければなりません。この場合、コンテナにはディスパッチが必要です。

function mapDispatchToProps(dispatch) { 
return { 
    onSubmit: (eventName) => dispatch(actions.createEventButton(eventName)), 
    onLogin: (creds) => dispatch(loginUser(creds)), 
}; 
} 

onLoginは小道具を経由して、下流のコンポーネントに渡される必要があります。

<HomeHeader onLogin={this.props.onLogin} /> 

<AuthorizeLogin 
    onLoginClick={this.props.onLogin} 
/>