如何创建比较选择器并正确调度它



我已经试着阅读了官方文档,但并没有很好地理解它。

我想做的是两件事,它们是:

  1. 返回isMain为true的人
  2. 使用选择器正确构建体系结构

我对如何返回这个特定的人有疑问,我也对如何在架构中正确地构造这个选择器的调度有疑问。

减员:

import { EntityState, EntityAdapter, createEntityAdapter } from '@ngrx/entity';
import { People } from '@shared/interfaces/people.interface';
import * as fromPeopleAction from './people.actions';
export interface State extends EntityState<People> {}
export const adapter: EntityAdapter<People> = createEntityAdapter<People>({
selectId: (people: People) => people.id,
});
const INIT_STATE: State = adapter.getInitialState({
data: null,
error: null,
loading: false,
});
export function reducer(state = INIT_STATE, action: fromPeopleAction.Actions) {
switch (action.type) {
case fromPeopleAction.ActionTypes.CREATE:
return adapter.addOne(action.payload.people, {
...state,
data: action.payload.people,
loading: true,
});
case fromPeopleAction.ActionTypes.CREATE_SUCCESS:
return adapter.addOne(action.payload.people, state);
case fromPeopleAction.ActionTypes.CREATE_FAIL:
return adapter.addOne(action.payload.people, {
...state,
error: action.payload.error,
loading: false,
});
default:
return state;
}
}

人员服务

import { Injectable } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { People } from '@app/shared/interfaces/people.interface';
import { StoreState } from '@app/store/index';
import * as fromPeopleActions from '@app/store/people/people.actions';
import * as fromPeopleSelectors from '@app/store/people/people.selectors';
@Injectable({ providedIn: 'root' })
export class PeopleService {
people$: Observable<Array<People[]>>;
constructor(private store: Store<StoreState>) {}
get(peopleId: string): any {
this.store.dispatch(new fromPeopleActions.PeopleGet());
}
create(people: People): any {
this.store.dispatch(new fromPeopleActions.PeopleCreate({ people }));
}
update(people: Partial<People>): any {
this.store.dispatch(new fromPeopleActions.PeopleUpdate({ id: people.id, changes: people }));
}
}

人员选择

import { createFeatureSelector, createSelector } from '@ngrx/store';
import { State, adapter } from './people.reducer';
const featureSelector = createFeatureSelector<State>('people');
export const { selectIds, selectEntities, selectAll, selectTotal } = adapter.getSelectors(featureSelector);
export const getMainPeople = createSelector(featureSelector, (state: State) => {
state.ids.forEach((id: any) => {
if (state.entities[id].isMain) {
return state.entities;
}
});
});

您几乎做对了,您需要返回找到的人员,而不是在forEach内部,而是在回调本身中。

export const getMainPeople = createSelector(featureSelector, (state: State) => {
for (const id of state.ids) {
if (state.entities[id].isMain) {
return state.entities[id]; // <- don't forget to add id.
}
}
});

最新更新