Issue with Selector
I am facing an issue with my selector in the component. Despite making the call, the component does not update with books from the FakeApiService. The actions and effects seem to be functioning correctly.
The problem seems to be related to my usage of @ngrx/Entity. Specifically this:
export const getBooksState = createFeatureSelector<DemoState>('demo');
and
export const { selectAll } = fromBook.adapter.getSelectors();
I have referred to tutorials where they provide a selector function to getSelectors(), but it doesn't seem necessary in my case.
I would appreciate it if someone could point out where I might be going wrong, and any suggestions regarding the structure/setup are welcome :)
Below is my setup:
Software Versions
- Angular: 6.0.0
- rxjs: 6.1.0
- typescript: 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 Setup
feature/store/actions/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;
feature/store/effects/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()))
);
}
feature/store/reducers/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;
}
}
}
feature/store/reducers/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');
feature/store/selectors/book.selectors.ts
import * as fromBook from '../reducers/book.reducer';
export const {selectAll} = fromBook.adapter.getSelectors();
Angular Setup
feature/feature.module.ts
@NgModule({
imports: [
CommonModule,
StoreModule.forFeature('demo', reducer),
EffectsModule.forFeature([BookEffects])
],
providers: [FakeApiService],
declarations: []
})
export class DemoModule { }
feature/components/book-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());
}
}