ajax - redux-observable で ajax の代わりに fetch を使用する

Question

Rx.DOM.ajaxの代わりにisomorphic -fetchredux-observableを使用することは可能ですか?

Answer 1

(注: RX.DOM.ajaxRxJS v4のものであり、 RxJS v5redux-observableを必要とするものでは動作しません。v5で同等のものはまたはです)Rx.Observable.ajaximport { ajax } from 'rxjs/observable/ajax';

実際fetch()、他の AJAX API と同様に使用できます。いくつかは他のものよりも簡単に適応しますが！

fetch()API は、RxJS Promisev5 が組み込みでサポートしている を返します。オブザーバブルを期待するほとんどのオペレーターは、Promise をそのまま消費できます ( mergeMap、switchMapなど)。しかし、Epic の残りの部分に Promise を渡す前に Rx 演算子を Promise に適用したいことがよくあります。

Promise を Observable にラップすることができますObservable.from(promise)

ユーザーを取得し、JSON 応答を要求し、Promise をオブザーバブルにラップする例を次に示します。

const api = {
  fetchUser: id => {
    const request = fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
      .then(response => response.json());
    return Observable.from(request);
  }
};

次に、それをエピックで使用して、必要な演算子を適用できます。

const fetchUserEpic = action$ =>
  action$.ofType(FETCH_USER)
    .mergeMap(action =>
      api.fetchUser(action.payload) // This returns our Observable wrapping the Promise
        .map(payload => ({ type: FETCH_USER_FULFILLED, payload }))
    );

この作業例の JSBin は次のとおりです: https://jsbin.com/fuwaguk/edit?js,output

---

Promise はキャンセルできないため、API コードを制御できる場合は、Observable.ajax(または他の Observable ベースの AJAX ユーティリティ) を使用するのが理想的です。（これを書いている時点で）