Richard Everts Richard Everts - 3 months ago 22
React JSX Question

Authorization Components Setup for Redux/React

having a serious challenge with my React/Redux authorization setup and I'm at a loss. Current error is:

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

There's a lot wrong here, and any help would be appreciated.

I'm creating two authorization components, one to register and one to login. The AuthorizationLogin component is what I'm working on first.

I don't know how to get this to pass the event info it grabs form the form fields, put in the variable creds, and then on up through the HomeHeader component, and then again up to the HomePage container. Do I put all of the authorization components into one enormous HomeHeader component?

Here's the main code and flow. Code isn't loading right into StackOverflow for some reason.

Flow

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

All the actions should be dispatched from container. In this case, the container should have the dispatch.

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

The onLogin should be passed to downstream components via props:

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

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