title: How to make a GET request from API with ngrx?(Angular 7)
body: <p>How can I make a GET request from an API(any API) with ngrx(Angular 7 and Redux). I saw some articles from web but they are about Angular 2 or requests with Observables(rxjs). How to make it with ngrx? I created the model.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>/* Defines the events entity */
  export interface Events {
      id: number;
      name: string;
      description: string;
      date: number;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>the reducer</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import { Events } from '../models/events';
  import { EventsActionTypes, EventsActions } from './events.actions';
  
  // State for this feature (Event)
  export interface EventState {
    events: Events[];
    error: string;
  }
  
  const initialState: EventState = {
    events: [],
    error: ''
  };
  
  export function reducer(state = initialState, action: EventsActions): EventState {
  
    switch (action.type) {
  
      case EventsActionTypes.Load:
        return {
          ...state,
          events: action.payload
        };
  
      
  
      default:
        return state;
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>the actions</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import { Events } from '../models/events';
  
  /* NgRx */
  import { Action } from '@ngrx/store';
  
  export enum EventsActionTypes {
    Load = '[Events] Load'
  }
  
  // Action Creators
  
  export class Load implements Action {
    readonly type = EventsActionTypes.Load;
  }
  
  
  // Union the valid types
  export type EventsActions = 
    | Load;</code></pre>
  </div>
  </div>
  </p>
  
  <p>effects</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import { Injectable } from '@angular/core';
  
  import { Observable, of } from 'rxjs';
  import { mergeMap, map, catchError } from 'rxjs/operators';
  
  import { EventsService } from '../services/events.service';
  import { Events } from '../models/events';
  
  /* NgRx */
  import { Action } from '@ngrx/store';
  import { Actions, Effect, ofType } from '@ngrx/effects';
  import * as eventsActions from './events.actions';
  
  @Injectable()
  export class eventsEffects {
  
    constructor(private eventsService: EventsService,
                private actions$: Actions) { }
  
    @Effect()
    loadeventss$: Observable&lt;Action&gt; = this.actions$.pipe(
      ofType(eventsActions.EventsActionTypes.Load),
      mergeMap(action =&gt;
        this.eventsService.getEvents().pipe(
          map(events =&gt; (new eventsActions.LoadSuccess(events))),
          catchError(err =&gt; of(new eventsActions.LoadFail(err)))
        )
      )
    );
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>service</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  
  import { Observable, of, throwError } from 'rxjs';
  import { catchError, tap, map } from 'rxjs/operators';
  import {ApiService} from '../../core/services/base.services';
  import {Events} from '../models/events'
  
  @Injectable({
    providedIn: 'root',
  })
  export class EventsService {
  
    private _eventsUrl="http://localhost:3000/api/events";
  
    constructor(private http: HttpClient, private apiService: ApiService) { }
    
    getEvents(){
        return this.apiService.get&lt;Events[]&gt;(this._eventsUrl, null, false, false);
    }
  
  
   private handleError(err) {
    // in a real world app, we may send the server to some remote logging infrastructure
    // instead of just logging it to the console
    let errorMessage: string;
    if (err.error instanceof ErrorEvent) {
      // A client-side or network error occurred. Handle it accordingly.
      errorMessage = `An error occurred: ${err.error.message}`;
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong,
      errorMessage = `Backend returned code ${err.status}: ${err.body.error}`;
    }
    console.error(err);
    return throwError(errorMessage);
  }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>the functions from apiservice are </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> public getWithParams&lt;T&gt;(url:string, params: HttpParams | null, publishException: boolean=true, loadingEnabled:boolean=true): Observable&lt;T&gt;{
          const headers: HttpHeaders=this.generatecustomHeader(loadingEnabled);
          const options={params, headers};
  
          return this.manageErrors(this.httpClient.get&lt;T&gt;(url, options), publishException);
      }
  
      public get&lt;T&gt;(url: string, params?:any, publishException: boolean=true, loadingEnabled: boolean=true): Observable&lt;T&gt;{
          const httpParams: HttpParams=params?this.makeHttpParams(params): null;
          return this.getWithParams(url, httpParams,publishException, loadingEnabled);
      }</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I make the connection with the API using the ngrx? I will appreciate any help. Thanks!</p>