Redux/React 的授权组件设置

Question

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

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

这里有很多错误，我们将不胜感激。

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

我不知道如何让它传递它从表单字段中获取的事件信息，放入变量 creds，然后向上传递到 HomeHeader 组件，然后再次传递到 HomePage 容器。我是否将所有授权组件放入一个巨大的 HomeHeader 组件中？

这是主要代码和流程。由于某种原因，代码没有直接加载到 Whosebug 中。

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 应该通过 props 传递给下游组件：

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

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

Redux/React 的授权组件设置

Authorization Components Setup for Redux/React

javascript

reactjs

redux-thunk

react-redux