嵌套状态的 CreateFeatureSelector (combineReducers)答案

【问题标题】：CreateFeatureSelector for nested state (combineReducers)嵌套状态的 CreateFeatureSelector (combineReducers)
【发布时间】：2022-07-13 14:59:02
【问题描述】：

我正在开发的应用程序商店如下所示：

export const reducers: ActionReducerMap<State> = {
  auth: authReducer,
  settingsSlice: settingsReducer,
  incidentsSlice: incidentListReducer,
  networkStatus: networkStatusReducer,
  incidentSlice: incidentReducer,
};

我正在努力为 eventSlice 内部的东西创建特征选择器，因为该切片非常大并且有很多嵌套切片。

例如：conferenceCallSlice 在incidentSlice 内，我需要在conferenceCallSlice 内选择callStatus。所以我试过这个，除其他外，但我什么都做不了：

export const selectIncidentSlice = createFeatureSelector(\'incidentSlice\');
export const selectConferenceCall = createSelector(selectIncidentSlice, (state: any) => state.conferenceCall);
export const selectConferenceCallConfig = createSelector(selectIncidentSlice, (state: any) => state.conferenceCall.conferenceCall);
export const selectCallStatus = createSelector(selectConferenceCall, (state: any) => state.conferenceCall.callStatus);

作为参考，这是 IncidentSlice 减速器：

export interface IncidentState {
  currentIncident: CurrentIncidentState;
  statusBoard: StatusBoardState;
  stakeholders: StakeholderState;
  conferenceCall: ConferenceCallState;
}


export const reducer = combineReducers({
  currentIncident: currentIncidentReducer,
  statusBoard: statusBoardReducer,
  stakeholders: stakeholderReducer,
  conferenceCall: conferenceCallReducer,
});

这里也是 ConferenceCall Reducer：

export interface ConferenceCallState {
  conferenceCall: VideoCallRoomConfig;
  callStatus: CallStatus;
}

export const initialState: ConferenceCallState = {
  conferenceCall: conferenceCallConfigData,
  callStatus: CallStatus.NO_CALL,
};

我究竟做错了什么？

标签： angular state ngrx store

【解决方案1】：

createFeatureSelector 只能用于状态树的顶级切片。在您的情况下，auth、settingsSlice、incidentsSlice、networkStatus 和 incidentSlice。

要从incidentSlice 中选择状态，您共享的代码 sn-p 应该是正确的（但您不必添加额外的类型，这些应该是推断出来的。

export const selectIncidentSlice = createFeatureSelector<IncidentSliceState>('incidentSlice');
export const selectConferenceCall = createSelector(selectIncidentSlice, (state) => state.conferenceCall);
export const selectConferenceCallConfig = createSelector(selectIncidentSlice, (state) => state.conferenceCall.conferenceCall);
export const selectCallStatus = createSelector(selectConferenceCall, (state => state.conferenceCall.callStatus);

如果您希望生成这些选择器，请查看createFeature

【讨论】：