关于angular：来自ngrx / entity的SelectAll不会选择任何内容

SelectAll from ngrx/entity doesn't select anything

介绍

我的选择器无法正常工作。尽管可以看到调用已完成，但是FakeApiService中的书没有更新我的组件。因此，作用和效果是有效的。

我相信问题与我使用@ngrx/Entity有关。特别是这个

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

和

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

我看过一些教程，其中提供了getSelectors()的选择器功能，但这不是必须的。

我希望有人可以找出我要去的地方，如果有人对结构/设置有任何建议，我会非常注意:)

这是我的设置。

版本号

角度：6.0.0
rxjs 6.1.0
打字稿2.7.2
webpack 4.6.0
@ ngrx /效果5.2.0
@ ngrx /实体5.2.0
@ ngrx /路由器存储5.2.0
@ ngrx / schematics 5.2.0
@ ngrx /商店5.2.0
@ ngrx / store-devtools 5.2.0

ngRx

功能/商店/动作/book.actions.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

1
2
3
4
5
6
7
8
9
10
11
12

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

1
2
3

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

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

角度的

feature / feature.module.ts

1
2
3
4
5
6
7
8
9
10

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

功能/组件/book-view.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

@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());
}
}