如何在角度4中调用httpclient的get方法从服务器检索数据？

Question

I am trying to get data from server using ngrx . I want to get data and save in store. I am using ngrx/effect . I make the reduces, action , @effect file. Now I want to know to call this function so that i will get data and save in my application state

here is my code https://stackblitz.com/edit/angular-kewril?file=src%2Fapp%2Fapp.module.ts

Action

import {Action} from '@ngrx/store';


export const FETCH_BANKLIST = 'FETCH_BANKLIST';

export class FetchRecipe implements Action {
  readonly type = FETCH_BANKLIST;
}



export type BankAction =  FetchRecipe;

Reducer

import * as bankActions from './bank.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 BankListReducer(state = initialState, action: bankActions.BankAction) {
  return state;
}

Answer 1

Ok, first you should create an effect file and include in EffectsModule in your

app.module.ts file and here the code for creating an effect for your reference.

  @Effect()
   getData$: Observable<Action|any> = this.actions$
    .ofType(actions. FETCH_BANKLIST)
    .map((action:actions. FetchRecipe) => action.payload)
    .switchMap(payload => this.apiServices.fetchRecipies(payload)
      .map(result => {
        return new actions.SaveRecipieDetails(result);
      })
      .catch(e => {
          return new actions.ApiError(e);
        })
    );

So, whenever your FETCH_BANKLIST is dispatched your effects gets triggered and it makes an API call using the services.

app.services.ts

  fetchRecipies(payload) {
    const requestUrl = environment.apiUrl;
    return this.http.post(requestUrl, payload);
  }