在redux-observable
中是否可以使用isomporphic-fetch代替Rx.DOM.ajax?
答案 0 :(得分:40)
(注意:display: inline-block
来自RxJS v4 ,并且不适用于需要RxJS v5的RX.DOM.ajax
。v5中的等效内容为{ {3}}或redux-observable
)
确实可以使用import { ajax } from 'rxjs/observable/ajax';
以及任何其他AJAX API;虽然有些人比其他人更容易适应!
fetch()
API返回fetch()
,其中RxJS v5具有内置支持。大多数期望observable的运算符都可以按原样使用Promises(如Promise
,mergeMap
等)。但是你经常想把Rx操作符应用到Promise中,然后再将它传递给你的Epic的其余部分,所以你经常想把Promise包装在一个Observable中。
您可以使用switchMap
这是我获取用户,请求JSON响应,然后将promise包装在observable中的示例:
Observable.from(promise)
然后您可以在Epic中使用它并应用您想要的任何运算符:
const api = {
fetchUser: id => {
const request = fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
.then(response => response.json());
return Observable.from(request);
}
};
这是一个带有这个工作示例的JSBin:Rx.Observable.ajax
如果您可以控制API代码,理想情况下您将使用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 }))
);
(或任何其他基于Observable的AJAX工具),因为无法取消Promises。 (截至本文撰写时)
答案 1 :(得分:1)
对@jayphelps进行了一些小的调整,以使该代码对我有用。希望这有助于节省某人的时间。
import { FETCH_USER } from './actions'
import { ofType } from 'redux-observable'
import { map, mergeMap } from 'rxjs/operators'
import { from } from 'rxjs'
const fetchUserEpic = action$ => {
return action$.pipe(
ofType(FETCH_USER),
mergeMap((action = { user: 'redux-observable' }) => {
const getRequest = (user) => {
const request = fetch(`https://api.github.com/users/${user}`)
.then(response => response.json())
return from(request)
}
return getRequest(action.user).pipe(
map(payload => ({ type: FETCH_USER_FULFILLED, payload }))
)
})
)
}