Question

我试图在angular 2中使用 httpclient get 方法并在列表中显示项目，但是我在ngrx中使用ngrxeffect（用于异步任务）。我制作了一个reducer，动作。我还制作了effect文件。现在，我想调用service并从service中获取数据并将数据存储在store中。

我尝试过这样

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

减速器

从'./list.action'中导入*作为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) {
  }

}

任何udpate

如何在angular 2中使用httpclient get方法并在列表中显示项目？

0 个答案: