В redux-observable
можно использовать isomporphic-fetch вместо Rx.DOM.ajax?Использовать выборку вместо ajax с уменьшающимся-наблюдаемым
ответ
(Примечание: RX.DOM.ajax
от RxJS v4, и не работает с redux-observable
, который требует RxJS v5 эквивалент в v5 является Rx.Observable.ajax
или import { ajax } from 'rxjs/observable/ajax';
.)
Это действительно можно использовать fetch()
, а также любые другой API AJAX; хотя некоторые адаптируются легче других!
fetch()
API возвращает Promise
, который RxJS v5 имеет встроенную поддержку для. Большинство операторов, которые ожидают наблюдаемого, могут использовать Promises as-is (например, mergeMap
, switchMap
и т. Д.). Но часто вам нужно применить Rx-операторы к Promise, прежде чем передавать их вместе с остальной частью вашего Epic, поэтому вы часто захотите обернуть Promise внутри Observable.
Вы можете обернуть Promise в наблюдаемую с Observable.from(promise)
Вот пример, где я выборки для пользователя, запросить ответ в формате JSON, а затем оберните обещание в наблюдаемой:
const api = {
fetchUser: id => {
const request = fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
.then(response => response.json());
return Observable.from(request);
}
};
Затем вы можете использовать это в своей Epic и применять любые операторы, которых вы хотите:
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
Если у вас есть контроль над кодом API, в идеале вы должны использовать Observable.ajax
(или любые другие Observable на основе AJAX утилиты), потому что Обещания не могут быть отменены. (на момент написания этой статьи)
Спасибо, Джей, для объяснения! – zatziky