CODEWITHSUNDEEP
javascriptreactjsredux
Dawid W
Dawid W

Reputation: 21

How trigger mapDispatchToProps action in button?

I have problem with mapDispatchToProps. How can I "trigger" action from mapDispatchToProps using onClick in button?? - LoginForm.js. I know, I have a lot of to learn :D

class LoginForm extends Component{
render()
{
const {changeStatusLogin} = this;
return(
    <StyledContainer>
     <StyledTitle>Logowanie</StyledTitle>
                   <StyledForm className="form" role="form" method="post" action="login" id="login-nav">
                      <div className="form-group">
                         <label className="sr-only" htmlFor="exampleInputUsername2">Login</label>
                         <input className="form-control" id="exampleInputEmail2" style={{textAlign: "center"}} placeholder="Login" required/>
                      </div>
                      <div className="form-group">
                         <label className="sr-only" htmlFor="exampleInputPassword2">Haslo</label>
                         <input type="password" className="form-control" id="exampleInputPassword2" style={{textAlign: "center"}} placeholder="Password" required/>
                      </div>
                         <Button type="submit"  className="btn btn-success" onClick={changeStatusLogin}>Zaloguj</Button>                                          
                   </StyledForm>
    </StyledContainer>
  )
 }
}
  const mapStateToProps = (state) => {return { 
  showLogin: state.showLogin}}

  const mapDispatchToProps = (dispatch) => {return {
  onChangeStatus: () => dispatch(loginAction.setTrue())}}

  export default connect(mapStateToProps,mapDispatchToProps(LoginForm);

Upvotes: 1

Views: 668

Answers (1)

JJJ
JJJ

Reputation: 3352

When you use connect, the "connected" component will receive the dispatch functions as props.

You can access the props using the same names you gave them in mapDispatchToProps.

const mapDispatchToProps = (dispatch) => {
  return {
    onChangeStatus: () => dispatch(loginAction.setTrue())
  }
}

In your component, use it like this: 

onChange(e){
  e.preventDefault()
  //no need to pass anything to this function
  this.props.onChangeStatus()
}

render(){
  return <button onClick={this.onChange.bind(this)} />
}

Upvotes: 1

Related Questions