pass component’s state to mapDispatchToProps React/Redux

Question

I am really new to Reac.js/Redux.js and javascript in general. I am trying to learn a new language by actually doing it. I am trying to build a log in page. But for some reason I can't pass my inner state to my mapDispatchToProps. I can see the values inside the component, but I can't get them outside of my class. How do i go about passing my component's state to mapDispatchToProps. Thank you id advance!!!!

 import React, {Component} from 'react'; import {bindActionCreator} from 'redux'; import {connect} from 'react-redux'; import {SignInSubmit} from '../../actions/SignIn_Action'; const mapStateToProps = state =>{ return{ userEmail: state.userInfo.userEmail, userPassword: state.userInfo.userPassword, user: state.user, password: state.password } } const mapDispatchToProps = (dispatch) => { //console.log(this.state.loginPassword); //console.log(this.props.user); return{ onSubmit: (event) => dispatch(SignInSubmit(this.user, this.password)) } } class SignIn extends React.Component { constructor(props){ super(); this.state = { loginPassword: '', loginUser: '' } // this.onPasswordChange = this.onPasswordChange.bind(this); // this.onEmailChange = this.onEmailChange.bind(this); // //this.onSubmit = this.onSubmit.bind(this); } onPasswordChange = (event) => { this.setState({loginPassword: event.target.value}) console.log(this.state.loginPassword); } onEmailChange = (event) => { this.setState({loginUser: event.target.value}) console.log(this.state.loginUser); } render(){ return ( <main class="pa4 black-80"> <form class="measure center"> <fieldset id="sign_up" class="ba b--transparent ph0 mh0"> <legend class="f4 fw6 ph0 mh0">Sign In</legend> <div class="mt3"> <label class="db fw6 lh-copy f6" for="email-address">Email</label> <input class="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" type="email" name="email-address" id="email-address" onChange = {this.onEmailChange}/> </div> <div class="mv3"> <label class="db fw6 lh-copy f6" for="password">Password</label> <input class="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" type="password" name="password" id="password" onChange = {this.onPasswordChange}/> </div> </fieldset> <div class=""> <input class="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib" type="submit" value="Sign in" onChange= {this.onSubmit}/> </div> </form> </main> ); }; } export default connect(mapStateToProps, mapDispatchToProps)(SignIn); 

Answer 1

mapDispatchToProps as an object will wrap your action with dispatch automatically and pass it in as a prop.

const mapDispatchToProps = {
  signIn: SignInSubmit
}

then in your component..

onSubmit: () => {
  const { loginUser, loginPassword } = this.state;
  this.props.signIn(loginUser, loginPassword);
}

<button onClick={this.onSubmit}>Sign In</button>