ajax - 使用 fetch 而不是 ajax 与 redux-observable

Question

redux-observable是否可以使用isomorphic-fetch而不是Rx.DOM.ajax？

Answer 1

（注意：RX.DOM.ajax来自 RxJS v4，不适redux-observable用于需要RxJS v5 。v5中的等价物是Rx.Observable.ajaxor import { ajax } from 'rxjs/observable/ajax';）

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

fetch()API 返回一个，PromiseRxJS v5内置了对. 大多数期望 observable 的操作符可以按原样使用 Promise（如mergeMap、switchMap等）。但通常您会希望在将 Promise 传递给 Epic 的其余部分之前将 Rx 运算符应用于 Promise，因此您通常希望将 Promise 包装在 Observable 中。

您可以将 Promise 包装到 Observable 中Observable.from(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

---

如果您可以控制 API 代码，理想情况下您会使用Observable.ajax（或任何其他基于 Observable 的 AJAX 实用程序），因为 Promise 无法取消。（截至撰写本文时）

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 }))
            )
        })
    )
}