ngrx reducer没有被调用

Question

嗨，我仍然对NGRX有所了解。

我试图将下拉列表中的值存储到NGRX存储中，以便在加载时可以使用它在另一个组件中设置条件格式。

这是我的form.action.ts

import { createAction, props } from '@ngrx/store';

export const formAdditionalFieldsAction = createAction(
  '[Main Form] Toggle Additional Fields Section',
  props<{ showAdditionalFields: false}>()
);

我的form.reducer.ts

import { createReducer, on } from '@ngrx/store';
import { formAdditionalFieldsAction } from './form.action';

export interface AdditionalFieldsState {
  showAdditionalFields: boolean;
}

const initialState: AdditionalFieldsState = {
  showAdditionalFields: false
}

export function mainFormReducer(state: AdditionalFieldsState = initialState, action) {
  switch(action.type){
    case '[Main Form] Toggle Additional Fields Section':
      console.log("Current state: " + state.showAdditionalFields);
      return {
        ...state,
        showAdditionalFields: !state.showAdditionalFields
      }
    default:
      return state;
  }
}

当下拉菜单中的设置更改时，我正在存储值。

  selectChanged(value:string):void {
    if(value == "Show"){
      this.ShowAdditionalFieldsControl = true;
    }
    else{
      this.ShowAdditionalFieldsControl = false;
    }
    this.store.dispatch(
      {
        type: '[Main Form] Toggle Additional Fields Section'
      }
    );
  }

我的app.module.ts包含定义如下的StoreModule

StoreModule.forRoot({showAdditionalFields: mainFormReducer})

更改下拉值时，控制台中没有任何日志记录。