ngrx/entity 中的 SelectAll 不选择任何内容

Posted 2023-02-19

【中文标题】ngrx/entity 中的 SelectAll 不选择任何内容

【英文标题】：SelectAll from ngrx/entity doesn't select anything

【发布时间】：2018-10-23 22:18:27

【问题描述】：

简介

我的选择器无法正常工作。我的组件没有更新来自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/效果 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

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;
    
  

功能/存储/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();

角度

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

【问题讨论】：

放入stackblitz

【参考方案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);

看看我的仓库和网址

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

【讨论】：

这看起来像我在网上看到的演示/教程。我不明白需要状态选择器。我认为没有它应该是可能的。

我的想法和你现在的想法一样。我也有同样的困惑，然后我也在 ngrx gitter 中问了同样的问题。希望这会对你有所帮助。

很容易理解，可以在选择器stateBookState中打断点，查看state.demo的值！