как убрать недопустимую ошибку

Question

Я получаю invalid action error, когда я пытаюсь получить данные с сервера при нажатии кнопки. Я нажимаю на кнопку, чтобы получить данные .bu Я получаю эту ошибку

preview-fe7237b13d780dbf847da.js:1 ERROR Error: Effect "BanklistEffect.recipeFetch" dispatched an invalid action: [object Object]
    at reportInvalidActions (effects.umd.js:sourcemap:185)
    at verifyOutput (effects.umd.js:sourcemap:173)
    at MapSubscriber.eval [as project] (effects.umd.js:sourcemap:231)
    at MapSubscriber._next (map.ts:78)
    at MapSubscriber.Subscriber.next (Subscriber.ts:102)

вот мой код

дескриптор события клика

https://stackblitz.com/edit/angular-kewril?file=src%2Fapp%2Fapp.component.ts

fetchData(){
    this.store.dispatch(new FetchBankList());
  }

Я использую ngrx для управления состоянием. Я хочу получить эти данные и показать на странице

Answer 1

Вы должны вернуть действие из эффекта вместо Observable:

import {Actions, Effect} from '@ngrx/effects';
import { switchMap, map, catchError } from 'rxjs/operators';
import {HttpClient} from '@angular/common/http';
import {Injectable} from '@angular/core';

import * as BankActions from './bank.action';
import {Bank} from './bank.reducer';
@Injectable()
export class BanklistEffect {
  private url = 'https://biz.timesofindia.indiatimes.com/bankifsc/getlist';

  @Effect()
  recipeFetch = this.actions$
    .ofType(BankActions.FETCH_BANKLIST).pipe(
      switchMap((actions: BankActions.BankAction) => {
        return this.http.get<Bank[]>(this.url);
      }),
      map(res => new saveBanksAction(res)),
      catchError(err => console.log(err)),
  )
  constructor(private actions$: Actions,
              private http: HttpClient) {
  }
}