joshuamorony / angularstart-quicklists Goto Github PK

the problem appears in the check-list.component.ts in the template value, the message is:

Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)ngtsc(-995002)
Invalid ICU message. Missing '}'.ngtsc(-995002)

I was having trouble implementing untracked() with your state management design. It appears that each time I call this.state.update() inside of a service, every selector gets recomputed because it is tracking a state signal with computed(), therefore an effect tracking any of my selectors gets run again. In my case, I want to have an effect that will have 2 selectors inside of it, but track only one of them and use the other one just to get the value from it.

After some playing around I made some changes inside of the service that changed the way state and selectors are defined, but preserved the way a service is being used inside of a component.

I will present my changes grouped by the 4 main parts of your service design (state, selectors, sources and reducers) and will take for an example your ChecklistItemService.

State:
I am not defining properties with their actual type, but I am wrapping them inside of a WritableSignal, turning state in a "container" for signals. Inside of a ChecklistItemService that would look like this:

export interface ChecklistItemsState {
    checklistItems: WritableSignal<ChecklistItem[]>;
    loaded: WritableSignal<boolean>;
}

//Inside of service class
private state: ChecklistItemsState = {
    checklistItems: signal<ChecklistItem[]>([]),
    loaded: signal<boolean>(false),
};

With this, my state is actually an object holding all signals in one place.

Selectors:
I would not have computed() anymore, I would just access a signal from my state and cast it to Signal so that inside of a component (or anywhere else) I don't have access to .set() like I would have if I were to work with WritableSignal.

checklistItems: Signal<ChecklistItem[]> = this.state.checklistItems;
loaded: Signal<boolean> = this.state.loaded;

Sources:
Sources stay the same just like you already designed them.

Reducers:
In my approach, instead of this.state.update() I would set the new value directly to a certain signal inside of a state. So instead of

this.state.update((state) => ({
      ...state,
      checklistItems,
      loaded: true,
}))

I would use:

this.state.checklistItem.set(checklistItems);
this.state.loaded.set(true);

This approach allows me to use untracked() because now every piece of my state is independent of the component's state as a whole but is still kept in one place and is not modifiable from anywhere but from its own service class.

I would love to hear what is your opinion on this solution and what would you do better in my case.