どのようにボタンのmapDispatchToPropsアクションをトリガーですか？

Question

私はmapDispatchToPropsに問題があります。どのように私はボタンを使用してmapDispatchToPropsからアクションを "トリガ"することができますか？ - LoginForm.js。 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); 

Answer 1

あなたがconnectを使用する場合は、「接続」の成分が小道具としてディスパッチ機能を受け取ることになります：私は学ぶための多くを持って、知っています。

mapDispatchToPropsで指定したのと同じ名前でこの小道具にアクセスできます。コンポーネントで

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

、このようにそれを使用する：

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

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