我正在尝试使用 NGRX 状态管理库来实现应用程序。我能够创建操作和减速器来将数据推送到延迟加载状态。但是我正在努力实现选择器以将数据获取到组件。这是我到目前为止所做的
reducer/job-file.reducer.ts这里我使用的是ngrx实体插件
import {Action, createReducer, on} from '@ngrx/store';
import * as JobFileActions from '../actions';
import {JobFile} from '../../models/job-file.model';
import {createEntityAdapter, EntityAdapter, EntityState} from '@ngrx/entity';
export const jobFIleFeatureKey = 'jobFile';
export const adapter: EntityAdapter<JobFile> = createEntityAdapter<JobFile>({
selectId: (jobFile: JobFile) => jobFile.jobRefId
});
export interface State extends EntityState<JobFile> {
selectedJobRefId: string;
}
export const initialState: State = adapter.getInitialState({
selectedJobRefId: null,
});
export const reducer = createReducer(
initialState,
on(JobFileActions.AddJobFile as any, (state: State, action: {jobFile: JobFile}) => {
return adapter.addOne(action.jobFile, state);
})
);
export const selectedJobRefId = (state: State) => state.selectedJobRefId;
减速器/index.ts
import {ActionReducerMap } from '@ngrx/store';
import * as fromJobFile from './job-file.reducer';
export const scheduleFeatureKey = 'schedule';
export interface ScheduleState {
[fromJobFile.jobFIleFeatureKey]: fromJobFile.State;
}
export const reducers: ActionReducerMap<ScheduleState> = {
[fromJobFile.jobFIleFeatureKey]: fromJobFile.reducer
};
schedule.module.ts
import * as fromSchedule from './store/reducers';
@NgModule({
declarations: [ScheduleComponent, ContainerDetailsComponent, AssignScheduleComponent, LegComponent, ResourceOverviewPanelComponent,
ResourceNavigationComponent],
imports: [
SharedModule,
ScheduleRoutingModule,
StoreModule.forFeature('schedule', fromSchedule.reducers)
]
})
selectors.ts这是我现在苦苦挣扎的地方
import { adapter as jobFileAdaptor } from '../reducers/job-file.reducer';
import {createFeatureSelector, createSelector} from '@ngrx/store';
import { ScheduleState } from '../reducers';
export const selectJobFileState = createFeatureSelector<ScheduleState>('jobList');
export const a = createSelector(selectJobFileState, jobFileAdaptor.getSelectors().selectAll);
export const {
selectIds: selectAllJobIds,
selectAll: selectAllJobFiles,
selectEntities: selectAllJobEntities,
selectTotal: selectTotalJobs
} = jobFileAdaptor.getSelectors();