My NEW default for state management in Angular

as soon as I could get my hands on signals I have been playing with them and since then I've been trying to figure out what my default approach to State Management in this new angular world would be by default I specifically mean how I would go about managing state with just plain angular using no third-party libraries or any complicated boilerplate mostly I want it to be reactive declarative and easy enough to teach to beginners my favorite pattern for State Management at the moment is the declarative approach implemented by the state adapt Library I already did a video on that so I'll link that in the description if you want to check it out but the basic idea is that we have sources of data at the top of our state management flow whenever anything in the application changes it will be represented by one of these sources we might have a source that loads data from an API which will emit when that data loads or we might have a source that represents a new item being added by the user and when that particular action occurs that Source will emit the data then state is updated in response to these sources emitting data and then the rest of our application can react to this state changing so with this approach we don't have to have any imperative code manually updating things in multiple places we just trigger the appropriate data source whenever we need to change something unfortunately I can't just use state adapto in grx or some other Library as a default primarily because I create a lot of teaching material and I don't think it makes sense to teach a third-party Library as the default way to do something in angular plus I think it's good to understand how to do these things without libraries anyway so I wanted to arrive at a pattern that captures a lot of the same general ideas as something like State adapt but I also wanted something that is reasonably straightforward to follow for people who aren't into this whole declarative code FRP rxjs thing and I also want something that doesn't require creating a whole bunch of boilerplate if I end up just basically creating another state management Library it defeats the whole purpose of this so I ended up with a result that combines signals and rxjs that I think is actually really nice and achieves the goals I wanted with just some minor compromises so let's talk about it once again I refactored my quick lists application for the 105th time now again full source code in the description if you want to check out the entire app we are just going to primarily focus on one section of the app okay so we have our state and initial State nothing surprising here the state is held in a signal and then we have selectors that allow our application to consume parts of this state these are just computed signals derived from the main State signal now we get into our sources in this case we have four sources of data and observable from the storage service that loads the data importantly this could potentially error which we need to handle and we also have ADD and edit subjects that will emit whenever a checklist is being added or edited and a remove subject which is actually derived from a data source in another service this means that when the checklist removes Source from the other service is triggered our state in this service can react to that same source so the state in this service will only ever change when one of these data sources emits but we still need to deal with how to update the state when one of these sources or actions if you want to call them that emits so this is where we get into the part of this approach that required some minor compromises using a third-party Library would help hide some of this kind of boilerplate but it's not too bad basically we subscribe to each of the source streams and specify how the state signal should be updated in response to any of the source streams are missing for example when the checklist loaded Source emits we should take the data from that emission update the checklist array with that data and set loaded to true if the load fails we set the error instead so we do this for each Source we subscribe to the source and specify how the state should be updated in response to that Source emitting now before you call me a heretic for claiming to be reactive and declarative whilst dropping subscribes all over the place hear me up there were basically two other options here whilst working within the parameters I specified instead of source streams I could have instead had callback functions like this this would allow me to update the state values without requiring a subscription whilst it's nice to not have the Subscribe this code isn't any more declarative than the code with the Subscribe it is still imperatively setting the subject but the major downside of this approach is that no other parts of the application can react to this callback method being called take this remove source for example it reacts to the checklist remove Source from another service if I were to instead use a checklist removed callback function in the other service then I would need to do something like this to make sure my other service gets notified about this as well this is far more imperative and involves this sort of double handling where we need to make sure we're updating things in multiple places rather than just reacting to a single Source emitting another approach would be to have everything derived entirely from the data sources using the scan operator in rxjs this would technically be more declarative but it is a whole lot harder to follow if you aren't very familiar with these Concepts besides even as someone who is familiar with these Concepts I generally don't like the scan approach anyway so I landed on just subscribing like this it is actually more declarative than using callbacks and especially now with angular's new taken tool destroy pipe it makes the cleanup of subscriptions nice and easy also side effects shouldn't be needed that often with the declarative approach but they are quite easy with this approach still here I am just using effect from the signals API to save a copy of the data into local storage whenever the checklist State changes but you could trigger whatever kind of imperative code you like here by reacting to that signal changing there are still potentially some optimizations here especially around using multiple signals for the state to better take advantage of change detection changes that are coming with signal-based components but overall I am pretty happy with the general concept here if you have any thoughts or ideas I'd love to hear them below and if you found this video interesting at all a like or subscribe before you go would be very much appreciated thanks for watching and I hope to see you again next time

Channel: Joshua Morony

Views: 27,754

Keywords: ionic, tutorial, tutorials, ionic tutorials, ionic framework, coding, coding tutorials, angular, angular tutorials, capacitor tutorials, mobile, mobile apps, apps, html5, ios, android, native, hybrid, pwa, web apps, progressive web applications, programming, stenciljs, stencil, performance, ui, ux, animations, screencast, rxjs, nx, ngrx, architecture

Id: R4Ff2bPiWh4

Length: 6min 20sec (380 seconds)

Published: Wed Jul 05 2023