Redux Sagaの従属非同期呼び出し

Question

私はRedux Sagaを学んでおり、大部分は意味があります。しかし、より良い実装があるように思えるシナリオに遭遇しました。

POSTリクエストで第三者のウェブサイトに注文を提出する必要があります。注文を送信するには、最初にGETリクエストを別のエンドポイントに送信して、POSTリクエストに必要な情報を取得する必要があります。つまり、POSTリクエストは、GETリクエストが正常に返されたことに依存しています。

私の現在の作業ソリューションは、次のようになります。

function* create(action) { 
    try { 
    const code = yield axios.get('/url/to/code?id=XXXXX'`); 
    const order = {...some_object, code: code.data} 
    const result = yield axios.post('/url/to/order', order); 
    yield put({...action, type: CREATE_SUCCESS, data: result.data}); 
    } catch (e) { 
     const errors = e.response.data; 
     yield put({...action, type: CREATE_FAIL, errors: errors}); 
    } 
    } 

はReduxの佐賀でこれを処理するための推奨方法はありますか？

私が持っていた考えの1つは、各リクエストをそれ自身のアクションに移動することでした。GETアクションはPOSTアクションをディスパッチします。これを行う方法の入力を探している '佐賀'の方法。

Answer 1

このような公式のベストプラクティスが存在するかどうかはわかりませんが、公式文書に基づいて改善される可能性のあるコードを試してみます。

のはredux-saga readmeから最初の行を読んでみましょう：

Reduxの-サガが反応に副作用（すなわち をフェッチデータのような非同期なものとブラウザのキャッシュをアクセスするような不純なもの）を作ることを目的とするライブラリです/ Reduxアプリケーションの方が簡単で、 が優れています。

ここでは非同期データフェッチを行います。私たちはそれについて話します。

redux-sagaの中で最も優れたものの1つは、テストを簡単にする方法です。 axios()に直接電話するので、あなたのサガをテストするのは難しいでしょう。あなたは、いくつかの方法やセットアップに/偽のサーバーをスパイaxiosを模擬する必要がありますなど

これは、あなたが今、上記のコードをすべきテスト

import { call, put } from 'redux-saga/effects'; 

function* create(action) { 
    try { 
    const code = yield call(axios.get, '/url/to/code?id=XXXXX'); 
    const order = {...some_object, code: code.data} 
    const result = yield call(axios.post, '/url/to/order', order); 
    yield put({...action, type: CREATE_SUCCESS, data: result.data}); 
    } catch (e) { 
    const errors = e.response.data; 
    yield put({...action, type: CREATE_FAIL, errors: errors}); 
    } 
} 

のように、redux-sagaからcall方法でaxiosをラップする必要がある理由です非常にストレートです。

これは、redux-sagaのドキュメントのBasic concepts -> Declarative Effectsに詳しく説明されています。必ずそう正しい作業ではなく、方法について

：：さんは、ドキュメントからの例を見てみましょう

function* fetchProducts() { 
    const products = yield Api.fetch('/products') 
    // ... 
} 

正しい方法を、より簡単にテスト：

function* fetchProducts() { 
    const products = yield call(Api.fetch, '/products') 
    // ... 
} 

それも非常にexaplainedだ、非常に読書をお勧めします上記のリンクされた記事全体。

前の例との違いは、今、私たちはすぐに呼び出すフェッチ実行 じゃないということです、代わりに、コールは効果の 記述を作成します。あなたの質問の後半部分に

レッツ・バックは：私が持っていた

ひとつのアイデアは、 GETアクションはPOSTアクションを派遣だろう、独自の行動に各要求を移動することでした。 これを行う方法の入力を探して '佐賀'方法。

これを別の佐賀として分割して、リクエストを出すために別のアクションを送信するかどうかは分かりません。

いつものように、すべてはアプリケーションのニーズとコンテキストに依存し、おそらくもっと良いやり方をする最良の方法は、次のような質問に答えることです。アプリケーションのさまざまな部分間で、その要求に関連するロジックを共有する必要がありますか？あなたの要求に応じて、取り消しまたは再試行の仕組みが必要ですか？