コンポーネントにアクションを接続中にエラーが発生しました

Question

コンポーネントをmatchDispatchtoPropsに接続しようとしています。私は、これはUが呼ぶところから私のレンダリングコンポーネントがhandleButtonClick

render(){ 
     return (
      <div className="LoginPage"> 
       <div className="login-page"> 
        <div className="form"> 
         <form className="login-form"> 
          <input id="username" type="username" placeholder="username"/> 
          <input id="password" type="password" placeholder="password"/> 
          <p className="message">Not registered? <a href="#">Request Username and Password</a></p> 
         </form> 
         <button onClick={this.handleLoginButtonClick.bind(this)}>login</button> 
        </div> 
       </div> 
      </div> 
     ); 
    } 

しかし、私はエラーを取得していますが言っているこの

handleLoginButtonClick() { 
     var settings = { 
      "async": true, 
      "crossDomain": true, 
      "url": "https://trigger-backend.appspot.com/auth/login/", 
      "method": "POST", 
      "credentials": 'include', 
      "headers": { 
       "content-type": "application/x-www-form-urlencoded", 
      }, 
      "data": { 
       "password": "apurv", 
       "username": "Apurv" 
      }, 
      success: function(data, textStatus, jQxhr){ 
       alert("success"); 
      }, 
     } 

     $.ajax(settings).done((response) => { 
      alert(response.auth_token); 
      this.props.setAuthToken(response.auth_token); 
      console.log('check'); 
      this.context.router.push('/app') 
     }); 

のように、AJAXリクエストからsetAuthTokenを呼び出しています

function matchDispatchToProps(dispatch) { 
    return bindActionCreators({setAuthToken: actions.setAuthToken}, dispatch); 
} 


export default connect(matchDispatchToProps)(LogInComponent); 

「派遣関数ではありません "。私は間違って何をしていますか？

Answer 1

2番目の引数である必要がある場合は、接続の最初の引数としてmapDispatchを渡しています。代わりにconnect(null, mapDispatch)(LogInComponent)を使用する必要があります。

また、connect()は、mapDispatchの略式構文をサポートしています。接続（ヌル、mapDispatch）（LogInComponentが）、それは私に言って、エラーを与える私がやっているとき

const {setAuthToken} = actions; 
export default connect(null, {setAuthToken})(LogInComponent);