The end of Angular's "service with a subject" approach?

perhaps the most widely used State Management approach in angular is a service with a subject in almost any debate about State Management libraries you will almost always see comments like just use a service with a subject now it might not actually always be the best approach but there is a reason this approach is so popular and it's because it is simple and it works if you need to share some State among multiple components you can create a service and add a subject to that service to hold the state you'll generally have some method in the service to update that subject with new data and then any component that wants to use the data in that subject can do so either by directly accessing the subject or to make things a bit more safe we can expose the subject as an observable Instead This Means code from outside of this service can access the values but it has no power to modify those values directly by having access to that subject but now signals are coming in like a wrecking ball and challenging all of our beloved patterns now I'm almost certain that this pattern will remain popular and the signified version of it is just going to make things a little bit easier in some ways and perhaps harder in others I've taken the service with a subject idea and created the equivalent setup with signals and these end up being quite similar perhaps an interesting aspect to the signals version is that rather than just having other components access the setable signal directly we provide a computed version of that signal which will give components the ability to read the signal but not modify it so this is the same idea as returning an observable of a behavior subject rather than the behavior subject directly so what benefit do signals offer here mostly the same benefits they usually offer we don't have to deal with observables and subscriptions we can just access signal values directly and we don't need to understand the more complex aspects and gotchas of rxjs so I talked about the benefits of signals over a subject in one of my previous videos so I'll link to that in the description if you want to check that out but this is clearly a very very simple example it wouldn't be fair to just say that signals are better for surfaces so let's take a look at a situation involving async that I often run into right now this service allows us to start from a blank State and add or remove data but often I want to sync this data either to local storage or perhaps some external API this means that I want to initially seed this service with data from the API and every time A Change Is Made I want to replicate that change back to the API to make sure it is saved now I could just manually subscribe to a request to load the data from the API and next the subject in this service to initialize the data so this leads to a simpler mental model but it doesn't really make use of rxjs's async power instead I can bust out some rxjs operators and do something like this instead now rather than having a subject that contains all of our values we instead have a subject that just emits when we want to add or remove a value in this case names of employees this employee is observable will listen to all of the the emissions from this subject and collect them into an array using the scan operator but to get our initial data we first call the load method from our API service and then we pass that data when we are switching to our subject that emits to add or remove a value and use it as our initial value for the scan that means our scan will initially be an array of the initial set of data and then every time our subject emits we will either add or remove names from that array to save the data back to the API every time it changes in the app I've added this tap operator which allows me to run a side effect whenever this stream emits so this is probably a reasonably Fair example of rxjs there are some non-obvious Concepts here that aren't easy to learn but this also provided a lot of power and flexibility and can be completely reactive and declarative again Link in the description to a previous video if you want more info about what that means exactly so here's what the signals version might look like we have this init effect that triggers load employees this just uses a sink or weight to load the data from the service and then we update the employee's signal to save the data every time it changes we have this save effect so this signals example looks quite a bit simpler and it is in a sense but there is also some awkwardness here this code is much more imperative we need to do things like setting this has loaded flag to make sure we don't save our data back to the API before any data has loaded and to actually understand what values employees will hold and how it behaves we need to search around in multiple places in this service with a declarative approach like with rxjs we only need to look in one place to under stand what something is and an important thing to remember is that we can use signals in rxjs together so if you wanted to go with the rxjs approach you can just wrap your employees observable with from observable or whatever we end up getting in the API to convert back to a signal so you get all of the rxjs goodness and power but you still have a signal in the end that you can use to access the value directly without any subscriptions alright that's it for this one if you found this video was worth your time please feel free to leave a like or subscribe before you go and I hope to see you back here for the next one [Music] [Music] thank you

Channel: Joshua Morony

Views: 24,780

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: SVPyr6u3sqU

Length: 5min 24sec (324 seconds)

Published: Wed Apr 12 2023