尝试访问嵌套属性时 NgRx 选择错误

Question

在访问嵌套属性时使用 NgRx 选择函数时出现 TypeErrors。

我在app.module.ts 中配置了我的根存储，如下所示：

StoreModule.forRoot({ app: appReducer }),

app reducer 只是一个标准的 reducer。它正确地设置了状态；我可以在 redux 开发工具中看到这一点。一些出错的嵌套属性的选择器是：

const getAppFeatureState = createFeatureSelector<IAppState>('app');

export const getAppConfig = createSelector(getAppFeatureState, state => {
  return state.appConfig.data;
});

export const getConfigControls = createSelector(getAppConfig, state => {
  console.log({ state }) // logs values from initial state
  return state.controls;
});

export const getConfigDropdowns = createSelector(
  getConfigControls,
  state => state.dropdowns,
);

当我像这样在app.compontent.ts 订阅这些选择器时

ngOnInit() {
  this.store.dispatch(new appActions.LoadAppConfig());
  this.store
    .pipe(select(appSelectors.getConfigDropdowns))
    .subscribe(data => {
      console.log('OnInit Dropdowns Data: ', data);
    });
}

app.component.ts:31 ERROR TypeError: Cannot read property 'dropdowns' of null at app.selectors.ts:18

当我将日志记录添加到链更高的选择器时，我可以看到唯一记录的元素是 initialState 值，它们设置为 null。我不认为这个选择器函数应该在值从它的初始值改变之前触发。但既然它没有，我得到这个错误也就不足为奇了，因为它试图访问 null 上的属性。 initialState 是否有必要包含所有潜在的未来嵌套属性的完整树，以免破坏我的选择器？

如何防止此选择器在其值不变时触发？

另外，StoreModule.forRoot 的配置是否正确？让我有些困惑的是，创建一个“根”存储，在我的 redux 存储中创建与我的模块存储平行的 app 键，即模块存储不在 app 之下。

编辑：

添加app.reducer.ts的通用结构。我使用immer 来缩短更新嵌套属性所需的样板文件，但是我也尝试过这个reducer 作为更传统的类型，它在整个地方都有传播运算符，它的工作原理是一样的。

import produce from 'immer';

export const appReducer = produce(
  (
    draftState: rootStateModels.IAppState = initialState,
    action: AppActions,
  ) => {
    switch (action.type) {
      case AppActionTypes.LoadAppConfig: {
        draftState.appConfig.meta.isLoading = true;
        break;
      }
      /* more cases updating the properties accessed in problematic selectors */
      default: {
        return draftState; // I think this default block is unnecessary based on immer documentation
      }
    }
}

编辑：添加initialState：

const initialState: rootStateModels.IAppState = {
  user: null,
  appConfig: {
    meta: {isError: false, isLoading: false, isSuccess: false},
    data: {
      controls: {
        dropdowns: null,
      }
    },
  },
};

Answer 1

因为你更新了你的问题，所以答案是https://www.learnrxjs.io/learn-rxjs/operators/filtering/distinctuntilchanged

它只允许在值被更改时发出值。

store.pipe(
  map(state => state.feature.something),
  distinctUntilChanged(),
)

要求 state.feautre.something 已更改。

正确的方法是使用createSelector 函数，该函数返回与distinctUntilChanged 工作方式相同的记忆选择器。

Answer 2

好的，我再次查看代码并更新了我的答案。

你可以试试下面给出的示例吗？

this.store
  .pipe(
    // Here `isStarted` will be boolean value which will enable and disable selector. 
    //This can be derived from initial state, if null it wont go to next selector
    switchMap(data => {
      if (isStarted) {
        return never();
      } else {
        return of(data);
      }
    }),
    switchMap(data => select(appSelectors.getConfigDropdowns))
  )
  .subscribe(data => {
    console.log("OnInit Dropdowns Data: ", data);
  });

Answer 3

dispatch 方法是异步的。 所以：

ngOnInit() {
  this.store.dispatch(new appActions.LoadAppConfig());
  this.store
    .pipe(select(appSelectors.getConfigDropdowns))
    .subscribe(data => {
      console.log('OnInit Dropdowns Data: ', data);
    });
}

这里订阅的运行速度比dispatch 快，因此选择从您的初始状态返回空值。只需在选择器中检查它或添加初始状态。例如：

const getAppFeatureState = createFeatureSelector<IAppState>('app');

export const getAppConfig = createSelector(getAppFeatureState, state => {
  return state.appConfig.data;
});

export const getConfigControls = createSelector(getAppConfig, state => {
  console.log({ state }) // logs values from initial state
  return state.controls;
});

export const getConfigDropdowns = createSelector(
  getConfigControls,
  state => state ? state.dropdown : null,
);

Answer 4

您可以使用filter 运算符确保它只为有效值发出值，然后您可以使用pluck 运算符发出相应嵌套属性的值。

store.pipe(
  filter(value => state.feature.something),
  pluck('feature', 'something'),
)