使用fetch而不是ajax with redux-observable

Question

在redux-observable中是否可以使用isomporphic-fetch而不是Rx.DOM.ajax

Answer 1

(注意：RX.DOM.ajax来自RxJS v4，不支持需要RxJS 的redux-observable。v5中的等价物是Rx.Observable.ajax或import { ajax } from 'rxjs/observable/ajax';)

确实可以使用fetch()和任何其他AJAX API；尽管有些比其他的更容易适应！

fetch()接口返回一个Promise，RxJS v5内置了对该API的支持。大多数期望可观察对象的运算符都可以按原样使用Promise(如mergeMap、switchMap等)。但是，在将Promise传递到Epic的其余部分之前，您通常会希望对Promise应用Rx运算符，因此您通常会希望将Promise包装在一个可观察对象中。

您可以使用Observable.from(promise) 将Promise封装到一个可观察对象中

下面是一个示例，其中我为用户获取，请求JSON响应，然后将promise封装在一个observable中：

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

如果您可以控制应用编程接口代码，理想情况下您应该使用Observable.ajax (或任何其他基于可观察的AJAX实用程序)，因为Promises是不能取消的。(在撰写本文时)

Answer 2

我对@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 }))
            )
        })
    )
}