Почему undefined? Если в консоли говорит что все вытащило?Подскажите пожалуйста)
Пытаюсь вытащить авторов с помощью селектора но получаю ошибку undefined, хотя в консоль выводится что авторов я получил.

Вот мой селектор
import { createFeatureSelector, createSelector } from "@ngrx/store";
import { LIST_AUTHOR_REDUCER } from "../reducers/list-authors.reducer";
import { ListAuthorsState } from "../state/list-authors.state";
const selectGetAuthor = createFeatureSelector<ListAuthorsState>(LIST_AUTHOR_REDUCER);
export const listAuthors = createSelector(
selectGetAuthor,
(state) => state.authors
);
Мой state
import { AuthorModel } from "../../models/author.interface";
export interface ListAuthorsState{
authors: AuthorModel[];
}
export const initialListAuthorsState: ListAuthorsState = {
authors: null
}
reducer
import { ListAuthorsState, initialListAuthorsState } from '../state/list-authors.state';
import { EListAuthors, ListAuthorsActions } from '../actions/list-authors.action';
export const LIST_AUTHOR_REDUCER = "author";
export const listAuthorsReducer = (
state = initialListAuthorsState,
action: ListAuthorsActions
): ListAuthorsState => {
switch (action.type){
case EListAuthors.ListAuthorsSuccess: {
return {
...state,
authors: action.payload
};
}
default: {
return {
...state
};
}
}
}
action
import { Action } from "@ngrx/store";
import { AuthorModel } from "../../models/author.interface";
export enum EListAuthors{
ListAuthors = "[ListAuthors] ListAuthors",
ListAuthorsSuccess = "[ListAuthors] ListAuthorsSuccess"
}
export class ListAuthors implements Action{
public readonly type = EListAuthors.ListAuthors;
}
export class ListAuthorsSuccess implements Action{
public readonly type = EListAuthors.ListAuthorsSuccess;
constructor(public payload: any) {}
}
export type ListAuthorsActions = ListAuthors | ListAuthorsSuccess;
effect
@Effect()
ListAuthors = this.actions$.pipe(
ofType<listAuthorsAction.ListAuthors>(listAuthorsAction.EListAuthors.ListAuthors),
switchMap((action: listAuthorsAction.ListAuthors) => this.authorService.listAuthors()),
switchMap((model) => {
console.log(model);
return of(new listAuthorsAction.ListAuthorsSuccess(model));
}),
catchError((errorMessage) => {
console.log(errorMessage);
return of(new ErrorAuthor(errorMessage));
})
);
Мой модуль где подключены редюсер и effect
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminRoutingModule } from './admin-routing.module';
import { AdminComponent } from './admin.component';
import { ListClientComponent } from './list-client/list-client.component';
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as reducers from '../admin/store/reducers/admin.reducer';
import { ClientListEffect } from './store/effects/list-client.effect';
import { DeleteEffect } from './store/effects/delete.effect';
import { BlockEffect } from './store/effects/block.effect';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatDialogModule } from '@angular/material/dialog';
import { EditUserComponent } from './list-client/dialog/edit-user/edit-user.component';
import { UpdateEffect } from './store/effects/update.effect';
import { MatIconModule } from '@angular/material/icon';
import { MatSelectModule } from '@angular/material/select';
import { MatTableModule } from '@angular/material/table';
import { MatMenuModule } from '@angular/material/menu';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { ListPrintingEditionComponent } from './list-printing-edition/list-printing-edition.component';
import { PrintingEditionListEffect } from './store/effects/list-printing-edition.effect';
import { PipesModule } from 'src/app/pipes/pipes.module';
import { DeletePrintingEditionEffect } from './store/effects/delete-printing-edition.effect';
import { UpdatePrintingEditionEffect } from './store/effects/update-printing-edition.effect';
import { UpdatePrintingEditionComponent } from './update-printing-edition/update-printing-edition.component';
import {authorReducer, reducer} from '../author/store/reducers/author.reducer';
import { AuthorModule } from '../author/author.module';
import { ListAuthorsEffect } from '../author/store/effects/list-authors.effect';
import { listAuthorsReducer , LIST_AUTHOR_REDUCER} from '../author/store/reducers/list-authors.reducer';
@NgModule({
declarations: [AdminComponent, ListClientComponent, EditUserComponent, ListPrintingEditionComponent, UpdatePrintingEditionComponent],
imports: [
CommonModule,
AdminRoutingModule,
StoreModule.forFeature(reducers.reducer, reducers.adminReducers),
StoreModule.forFeature(LIST_AUTHOR_REDUCER, {listReducer: listAuthorsReducer}), <-- Подключен из другого модуля
EffectsModule.forFeature([ClientListEffect, DeleteEffect, BlockEffect,
UpdateEffect, PrintingEditionListEffect, PrintingEditionListEffect,
DeletePrintingEditionEffect, UpdatePrintingEditionEffect, ListAuthorsEffect]),
PipesModule.forRoot(),
FormsModule,
ReactiveFormsModule,
MatSlideToggleModule,
MatDialogModule,
MatIconModule,
MatSelectModule,
MatTableModule,
MatMenuModule,
MatCheckboxModule,
]
})
export class AdminModule { }
Компонент в котором вызываю селектор и диспатчу экшн
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { select, Store } from '@ngrx/store';
import { AuthorModel } from '../../author/models/author.interface';
import { GetAuthors } from '../../author/store/actions/get-authors.action';
import { ListAuthors } from '../../author/store/actions/list-authors.action';
import { selectAuthorModel } from '../../author/store/selectors/get-authors.selector';
import { listAuthors } from '../../author/store/selectors/list-authors.selector';
import { AuthorState } from '../../author/store/state/author.state';
import { EditPrintingEdition } from '../models/edit-printing-edition.interface';
import { CurrencyTypeEnum } from '../models/enums/printing-edition-enum/currency-type';
import { PrintingTypeEnum } from '../models/enums/printing-edition-enum/printing-type';
import { UpdatePrintingEdition } from '../store/actions/update-printing-edition.action';
import { AdminState } from '../store/state/admin.state';
@Component({
selector: 'app-update-printing-edition',
templateUrl: './update-printing-edition.component.html',
styleUrls: ['./update-printing-edition.component.scss']
})
export class UpdatePrintingEditionComponent implements OnInit {
updatePrintingEditionForm: FormGroup
errorMessage: any;
authors: AuthorModel[];
editionType: string[];
currencyType: string[];
id: string;
constructor(
private activateRoute: ActivatedRoute,
private storeAdmin$: Store<AdminState>,
private storeAuthor$: Store<ListAuthorsState>
)
{
this.updatePrintingEditionForm = new FormGroup({
"title" : new FormControl(""),
"description" : new FormControl(""),
"price" : new FormControl(""),
"currency" : new FormControl(""),
"type" : new FormControl(""),
"authors": new FormControl("")
});
}
ngOnInit(): void {
this.storeAuthor$.dispatch(new ListAuthors()); <--- Екшн
this.storeAuthor$.pipe(select(listAuthors)).subscribe( <--Вот селектор
data => {
this.authors = data;
console.log(data);
}
);
this.editionType = Object.keys(PrintingTypeEnum).filter(Number);
this.currencyType = Object.keys(CurrencyTypeEnum).filter(Number);
this.id = this.activateRoute.snapshot.paramMap.get('id');
}
updatePrintingEdition(){
let form: EditPrintingEdition = {
id: Number(this.id),
authorsId: this.updatePrintingEditionForm.controls['authors'].value,
currency: this.updatePrintingEditionForm.controls['currency'].value,
description: this.updatePrintingEditionForm.controls['description'].value,
price: this.updatePrintingEditionForm.controls['price'].value,
printing: this.updatePrintingEditionForm.controls['type'].value,
title: this.updatePrintingEditionForm.controls['title'].value
}
console.log(this.updatePrintingEditionForm);
this.storeAdmin$.dispatch(new UpdatePrintingEdition(form));
}
}