ngrx 9 не дает мне данных

Question

Я начал изучать ngrx вчера. Итак, для некоторой практики я решил переписать свой компонент, используя его. Раньше хорошо работал без ngrx. Мой showcase.component.ts:

@Component({
  selector: 'app-showcase',
  templateUrl: './showcase.component.html',
  styleUrls: ['./showcase.component.css']
})
export class ShowcaseComponent implements OnInit {
  books$ = this._store.pipe(select(selectShowcaseList));
  constructor(private _store: Store<IAppState>) {    
  }    
  ngOnInit(): void {
    this._store.dispatch(getBooks());
  }
}

showcase.effects.ts (думаю, проблема здесь):

@Injectable()
export class ShowcaseEffects {
    getBooks$ = createEffect(() => this.actions$.pipe(
        ofType('[Showcase] getBooks'),
        mergeMap(() => this.booksService.getBooks()
          .pipe(
            map(books => ({ type: '[Showcase API] BooksLoaded Success', payload: books })),
            catchError(() => EMPTY)
          ))
        )
      );


    constructor(
        private actions$: Actions,
        private booksService: BookService,
        private _store: Store<IAppState>
    ) { }
}

showcase.reducer.ts:

export const showcaseReducer = createReducer(
    initialState,
    on(showcaseActions.getBooksSuccess, (state, {books}) => ({ ...state, books: books})),
)

showcase.actions.ts:

export const getBooks = createAction(
    '[Showcase] getBooks'
)

export const getBooksSuccess = createAction(
    '[Showcase API] BooksLoaded Success',
    props<{books: Observable<Book[]>}>()
);

showcase.state.ts:

export interface IShowCaseState {
    books: Observable<Book[]>;
}

export const initialState: IShowCaseState = {
    books: null
}

showcase.selectors.ts:

export const selectShowcase = (state: IAppState) => state.showcase;

export const selectShowcaseList = createSelector(
    selectShowcase,
    (state: IShowCaseState) => state.books
);

мои состояния являются:

export interface IAppState {
    showcase: IShowCaseState;
    test: ITestState;
}

export interface IShowCaseState {
    books: Book[];
}

export const initialState: IShowCaseState = {
    books: null
}

app.module:

@NgModule({
  declarations: [
    AppComponent,
    AuthenticationComponent,
    ShowcaseComponent,
    CartComponent,
    AccountComponent,
    CreateBookComponent,
    TestComponent //ttt
  ],
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    BrowserModule,
    AppRoutingModule,
    //запихнуть в отдельный модуль
    StoreModule.forRoot({ books: fromShowcase.showcaseReducer, test: fromTest.testReducer }),
    EffectsModule.forRoot([ShowcaseEffects]),
    StoreDevtoolsModule.instrument({
      maxAge: 10
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Консоль сообщает мне, что переменные книги $ не определены. Я не нашел хорошего примера с новыми синтаксисами NGRX 9.X для своих целей. Если у вас есть примеры приложений NGRX 9.X, в которых используются эффекты со службами извлечения данных, пришлите мне ссылку, пожалуйста.

Answer 1

Вы отправляете неверные данные в полезной нагрузке. Ваш редуктор ожидает объект с атрибутом books, но вместо этого он получает массив книг. Вы можете исправить это, немного изменив свой эффект:

import * as fromActions from '...showcase.actions'

...

getBooks$ = createEffect(() => this.actions$.pipe(
  ofType(fromActions.getBooks),

  // instead of returning an empty operator in catchError, let's return an empty array
  switchMap(() => this.booksService.getBooks().pipe(catchError(() => of([])))),

  // the main problem in your code was this "payload: books"; use, instead, "payload: {books}"
  map(books => fromActions.getBooksSuccess({books})),
));

И давайте исправим ваше getBoosSuccess действие

export const getBooksSuccess = createAction(
    '[Showcase API] BooksLoaded Success',
    props<{books: Book[]}>()
);

Также исправим ваше состояние:

export interface IShowCaseState {
    books: Book[];
}

export const initialState: IShowCaseState = {
    books: []
}

Я что-то соединил на стеке .