Cannot read property from Map that is a signal

[dreamstar-enterprises]

Which @ngrx/* package(s) are the source of the bug?

signals, store

Minimal reproduction of the bug/regression with instructions

This is my Signal Store

When in the component I call this.filterModalStore.entireMap(), I can see the full map
When in the component I call this.filterModalStore.selectedUnits(), it keeps returning undefined
When in the component I call this.filterModalStore.filterModalMap()["contract-filter-units"], I see the property

I really cannot see where I'm going wrong...

/**********************************************************************************************************************/
/******************************************************* STORE ********************************************************/
/**********************************************************************************************************************/

/**********************************************************************************************************************/
/* State Type definitions */
/**********************************************************************************************************************/

type FilterModalsState = {
  filterModalMap: { [modalType: string]: any };
};

/**********************************************************************************************************************/
/* Initial State */
/**********************************************************************************************************************/

const initialState: FilterModalsState = {
  filterModalMap: <{ [modalType: string]: {} }>{},
};

/**********************************************************************************************************************/
/* NGRX Signal Store */
/**********************************************************************************************************************/

export const FilterModalStore = signalStore(
  {providedIn: 'root'},
  withState(initialState),

  withComputed((store) => {
    return {
      selectedUnits: computed(() => {
        const filterModalMap = store.filterModalMap()
        return filterModalMap["contract-filter-units"]
      }),
      selectedDepartments: computed(() => {
        return store.filterModalMap()["contract-filter-departments"]
      }),
      entireMap: computed(() => {
        const filterModalMap = store.filterModalMap()
        return filterModalMap
      }),
    }
  }),

  withMethods((store) => {
    return {
      updateFilterModalMap(modalType: string, modalData: any) {
        const updatedFilterModalMap = store.filterModalMap();
        updatedFilterModalMap[modalType] = modalData;
        patchState( store, { filterModalMap: updatedFilterModalMap})
      }
    }
  }),

  withHooks((store) => {
    return {
      onInit() {},
      onDestroy() {},
    };
  }),
);

/**********************************************************************************************************************/
/*************************************************** END OF ANGULAR ***************************************************/
/**********************************************************************************************************************/

Expected behavior

See above

Versions of NgRx, Angular, Node, affected browser(s) and operating system(s)

"@ngrx/operators": "^17.2.0",
"@ngrx/signals": "^17.2.0",

Other information

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[rainerhahnekamp]

@dreamstar-enterprises, here's a link for a Stackblitz that is set up with the SignalStore. Please use that and paste the link here.

https://stackblitz.com/edit/ngrx-signal-store-starter

Would help a lot. Thanks!

[dreamstar-enterprises]

Hi Rainer, I've highlighted the string vs Type issue below, that I found.

[rainerhahnekamp]

@dreamstar-enterprises , sorry I didn't follow this conversation the last two days. Seems to me that @MeMeMax has already answered it, right?

FilterModalMap: Record<string, FilterModalData | undefined>. --> Deep signalling did not work! Not sure if intentional or a bug!

This one is new?

[dreamstar-enterprises]

Yes, thats a new bug I suppose. I can only get it to work, if I replace string, with an enum (otherwise when I hover over 'store' - e.g. in withMethods, it says Signal... rather than DeepSignal)

[dreamstar-enterprises]

Thank you! I will try it out.

This works (it triggers when the nested array, selectedItemsState, changes)

selectedUnits: computed( () => {
     return filterModalStore.filterModalMap()
}),

I get, as expected this object, with a new state for the nested property, selectedItemsState.

{ "contract-filter-units": { "modalType": "contract-filter-units", "selectedItemsState": [ "Sound Unit" ], "cancelOrResetLabel": "Reset" } }

But the below doesn't work, when the nested array, selectedItemsState, changes...

selectedUnits: computed( () => {
   return filterModalStore.filterModalMap()["contract-filter-units"]
}),

And I'm not sure why... I want to try and get selectedItemsState, when this map changes,

type FilterModalState = {
  filterModalMap: { [modalType: string]: any };
};

[dreamstar-enterprises]

I gave up, and ultimately resorted to doing this, instead of trying to create a dynamic map (since right now deep signals are not supported)

const initialState: FilterModalState = {
  filterModalUnits: {
    selectedItemsState: [],
    cancelOrResetLabel: ''
  },
  filterModalDepartments: {
    selectedItemsState: [],
    cancelOrResetLabel: ''
  }
}

[rainerhahnekamp]

Could you please create a StackBlitz for it? Then we have something where we can collaborate and don't have to share code snippets.
Btw. I think this shouldn't be an issue but should be moved to the Discussions panel.

[dreamstar-enterprises]

Somebody has already done a great job of answering why

