Reduxアクションの連鎖

Question

React、Redux、およびJS全体を初めて使用しています。私はどのように私は派遣し、別のアクションが完了した後のアクションを知りたい - 正しい方法で約束します。私のコードは実際に動作しますが、エラーをスローし続けます。

readingActions.js?14b9:56 Uncaught (in promise) TypeError: dispatch(...).then is not a function(…) 

これは私の設定です。

• これは、私が連鎖したアクションと警告が発生する場所を私のアクションクリエイターです。

あなたは私が正しくアクションをトリガーする方法を知らないので、問題は、.thenである見ることができるように

export function createReading(reading) { 
    return function (dispatch) { 
    dispatch({type: CREATE_READING}); 
    return request(
     `${API_URL}new`, {method: 'POST', body:JSON.stringify(reading)}, 
     (json) => {(dispatch({type: CREATE_READING_SUCCESS, res: json}).then(dispatch(Notifications.success(showSuccess(json.book.title)))))}, 
     (json) => { dispatch({type: CREATE_READING_ERROR400, res: json}).then(dispatch(Notifications.error(showError(json.error)))) }, 
     (res) => { dispatch({type: CREATE_READING_ERROR500, res: res}) }, 
     (ex) => { dispatch({type: CREATE_READING_FAILURE, error: ex}) }, 
    ) 
    } 
} 

。

• また、そのように見える私のヘルパー関数（ここでは、私はトークン追加し、異なる応答を返す）でリクエストを見ることができます：

  export function request(url, options, success, error400, error, failure) { 
      let headers = new Headers(); 
      headers.append("Content-Type", "application/json") 
      headers.append("Accept", "application/json") 
      options["headers"] = headers; 
  
      if (localStorage.jwtToken) { 
       let token = localStorage.jwtToken; 
       headers.append('Authorization', 'JWT '+token); 
      } 
  
      return fetch(url, options) 
       .then(res => { 
        if (res.status >= 200 && res.status < 300) { 
         res.json().then(json => { 
          return success(json) 
         }) 
        } else if (res.status === 400) { 
         res.json().then(json => { 
          return error400(json) 
         }) 
        } else { 
         return error(res) 
        } 
       }).catch((ex) => { 
        return failure(ex) 
       }) 
  } 
  

質問は、私は、適切に実行できる方法です。そして正しい方法は何でしょうか？

Answer 1

アクションをチェーンでディスパッチする場合は、実際に自分でアクションを実装することができます。

今ビットを分析した後、あなたはペンと紙を取ると言うと、それが動作するはずですし、次の思い付く方法についての書き込み基本的なアルゴリズムを開始： - あなたがいることを見れば、上から今

dispatch(action) => action returns function => action returns function => action returns an object(here you chain ends)

をミドルウェアを作成し、オブジェクトを返すアクションを得るまで関数を返すアクションをディスパッチし続けます。これはredux-thunkの機能です。

あなた自身の何かを作成しようとしても、それはあなたの学習のために行いますが、最終的にはサンクや他のパッケージのようなものが出てくるでしょう。

私は本当にredux-thunkを試して言うと思います。ミドルウェアの理解のために、redux middleware docsをチェックすることをお勧めします。