使用fetch而不是带有redux-observable的ajax

时间:2016-07-26 12:03:12

标签: ajax redux rxjs5 isomorphic-fetch-api redux-observable

redux-observable中是否可以使用isomporphic-fetch代替Rx.DOM.ajax

2 个答案:

答案 0 :(得分:40)

(注意:display: inline-block来自RxJS v4 ,并且不适用于需要RxJS v5RX.DOM.ajax。v5中的等效内容为{ {3}}或redux-observable

确实可以使用import { ajax } from 'rxjs/observable/ajax';以及任何其他AJAX API;虽然有些人比其他人更容易适应!

fetch() API返回fetch(),其中RxJS v5具有内置支持。大多数期望observable的运算符都可以按原样使用Promises(如PromisemergeMap等)。但是你经常想把Rx操作符应用到Promise中,然后再将它传递给你的Epic的其余部分,所以你经常想把Promise包装在一个Observable中。

您可以使用switchMap

将Promise包装到Observable中

这是我获取用户,请求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 }))
            )
        })
    )
}