介绍
我在让我的选择器工作时遇到了一些麻烦。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
- 网络包 4.6.0
- @ngrx/效果 5.2.0
- @ngrx/实体 5.2.0
- @ngrx/路由器商店 5.2.0
- @ngrx/原理图 5.2.0
- @ngrx/商店 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()))
);
}
功能/商店/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;
}
}
}
功能/存储/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');
功能/商店/选择器/book.selectors.ts
import * as fromBook from '../reducers/book.reducer';
export const {selectAll} = fromBook.adapter.getSelectors();
角
功能/功能.module.ts
@NgModule({
imports: [
CommonModule,
StoreModule.forFeature('demo', reducer),
EffectsModule.forFeature([BookEffects])
],
providers: [FakeApiService],
declarations: []
})
export class DemoModule { }
功能/组件/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());
}
}