用于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}
/>