web-dev-qa-db-ja.com

Reduxアクションの連鎖

私はReact、Redux、JS全体に不慣れです。次から次へとディスパッチしてアクションを実行する方法を知りたい-正しい方法で約束します。私のコードは実際には機能しますが、エラーをスローし続けます：

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

これが私の設定です。

  • これは私のアクションクリエーターであり、連鎖アクションが必要であり、警告が発生する場所です。

    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}) },
    )
  }
}

ご覧のとおり、問題は.thenにあります。これは、アクションを正しくトリガーする方法がわからないためです。

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

    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)
        })
}

質問は、どうすれば適切に実行できますか？それでは、正しい方法は何ですか？

javascriptreactjsreduxredux-thunk
6
alphiii

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

少し分析した後、ペンと紙を取り、それがどのように機能するかについての基本的なアルゴリズムを書き始め、次のことを思いついたとしましょう：-

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

上から、ミドルウェアを作成し、オブジェクトを返すアクションを取得するまで関数を返すアクションをディスパッチし続けることがわかった場合。これは redux-thunk が行うことです。

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

私は本当に redux-thunk 試してみてください。また、ミドルウェアを理解するために、 reduxミドルウェアのドキュメント を確認することをお勧めします。

5
Harkirat Saluja