SelectAll из ngrx/entity ничего не выбирает

Question

вступление

У меня возникли проблемы с работой моего селектора. Мой компонент не обновляется книгами из FakeApiService хотя я вижу, что звонок сделан. Так что действия и эффекты работают.

Я считаю, что проблема связана с моим использованием @ngrx/Entity, Именно это

export const getBooksState = createFeatureSelector<DemoState>('demo');

а также

export const { selectAll } = fromBook.adapter.getSelectors();

Я видел учебники, где они предоставляют функцию селектора getSelectors() но это не должно быть необходимым.

Я надеюсь, что кто-то может определить, где я ошибаюсь, и если у кого-то есть какие-то предложения по структуре / настройке, я все уши:)

Вот мои настройки.

Версии

• Угловой: 6.0.0
• rxjs 6.1.0
• машинопись 2.7.2
• WebPack 4.6.0
• @ ngrx / Effects 5.2.0
• @ ngrx / entity 5.2.0
• @ ngrx / router-store 5.2.0
• @ ngrx / schematics 5.2.0
• @ ngrx / store 5.2.0
• @ ngrx / store-devtools 5.2.0

ngRx

особенность / магазин / действия /book.actions.ts

import { Action } from '@ngrx/store';
import { Book } from '../../models/book';

export enum BookActionTypes {
  Load = '[Book] Load',
  LoadSuccess = '[Book] Load Success',
  LoadFail = '[Book] Load Fail'
}

export class LoadBooksAction {
  readonly type = BookActionTypes.Load;
}

export class LoadBooksSuccessAction implements Action {
  readonly type = BookActionTypes.LoadSuccess;
  constructor(public payload: Book[]) {}
}

export class LoadBooksFailAction {
  readonly type = BookActionTypes.LoadFail;
}

export type BookActions
  = LoadBooksAction
  | LoadBooksSuccessAction
  | LoadBooksFailAction;

особенность / магазин / эффекты /book.effects.ts

import { Injectable } from '@angular/core';
import { Actions, Effect } from '@ngrx/effects';
import { of } from 'rxjs';
import { catchError, map, switchMap } from 'rxjs/operators';
import { FakeApiService } from '../../services/fake-api.service';
import { LoadBooksFailAction, LoadBooksSuccessAction, BookActionTypes } from '../actions/book.actions';

@Injectable()
export class BookEffects {
    constructor(
        private fakeService: FakeApiService,
        private actions$: Actions,
    ) {}

    @Effect()
    loadBooks$ = this.actions$
      .ofType(BookActionTypes.Load)
      .pipe(
        switchMap(() => this.fakeService.getBooks()),
        map(books => (new LoadBooksSuccessAction(books))),
        catchError(error => of(new LoadBooksFailAction()))
      );
}

особенность / магазин / редукторы /book.reducer.ts

import { EntityState, createEntityAdapter } from '@ngrx/entity';
import { Book } from '../../models/book';
import { BookActionTypes, BookActions } from './../actions/book.actions';

export interface BooksState extends EntityState<Book> {}

export const adapter = createEntityAdapter<Book>();

const initialState: BooksState = adapter.getInitialState();

export function reducer(state = initialState, action: BookActions ): BooksState {
  switch (action.type) {
    case BookActionTypes.LoadSuccess: {
      return adapter.addAll(action.payload, state);
    }

    default: {
      return state;
    }
  }
}

особенность / магазин / редукторы /index.ts

import { ActionReducerMap, createFeatureSelector } from '@ngrx/store';
import * as fromOrder from './book.reducer';

export interface DemoState {
  demo: fromBook.BooksState;
}

export const reducers: ActionReducerMap<DemoState> = {
  demo: fromBook.reducer
};

export const getBooksState = createFeatureSelector<DemoState>('demo');

особенность / магазин / селекторы /book.selectors.ts

import * as fromBook from '../reducers/book.reducer';

export const {selectAll} = fromBook.adapter.getSelectors();

угловатый

функция / feature.module.ts

@NgModule({
  imports: [
    CommonModule,
    StoreModule.forFeature('demo', reducer),
    EffectsModule.forFeature([BookEffects])
  ],
  providers: [FakeApiService],
  declarations: []
})
export class DemoModule { }

особенность / компоненты / книга-view.component.ts

@Component({
  selector: 'app-book-view',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<book-list [books]="books$ | async"></book-list>`
})
export class BookViewComponent implements OnInit {
  books$: Observable<Book[]>;

  constructor(private store: Store<fromStore.BooksState>) {
    this.books$ = this.store.pipe(select(fromStore.selectAll));
  }

  ngOnInit() {
    this.store.dispatch(new bookActions.LoadBooksAction());
  }
}

Answer 1

Проблема с вашим селектором; Вы должны передать книжное / демонстрационное состояние в функции getSelectors

import * as fromBook from '../reducers/book.reducer';

import { getBooksState } from '../reducers';

export const selectBookState = createSelector(
  getBooksState,
  state => state.demo
);

export const {
  selectAll
} = fromBook.adapter.getSelectors(selectBookState);

посмотрите мой репо и URL

https://github.com/rijine/itunes-album-angular/blob/master/src/app/album/store/selectors/albums.selector.ts