Redux/React 的授权组件设置答案

【问题标题】：Authorization Components Setup for Redux/ReactRedux/React 的授权组件设置
【发布时间】：2016-08-25 04:08:08
【问题描述】：

我的 React/Redux 授权设置面临严峻挑战，我不知所措。当前错误是：

HomeHeader.js?8595:26 Uncaught ReferenceError: dispatch is not defined

这里有很多错误，任何帮助将不胜感激。

我正在创建两个授权组件，一个用于注册，一个用于登录。 AuthorizationLogin 组件是我首先要做的。

我不知道如何让它传递它从表单字段中获取的事件信息，放入变量 creds，然后通过 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;

【问题讨论】：

标签： javascript reactjs react-redux redux-thunk

【解决方案1】：

所有动作都应该从容器中分派。在这种情况下，容器应该有调度。

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

onLogin 应该通过 props 传递给下游组件：

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

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

【讨论】：

谢谢！是 OnLogin 传递到下游给我带来了问题。将 onLogin 创建为回调有助于我更好地理解。