angular - Ngrx 选择器直接或复合

Question

我有这个状态

export interface State {
  error: string | null;
  loaded: boolean;
  loading: boolean;
  data: MyDto | undefined;
}

用这个选择器

export const selectData = createSelector(selectFeature, (state: MyDto) => {
  if (state.data) {
    return state.data;
  }
  return undefined;
});
export const selectError = createSelector(selectFeature, (state: MyDto) => {
  return state.error;
});
export const selectLoaded = createSelector(selectFeature, (state: MyDto) => {
  return state.loading;
});
export const selectLoading = createSelector(selectFeature, (state: MyDto) => {
  return state.loading;
});

为了避免额外的渲染我想要一个单一的选择器什么是最好的方法以及为什么

直接的

export const selectVm = createSelector(selectFeature, (state: MyDto) => {
  return state;
});

或者

export const selectVm = createSelector(
  selectError,
  selectLoaded,
  selectLoading,
  selectData
  (error, loaded, loading, data) => {
    return {
      error,
      loaded, 
      loading,
      data
    };
  }
);