Почему получаю undefined?

Хочу получить ошибку в компоненте с помощью селектора что б потом вывести ее в html но получаю undefined, создал глобальный action для ошибок, на action я не писал effect, просто его вызываю вот так

 catchError((errorMessage) => {
                    console.log(errorMessage);

                    let error = JSON.parse(JSON.stringify(`${errorMessage.error.errors.Name}`));
                    console.log(error);
                    return of(new ResponseError(error));
                })
            ))

app.action.ts

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

export enum EAppAction{
    ResponseError = "[Error] ResponseError"
}

export class ResponseError implements Action{
    public readonly type = EAppAction.ResponseError;
    constructor(public payload: any){}
}

export type AppActions = ResponseError;

app.reducer.ts

import { EAppAction, AppActions } from '../actions/app.action';
import { AppState, initialAppState } from '../state/app.state';


export const appReducers = 'reducer';

export interface ErrorState extends AppState{
    errorMessage: any;
  }
   
  const initialErrorState: ErrorState = {
    errorMessage: null
  };


export const appReducer = (
    state = initialErrorState,
    action: AppActions
): ErrorState => {
    switch (action.type){
        case EAppAction.ResponseError: {
            return {
                ...state,
                errorMessage: action.payload
            };
        }
        default: {
            return {
                ...state
            };
        }
    }
};


export function reducer(state: ErrorState | undefined, action: AppActions){
    return appReducer(state, action);
  }

app.selector.ts

import { createSelector, createFeatureSelector } from '@ngrx/store';
import { appReducers, ErrorState } from '../reducers/app.reducer';


const selectApp = createFeatureSelector<ErrorState>(appReducers);

export const getMessageError = createSelector(
    selectApp,
    state => state.errorMessage
);

app.state.ts

import { ActionReducerMap, MetaReducer } from '@ngrx/store';
import { environment } from 'src/environments/environment';

export interface AppState{
  errorMessage?: any
}

export const initialAppState: AppState = {
    errorMessage: null
}

export const reducers: ActionReducerMap<AppState> = {}

export const metaReducers: MetaReducer<AppState>[] = !environment.production ? [] : []

aap.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule, HTTP_INTERCEPTORS  } from '@angular/common/http';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { environment } from '../environments/environment';
import { EffectsModule } from '@ngrx/effects';
import { StoreRouterConnectingModule } from '@ngrx/router-store';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { AuthInterceptor } from './service/authconfig.interceptor';
import { AuthGuardService } from './service/auth-guard.service';
import { reducers , metaReducers} from './store/state/app.state';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    StoreModule.forRoot(reducers,{metaReducers}),
    StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production }),
    EffectsModule.forRoot([]),
    StoreRouterConnectingModule.forRoot(),
    BrowserAnimationsModule,
    FormsModule,
  ],
  providers:
  [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    },
    AuthGuardService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

component

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { select, Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { ErrorState } from 'src/app/store/reducers/app.reducer';
import { getMessageError } from 'src/app/store/selectors/app.selector';
import { AppState } from 'src/app/store/state/app.state';
import { getErrorMessage } from '../../account/store/selectors/error.selector';
import { AccountState } from '../../account/store/state/account.state';
import { AuthorModel } from '../models/author.interface';
import { UpdateAuthor } from '../store/actions/update-author.action';
import { AuthorState } from '../store/state/author.state';

@Component({
  selector: 'app-update-author',
  templateUrl: './update-author.component.html',
  styleUrls: ['./update-author.component.scss']
})
export class UpdateAuthorComponent implements OnInit {

  updateAuthorForm: FormGroup;
  id: string;
  author: AuthorModel;

  errorMessage: any;

  constructor(
    private store$: Store<AuthorState>,
    private formBuilder: FormBuilder,
    private activateRoute: ActivatedRoute,
    private errorStore$: Store<ErrorState>,
  )
  {
    this.updateAuthorForm = new FormGroup({
      "name" : new FormControl("", Validators.required)
    });
  }

  ngOnInit(): void {
    this.id = this.activateRoute.snapshot.paramMap.get('id');

    this.errorStore$.pipe(select(getMessageError)).subscribe(
      errorMessage => {
        this.errorMessage = errorMessage;
        console.log(errorMessage);
        
      }
    )
  }

  updateAuthor(){
    let form: AuthorModel = {
      id: Number(this.id),
      name: this.updateAuthorForm.controls['name'].value,
      authorInPrintings: null
    };
    this.store$.dispatch(new UpdateAuthor(form));
  }

}