【问题标题】:Observable .map is not a function可观察的 .map 不是函数
【发布时间】:2018-06-20 13:45:21
【问题描述】:

我要疯了!作为我正在尝试的 React/Nextjs 应用程序的副作用 使用redux-observable 获取基本的ajax 请求:

import {combineEpics} from 'redux-observable'
import {mergeMap} from 'rxjs/operators'
import {ajax} from 'rxjs/ajax'

const fetchSearchEpic = action$ =>
  action$
    .ofType('FETCH_SEARCH')
    .pipe(
      mergeMap(action => 
        ajax.getJSON(`http://localhost:3001/search/${action.payload.query}`)
            .map(response => ({ type: FETCH_SEARCH_FULFILLED, response }))
      )
)

export const rootEpic = combineEpics(
  fetchSearchEpic
)

但我这辈子都做不到。请求没有被触发,我不断收到的错误是:

Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_2_rxjs_ajax__.a.getJSON(...).map is not a function

现在我猜它可能与新的 RxJS 6 导入依赖项的方式有关,不知何故我需要导入 .map 以将其添加到 Observable,但是如何?

我试过了:

import 'rxjs'
import 'rxjs/observable/map'
import {map} from 'rxjs/observable'

没有一个有想要的效果...

版本:

"react": "16.4.0",
"redux": "4.0.0",
"react-redux": "5.0.7",
"redux-observable": "1.0.0-beta.2",
"rxjs": "6.2.1"

【问题讨论】:

标签: rxjs redux-observable


【解决方案1】:

map(以及其他 Rx 运算符)自 RxJS 6 以来不再存在于 Observable 的原型上,用于 a few reasons

运算符现在改为使用 pipe 链接:

ajax.getJSON(`http://localhost:3001/search/${action.payload.query}`)
    .pipe(map(response => ({ type: FETCH_SEARCH_FULFILLED, response })

确保像这样导入map

import { map } from 'rxjs/operators';

请参阅Pipeable Operators,其中概述了这些更改。

【讨论】:

  • 感谢它现在有效并且有意义!互联网上充斥着不一致的例子,但我知道它可以在不依赖 rxjs-compat 的情况下完成
猜你喜欢
  • 2018-05-04
  • 2018-12-22
  • 2022-11-29
  • 1970-01-01
  • 2019-09-09
  • 1970-01-01
  • 1970-01-01
  • 2014-03-24
  • 2012-04-20
相关资源
最近更新 更多