store.Map()[key] wasn't triggering in a compute, when a nested item (like a nested array) changed.
(My manual way, I'm still not sure why it didn't work)

But, after giving up, the next day (this morning) I then ungave up, and found this documentation: https://ngrx.io/guide/signals/signal-store/entity-management

It worked great, when you have data in Maps. (somehow the library takes care of any deep signalling changes)

[MeMeMax]

withEntities works but notice that you don't have granular control over what is triggered. So everything fires where you use store.entityMap() on every change anywhere in the map. This might impact your performance.

[dreamstar-enterprises]

Hmm, possibly. I basically create computed signals like this (since I wanted the ability to add keys dynamically in the Map, without having to create separate set/ update functions for each key)

withComputed(
selectedUnits: computed( () => return store.entityMap()[units]
selectedDepartments: computed( () => return store.entityMap()[deparments]
)

Then in my view component, I called something like:

{{ store.selectedUnits }}

, and

{{ store.selectedDepartments }}

, and

I also use store.selectedUnits, and store.selectedDepartments in other service functions.

Is there a better way. You're saying that if anything in the entityMap changes, then both derived computed signals will re-trigger?

You think I should not use entityMap, but explicity define a nested object with selectedUnits and selectedDepartments already explicity defined in that object, and then in the state? Then in my getters through my app I can usestore.object.key(), but I would need to define separate getters, I think?)

[MeMeMax]

Yes, they will re-trigger since the signal level is only on entityMap, not on the underlying elements. Therefore when you addEntity or updateEntity the map changes and everything using the map is re-evaluated.

I ended up using the signalState approach with a service. In this service I have a map (Record<number,any>) which is not a signal. Only elements in this map are signals which I add through a function. When I now access a specific element of that map it is only re-evaluated when it explicitly changes.

[dreamstar-enterprises]

Thanks for explaining. So something like

Service{ 
const Map : Record<number,WritableSignal<any>>
}

Store {
withMethods ((store) => {
const service = inject(Service)
return {
           setKey(number, value): { service.Map[number] = value }
           getKey(number): { return service.Map[number] }
}
})
}

Will this in a view template trigger?

{{ service.Map[number] }} - when the signal changes?

I tried the same approach initially, but putting const Map in the Store State, but it didn't work (and why I went with withEntities. Maybe you're doing something different?

Thank you in advance

[MeMeMax]

I don't have an additional store. I just have the service like in this example: https://ngrx.io/guide/signals/signal-state#example-2-signalstate-in-a-service

[dreamstar-enterprises]

Thanks. The more finegrained way works (tbh I cannot tell the performance difference, but I suppose any extra efficiency counts!)

I DID NOTICE that if I changed the type from

FilterModalMap: Record<FilterTypes, FilterModalData | undefined> to

FilterModalMap: Record<string, FilterModalData | undefined>. --> Deep signalling did not work! Not sure if intentional or a bug!

State Type Definitions

export type FilterTypes = ContractFilterTypes

export type FilterModalData = {
  selectedItemsState: string[];
  cancelOrResetLabel: string;
}

export type FilterModalDataState = {
  FilterModalMap: Record<FilterTypes, FilterModalData | undefined>
}

Initial State

const initialState: FilterModalDataState = {
  FilterModalMap: {
    [ContractFilterTypes.UNITS]: undefined,
    [ContractFilterTypes.DEPARTMENTS]: undefined,
  }
}

NGRX Signal Store

export const FilterModalStore = signalStore(
  {providedIn: 'root'},

  withState(initialState),

  withComputed((store) => {
    return {
      selectedUnits: computed(() => {
        return store.FilterModalMap[ContractFilterTypes.UNITS]()?.selectedItemsState ?? []
      }),
      selectedDepartments: computed(() => {
        return store.FilterModalMap[ContractFilterTypes.DEPARTMENTS]()?.selectedItemsState ?? []
      }),
    }
  }),

  withMethods((store) => {
    return {
      setFilterModal(modalType: FilterTypes, modalData: FilterModalData) {
        patchState(store,(state) => ({
          FilterModalMap: {...state.FilterModalMap, [modalType]: modalData }
        }));
      },
      resetAllContractFilters() {
        const contractUnits: FilterModalData = {
          selectedItemsState: [],
          cancelOrResetLabel: "Cancel"
        }
        const contractDepartments: FilterModalData = {
          selectedItemsState: [],
          cancelOrResetLabel: "Cancel"
        }
        patchState(store,(state) => ({
          FilterModalMap: {...state.FilterModalMap,
            [ContractFilterTypes.UNITS]: contractUnits,
            [ContractFilterTypes.DEPARTMENTS]: contractDepartments,
          }
        }));
      }
    };
  }),

  withHooks((store) => {
    return {
      onInit() {},
      onDestroy() {},
    };
  }),

)