W redux-observable
czy można użyć isomporphic-fetch zamiast Rx.DOM.ajax?Użyj pobierania zamiast ajaxa przy zauważeniu redux
Odpowiedz
(Uwaga: RX.DOM.ajax
wynosi od RxJS v4, a nie działa z redux-observable
która wymaga RxJS v5 Równowartość w v5 jest Rx.Observable.ajax
lub import { ajax } from 'rxjs/observable/ajax';
.)
To jest rzeczywiście możliwe użycie fetch()
jak również wszelkie inny interfejs API AJAX; choć niektóre adaptują się łatwiej niż inne!
fetch()
API zwraca Promise
, który RxJS v5 ma wbudowane wsparcie dla. Większość operatorów, którzy oczekują tego, co można zaobserwować, może spożywać Obietnice bez zmian (np. mergeMap
, switchMap
itd.). Ale często będziesz chciał zastosować operatorów Rx do obietnicy, zanim przekażesz ją do reszty Eposu, więc często chcesz zawrzeć Obietnicę wewnątrz Obserwowalnego.
Można owinąć obietnica do obserwowanej z Observable.from(promise)
Oto przykład, gdzie sprowadzić dla użytkownika, zwraca odpowiedź JSON, a następnie owinąć obietnicę w zauważalny:
const api = {
fetchUser: id => {
const request = fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
.then(response => response.json());
return Observable.from(request);
}
};
Następnie możesz go wykorzystać w swoim Epickim i zastosować dowolnych operatorów, których potrzebujesz:
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 }))
);
Oto JSBin z tego przykładu roboczego: https://jsbin.com/fuwaguk/edit?js,output
Jeśli masz kontrolę nad kodu API, idealnie byś użyć Observable.ajax
(lub innych obserwowalnych oparte utils AJAX), ponieważ obietnice nie mogą być anulowane. (od tego pisania)
Dziękuję, Jay, za wyjaśnienie! – zatziky