2016-07-26 5 views

답변

35

(참고 : 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 유틸)를 사용합니다. (현재 작성 중)

+0

감사합니다. 제이, 설명해 주셔서 감사합니다! – zatziky