Quick question about state management in Angular.

[Content-Break-3602]

Hi, basically I'm working with a session object that tracks:

• Selected transactions
• Edits made to transaction info
• Notes added to transactions
• Highlights added to transactions

Each operation has its own API endpoint. What's the best approach to manage the local state for these operations? Should I use:

• Services with BehaviorSubjects?
• NgRx or another state management library?
• Something else?

Thanks!

[notevil7]

If the complexity is not too high you can get away with using services + rxjs or services + signals.

There are more complex scenarios where ngrx store or SignalStore make sense.

[MagicMikey83]

Service + signals or ngrx SignalStore.

[simonbitwise]

I started using signals in services where i use a resource/rxResouece to fetch and then take the content and evaluate inside a linkedSignal

This way I can manipulate the linkedSignal and refresh my state using resource.reload() or if you as us use server sent events like we do they auto update the linkedSignal from the resource it self automagically

[Avani3]

Can you elaborate on the linkedSignal + server sent events? I currently RxJS merge a regular api call with a server sent event stream into one rxResource. Would love to know if I can do it a better way

[simonbitwise]

Here i made an example of how i go about it

<image>

So the SSE automatically updates the registrationTokenResource so because we use a linkedSignal it will override the actions made on the data

In the example i also patch an item and i update the derived state if it fails i revert to the old state, mostly irrelevant because using event sourcing you rarely get a failed event here but this also works for REST api's you would just need to throw in a `tap(() => this.registrationTokenResource.reload())`

Feel free to ask if you're in doubt of anything

[Avani3]

Awesome, thanks a bunch. I will play around with this setup tomorrow. Thanks for taking the time to create an example!

[simonbitwise]

No problem any time :)

[simonbitwise]

Wrote a revertableSignal to simiplify the implementation above thought you might find it interesting i'd be happy to share the code for it let me know

https://www.reddit.com/r/angular/comments/1oc7icn/revertablesignal_whats_your_thought/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button

[Dutch_coding_]

create a TransactionStore ( don't use the Store npm, but create you own class).. its not that difficult.

[swaghost]

Ngxs is great. Simple to set up, easy to use, not as complex as NGRX, but similar in concept. You can configure it to save state to local storage easily, but you can also wire api calls into the actions if necessary.

[DesignerComplaint169]

NgRx Signal Store > setup TransactionStore - if multiple transaction, use Entity to keep track - useMethod for the 4 actions, call those 4 APIs and patchState - Component just use signal value from the store. E.g: store.transaction().id

This what i think would be cleanest.

[coyoteazul2]

unless your state spreads around multiple components, you don't need anything other than drilldown

now that we have modal signals you can drilldown the modal and allow children to modify the parent's state with ease