redux-observable
Rx.DOM.ajax 대신 isomporphic-fetch을 사용할 수 있습니까?redux-observable 인 ajax 대신 fetch 사용
답변
(참고 : RX.DOM.ajax
는 RxJS V4에서, 그리고 RxJS v5을 필요로 redux-observable
작동하지 않습니다 V5에서 이에 해당하는이 Rx.Observable.ajax
또는 import { ajax } from 'rxjs/observable/ajax';
입니다.)
어떤뿐만 아니라 fetch()
을 사용하는 것이 실제로 가능하다 다른 AJAX API; 어떤 사람들은 다른 사람들보다 쉽게 적응하지만!
는 fetch()
API는 V5를 RxJS Promise
을 반환있다 내장에 대한 지원. 관찰 가능을 기대하는 대부분의 운영자는 그대로 약속을 사용할 수 있습니다 (예 : mergeMap
, switchMap
등). 하지만 종종 Rx 연산자를 Promise에 적용하여 Epic의 나머지 부분으로 전달하기를 원할 것입니다. 따라서 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 : 당신은 API 코드를 제어 할 경우 약속이 취소 될 수 없기 때문에 https://jsbin.com/fuwaguk/edit?js,output
, 이상적으로는 Observable.ajax
(또는 다른 관찰 가능한 기반 AJAX 유틸)를 사용합니다. (현재 작성 중)
감사합니다. 제이, 설명해 주셔서 감사합니다! – zatziky