Как вызвать метод Get Iof httpclient N Angular 4 для получения данных с сервера? - PullRequest
Новая
       14

Как вызвать метод Get Iof httpclient N Angular 4 для получения данных с сервера?

0 голосов
/ 26 июня 2018

Я пытаюсь получить данные с сервера, используя ngrx. Я хочу получить данные и сохранить их в хранилище. Я использую ngrx/effect. Я выполняю действие, действие, файл @effect. Теперь я хочу знать, чтобывызовите эту функцию, чтобы я получил данные и сохранил в своем состоянии приложения

вот мой код https://stackblitz.com/edit/angular-kewril?file=src%2Fapp%2Fapp.module.ts

Действие 

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


export const FETCH_BANKLIST = 'FETCH_BANKLIST';

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



export type BankAction =  FetchRecipe;

Редуктор 

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;
}

1 Ответ

0 голосов
/ 26 июня 2018

Хорошо, сначала вы должны создать файл эффекта и включить его в EffectsModule в ваш файл

app.module.ts, а здесь код для создания эффекта для вашей справки. 

  @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);
        })
    );

Итаквсякий раз, когда отправляется ваш FETCH_BANKLIST, ваши эффекты запускаются, и он выполняет вызов API с использованием сервисов.

app.services.ts

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