title: Reducer error always undefined when passing wrong URL in NgRx in Ionic 3
body: <p>Could someone help me to see what's wrong here that every time I try to cause an error I get:
  <code>core.js:12632 ERROR TypeError: Cannot read property 'error' of undefined</code></p>
  <p>My Effect:</p>
  <pre><code>  @Effect() loadByEmail = this.actions
      .pipe(
        ofType(ProfileActions.ActionTypes.Begin),
        map((action: ProfileActions.LoadProfileBegin) =&gt; action),
        switchMap(action =&gt; this.service.loadByEmail(action.email, true)),
        map(response =&gt; ({
          type: ProfileActions.ActionTypes.Success,
          payload: response,
          error: null
        })),
        catchError((error) =&gt; of ({
          type: ProfileActions.ActionTypes.Failure,
          error: error
        }))
      );
  </code></pre>
  <p>The reducer:</p>
  <pre><code>export interface ProfileState {
    payload: any;
    loading: boolean;
    error: any;
  }
  
  const initialState: ProfileState = {
    loading: false,
    error: null,
    payload: null
  };
  
  export function profileReducer(state = initialState, action: profileActions.ActionsUnion): ProfileState {
    switch (action.type) {
  
      case profileActions.ActionTypes.Begin: {
        return {
          ...state,
          loading: true,
          error: null
        };
      }
  
      case profileActions.ActionTypes.Success: {
        return {
          ...state,
          loading: false,
          payload: action.payload.data
        };
      }
  
      case profileActions.ActionTypes.Failure: {
        return {
          ...state,
          loading: false,
          error: action.payload.error /* this is the line 49*/
        };
      }
  
      default: {
        return state;
      }
    }
  }
  
  export const getProfile = (state: ProfileState) =&gt; state.payload;
  </code></pre>
  <p>I think I might be doing some big mistake here that causes this problem, I need to capture the error when subscribing.</p>
  <p>Here are the actions, actually it's a very basic stuff, it's just a flow to load a profile from the web service by an email address.</p>
  <p>Here are the three actions:</p>
  <pre><code>export enum ActionTypes {
    Begin = &quot;[Profile] Load data begin&quot;,
      Success = &quot;[Profile] Load data success&quot;,
      Failure = &quot;[Profile] Load data failure&quot;
  }
  
  export class LoadProfileBegin implements Action {
    readonly type = ActionTypes.Begin;
    constructor(public email: string) {}
  }
  
  /**
   * The main thing to note here is that our LoadDataSuccess and 
   * LoadDataFailure actions will include a payload - we will either 
   * pass the loaded data along with LoadDataSuccess or we will 
   * pass the error to LoadDataFailure.
   */
  export class LoadProfileSuccess implements Action {
    readonly type = ActionTypes.Success;
  
    constructor(public payload: {
      data: any
    }) { }
  }
  
  export class LoadProfileFailure implements Action {
    readonly type = ActionTypes.Failure;
  
    constructor(public payload: {
      error: any
    }) { }
  }
  
  export type ActionsUnion = LoadProfileBegin | LoadProfileSuccess | LoadProfileFailure;
  </code></pre>
  <p>Then I have a service to call a rest service which will return an Observable to the Effect:</p>
  <pre><code>  public loadByEmail(email: string, showLoading ? : boolean): Observable &lt; any &gt; {
      const data: any = {
        'email': email
      };
      return &lt;Observable &lt; any &gt;&gt; this.restService.sendPost('profiles__/find-by-email', data);
    }
  </code></pre>
  <p>Then I have two methods: one to dispatch the action and the other to return the state:</p>
  <pre><code>  loadProfileState(email: string) {
      this.store.dispatch(new ProfileActions.LoadProfileBegin(email));
    }
  
    getProfileState(): Store &lt; ProfileState &gt; {
      return this.store.select(getProfileState);
    }
  </code></pre>
  <p>And then in some component I subscribe trying to catch the error:</p>
  <pre><code>this.profileService.getProfileState().subscribe(state =&gt; {
    if (state.payload) {
      const profile = state.payload.json;
      this.setProfileData(profile, true);
    } 
  
    if (state.error){
      // This one here never reaches
    }
  });
  </code></pre>
  <p>As you can see on the image below the error happens but never capture and passed using the action:
  <a href="https://i.stack.imgur.com/R7mzP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R7mzP.png" alt="enter image description here" /></a></p>
  <p>I know it's a lot but if someone could notice anything and point it to me I would appreciate very much.</p>