0

我正在尝试在 Angular 2 中使用httpclient get方法并在列表中显示项目，但我正在使用ngrxwith ngrxeffect（用于 asyn 任务）。我做了一个减速器，动作。我也做effect文件。现在我想调用服务并从服务中获取数据并将数据存储在存储中。

我试过这样

https://stackblitz.com/edit/angular-s5xdfv?file=src%2Fapp%2Fstore%2Flist.effect.ts

减速器

从'./list.action'导入*作为动作；

export interface Bank {
  seo_val:string;
  text_val:string;
}

export interface State {
  isLoading: boolean;
  isLoadSuccess: boolean;
  banks: Array<Bank>;
}

export const initialState: State = {
  isLoading: false,
  isLoadSuccess: false,
  banks: []
};

export function reducer(state = initialState, action: Action.Actions): State {
  switch (action.type) {
    case Action.GET_BANKLIST: {
      return {
        ...state,
        isLoading: true,
        isLoadSuccess: false,
        banks: []
      };
    }

    case Action.GET_BANKLIST_SUCCESS: {
      return {
        ...state,
        isLoading: false,
        isLoadSuccess: true,
        banks: action.payload.data
      };
    }

    case Action.GET_BANKLIST_FAILED: {
      return {
        ...state,
        isLoading: false,
        isLoadSuccess: false,
        banks: []
      };
    }

    default: {
      return state;
    }
  }
}

影响 

import {Actions, Effect} from '@ngrx/effects';
import { HttpClient } from '@angular/common/http';
import {Injectable} from '@angular/core';
import {SwitchMap } from 'rxjs/operator ';

import * as BankListAction from './list.action';



@Injectable()
export class ListEffects {

  @Effect()
  authSingup = this.actions$
    .ofType(BankListAction.GET_BANKLIST).
     SwitchMap(()=>{
      return this.http.get('http://biz.timesofindia.indiatimes.com/bankifsc/getlist')
     })

constructor(private actions$: Actions,
private http:HttpClient) {
  }

}

任何更新

4

0 回答 0