ngrx reducer is not being called - ngrx

Question

Hi I am still getting my head around NGRX.
I am trying to store the value of a dropdown in a component into the NGRX store so that I can then use it to set conditional formatting in another componenent when it is loaded.
Here is my form.action.ts
import { createAction, props } from '#ngrx/store';
export const formAdditionalFieldsAction = createAction(
'[Main Form] Toggle Additional Fields Section',
props<{ showAdditionalFields: false}>()
);
My 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;
}
}
I am storing the value when the drop down changes on the settings component here.
selectChanged(value:string):void {
if(value == "Show"){
this.ShowAdditionalFieldsControl = true;
}
else{
this.ShowAdditionalFieldsControl = false;
}
this.store.dispatch(
{
type: '[Main Form] Toggle Additional Fields Section'
}
);
}
And my app.module.ts contains StoreModule defined as follows
StoreModule.forRoot({showAdditionalFields: mainFormReducer})
I can't see any logging in the console when i change the dropdown value.