用於Redux / React的授權組件設置

Question

我的React / Redux授權設置面臨嚴峻的挑戰，我很茫然。 當前錯誤是：

HomeHeader.js？8595：26未捕獲的ReferenceError：未定義調度

這里有很多錯誤，我們將不勝感激。

我正在創建兩個授權組件，一個用於注冊，一個用於登錄。 首先是AuthorizationLogin組件。

我不知道如何讓它傳遞它從表單字段獲取的事件信息，放入變量crs，然后通過HomeHeader組件，然后再次到達HomePage容器。 我是否將所有授權組件都放入一個龐大的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應該通過prop傳遞給下游組件：

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

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