將組件的狀態傳遞給mapDispatchToProps React / Redux

Question

我真的是Reac.js / Redux.js和javascript的新手。 我正在嘗試通過實際學習來學習一種新語言。 我正在嘗試建立登錄頁面。 但是由於某種原因，我無法將內部狀態傳遞給mapDispatchToProps。 我可以看到組件內部的值，但無法在類之外獲取它們。 我該如何將組件的狀態傳遞給mapDispatchToProps。 謝謝你的身份證提前！！！

 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作為一個對象會自動將您的操作與dispatch一起包裝，並將其作為prop傳入。

const mapDispatchToProps = {
  signIn: SignInSubmit
}

然后在您的組件中。

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

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