TypeError: Object (...) (...). FlatMap не является функцией - PullRequest
Новая
       11

TypeError: Object (...) (...). FlatMap не является функцией

0 голосов
/ 02 апреля 2020

Подскажите, пожалуйста, почему возникает эта ошибка?

enter image description here

import { FETCHING_DATA } from '../constants'
import { getDataSuccess, getDataFailure } from './actions'
import getPeople from '../api'

import { from, Observable, of} from 'rxjs';
// import 'rxjs'
// import { Observable } from 'rxjs/Observable';
import { mergeMap } from 'rxjs/operators';
import { ofType } from 'redux-observable';

// const fetchUserEpic = action$ =>
//   action$.ofType(FETCHING_DATA)
//     .mergeMap(action =>
//       Observable.fromPromise(getPeople())
//         .map(response => getDataSuccess(response))
//         .catch(error => Observable.of(getDataFailure(error)))
//       )

const fetchUserEpic = action$ =>
  action$.pipe(  //fixed
    ofType(FETCHING_DATA),
    mergeMap(action => {
      return from(getPeople())
        .flatMap(payload => [
          {
            type: 'SIGNUP_CONCIERGE_SUCCESS',
            payload
          }
        ])
        .catch(error =>
          of({
            type: 'SIGNUP_CONCIERGE_ERROR',
            payload: { error }
          })
        );
    })
  );

export default fetchUserEpic

1 Ответ

2 голосов
/ 02 апреля 2020

Это пример из редукс-наблюдаемого 

import { ajax } from 'rxjs/ajax';

const fetchUserEpic = action$ => action$.pipe(
  ofType(FETCH_USER),
  mergeMap(action => ajax.getJSON(`/api/users/${action.payload}`).pipe(
    map(response => fetchUserFulfilled(response)),
    catchError(error => of({
      type: FETCH_USER_REJECTED,
      payload: error.xhr.response,
      error: true
    }))
  ))
);

И здесь принято решение 

import { FETCHING_DATA } from '../constants'
import { getDataSuccess, getDataFailure } from './actions'
import getPeople from '../api'

import { from, of } from 'rxjs';
import { map, catchError, mergeMap } from 'rxjs/operators';
import { ofType } from 'redux-observable';

const fetchUserEpic = action$ => action$.pipe(
  ofType(FETCHING_DATA),
  mergeMap(() => from(getPeople()).pipe(
    map(getDataSuccess),
    catchError(error => of(getDataFailure(error)))
  ))
);

export default fetchUserEpic;
...