NgRx and Angular Signals just work

hello hello hello and we're back what's up friends I was just starting the stream as I am going to do kind of hide behind the curtain and I was like I think I had this English shirt on last time I did a stream but hey that was okay because it's been washed since then so I think we're good uh yeah so you already got a few people in the chat already thanks for coming through hopefully my microphone is getting um volume is good but yeah it's been a few it's been a few weeks I guess since I last did a live stream so we're getting back on the wagon here and we got some cool stuff coming up uh in the angular ecosystem as well so always interested to dive into dive into that hey Oscar what's up how are you Facundo thanks for coming through Justin White thanks for coming through also somebody left a message in the chat earlier before it actually started a stream too so uh they're ready to go which I appreciate that so uh we're gonna get into um get into it here shortly sorry is catching up on the questions here signals replace observers in a dynamic form uh maybe Gabriel what's up angulars what is your profession this uh that sounds very spartan-like if I must say Steve Whitman thanks for coming through what's up why is my chat not updating here okay that's better I had to refresh my uh window here to see the the chat messages after a connection I connected I guess uh looks like I missed some other questions too Dimitri asking his analog production ready error is in beta stage it is in beta stage uh analog we are our 0.2.0 beta um so the hope is to publish a stable release after angular V16 gets released so we'll update all the packages to stable releases and uh consider that part a big milestone there so looking forward to that uh well I talk about analog two uh maybe I was contemplating whether I should uh use analog in this example app but I'm keeping it relatively straightforward today so we'll see how it goes but I'm definitely going to be building more stuff with uh analog in the future and more videos too so there you go how signals integrate with form controls good question a lot of good questions I already tried signals feel so nice as Standalone components hey nice I like signals also what are signal options when creating a signal good question we can get into some of that too so let's see what we got here new window kids you make angular without Zone JS project it signals uh you can make angular without Jones JS today but you have to do some extra work there but hopefully that'll be a simpler thing to do in the future this is not fully yeah it's not fully fully baked yet to go into uh zoneless with signals yet oh the apparently a lot of people want to talk about signals so let's get right into it yeah so here we are the like I said this is this uh one is all about ngrx and signals uh if you haven't checked already we just released the first ngrx version 16 beta uh so if you're one to check things out early feel free to do that you can visit the GitHub repo to check that out I pretty much get what you need from the change lock here so I'll paste that in the chat and add it to the video also the show notes there um yes most of the things we have we we haven't we are of course with each release we try to break some things and or we don't try to break some things we try to make things better and so we had do have to break some things to do that but one thing that we did at uh that we did add was integration with signals for angular and for indirect store and indirect's component store and we also have uh signal store coming also uh so if you want to check out those rfcs you can definitely visit those in our docs here and of course we'll be continuing to iterate on those and make those better for everyone because of course signals are new angular signals are new so we're we're in new territory here so we're going to keep keep it moving with that yeah but definitely check out the repo check out the rfcs leave some feedback if you haven't already uh while they're still open so but yes today we are diving into the injurex example app and we will get that up and running here as you serve and uh example bring up just brought over everything as is but example app is a lot of people's go-to when they first encounter ngx for something to like something to work on something to play around with as you can see we have it's a login page you can log in uh you have a collection of books this is a book that Niels wrote a while back uh a very good book on ngrx so you can add that book to your collection you can remove it you can search for new books and all this is driven by uh in jarek's store and the associated libraries so all this is good and working today and this is like I said copied over directly from the injerix repo but we want to integrate some of the some of the new things in angular and some of the new things that ngrx into the example app and see how far we can basically see how far we can push with modern angular bleeding edge angular some of this stuff is still in developer preview some of stuff is relatively new so we'll dive into both the both of those things and if we have enough time we may even throw a standalone migration at this and see what that looks like but yeah already got a bunch of questions uh in the chat so we'll try to get to some of those too um hey Christopher what's up how are you uh but yeah let's look let's dive into some of the questions here because it seems like we're going to be chat heavy today which is good can we create signals can we create signals from functions uh yes you can uh creating signals creating signals themselves is pretty straightforward you can create a signal uh practically anywhere because they're not bound to they're not bound to components they're not bound to Services they're not bound to change detection so we could just take that as an example we could come in here to core containers app component uh I could come in here and create a signal called count let's say this is a signal of uh when and I could use this count in my component here which oh that's good that's not gonna work I almost went down a rabbit hole but yes I could Define that account outside of like this signal here and use this actually in my component that way and push values into it that way so signals you can create signals uh anywhere and not be you're not restricted in that way uh and you can also read them uh synchronously in that same way because this uh signal if I just want to get its value I can say Val equals count and console log that and it will give me its value right there just as a as a read so that part is available also yeah some of the other questions were about can you make angular without Zone JS not necessarily not with signals all the way today but that will be coming up in the future I believe where you will be able to do a combination of those two things so let me make sure my chat's up to date cool are there any patterns with signals uh sure uh I don't know where like I said some of that is still exploratory as far as patterns go uh but you can use signals and in your angular uh uh V16 apps today even though in your Zone even in your apps with Zone JS in them today so uh some of those patterns will change over time I think and there was a good video by Joshua moroney on uh basically signal in a service that pattern because it could replace a subject with a service in some in some cases so let's make sure we got that uh there cool so let's dig into the example app here uh I should be big enough there so everything like I said we had everything working there already and some of those smaller changes that we brought into in grx with these um Andrew X store which is what a lot of people are still using with and but admittedly component store is definitely made a large rise in that area also um so if we take this even our initial page here this is we're just using observables we're subscribing to those with the async pipe and if we want to use the store still with angular but use signals instead of observables as our kind of the delivery mechanism that's kind of way I think about them as far as signals go is at least it's in the turn in the frame of mind of ingerix store they're more of a delivery mechanism like we don't use necessarily use signals and effects and or XFX and uh but you can read they can provide the same way to deliver our values to your template so and they and they kind of weave together pretty nicely because you still can still have everything in your template uh just use signals and use injects to fill out the rest of the part if you uh choose that way if you're still leaning on that for like the broader State Management so uh yeah let's let's go ahead and we'll take a look at the outcome component first because it's of course the first thing you run into and we have our two observables here show side nav and we logged in and we're using those with the async pipe so we introduced one thing that we did introduce was a signal select signal method on the store and I have not pushed this repo up yet but I will push it up after uh the stream is over and we'll definitely share that out and put it in the show notes for the video also so what you can catch on YouTube later if you're watching from somewhere else uh but yeah let's get into uh we're just going to change a couple of things here we can change this from select to select signal and we're not using the dollar notation with signals so we just name these as properties and we bring in the import for a signal so now show side nav is no longer an observable that we need to listen to so we can remove this and remove the usage of async pipe and just change that to a function and so now this we can tell this is just going to be a function that gives us a Boolean of that value so I think that's the only usage of show side now if we have in this particular app component so we we have that that just had that signal function there so we can go back to our logged in we can do the same thing here and we could assign these directly it just depends on which what guess what your preference is as far as Constructor usage because we can move this up here which may be more become more common as far as just selecting things from there but both of these will work the same way just depends on if you like to assign give things a type and before you want to assign them so we'll do the same thing with logged in changes to select signal hey Nick what's up hopefully I uh didn't miss the hope you had a good stream don't know if I missed a break or not no it doesn't look like it uh but yes thanks for coming through uh we're talking about angular and signals in ngrx which is a lot of things together so we can delete that and we'll have now we have our Port I'm porting the uh integrating the indirect's uh signal chain signal Integrations with the indirect example lab and latest version of angular so kind of diving into that area so we can look for our currencies of logged in we'll change that to locked in with just a function instead of using the async pipe and one thing I did notice when I was kind of going through some of this uh beforehand was that of course this application still uses NG modules it still uses some of the existing uh patterns within angular so it's not using like Standalone components or anything but one thing I did notice is that if you go if you migrate to signals like in this case if you migrate to signals before you migrate to Standalone then you won't have to bring over the async pipe in this particular component or in in the application I suppose depending on how far you go with it which I thought was pretty interesting because it kind of gives you a choice of which way you want to go there because you're with Standalone components you'll bring in all the things anyway because we got ngf so we're bringing common module I believe is how the migration works but the uh like I said async pipe you you won't lose that you won't use that if you go to signals first and you'll also remove some of these Imports for observables also what is the last extension on the left that is the ionic extension it helps you get set up with ionic uh quicker and you can use that to kind of make that conversion faster so that's all we're going to do in this one and we can bring up our app here if everything's still working we can refresh you can log in and we can see that it's still all of our side menu and things are still working as intended but all that's being driven driven at the template side from the signals that we're getting from the store so we're still selecting using the selectors all that's still the same but the the signal is like the last Mile and you can keep your your template uh kind of clean of async pipe and everything which depending on how you feel about observables and things will determine how much you prefer or on that so yeah so let's go we got our app component here let's dive into some other features and we'll see how far we can get and we might even bring in component store and hook that in also but one thing that I will not also know is that if you were like testing with uh provide store and using all the testing utilities like the select signal as far as changing your template and if you're doing like snapshots and things like that you may have to do some updates there but as far as testing like that particular component with the selectors uh if you're checking the that the values give you what they are supposed to then all that stuff's still pretty much Works uh about the same so we change our app component now let's go into our books component or auth I will uh look at one thing really quickly here and one thing that we did land here pretty recently as far as guards go and updating this app kind of make it more modern is using the functional guards for the router and we were using these as far as like class like I said the class-based methods before um but now we've converted this book exist guard and the other ones that are defined in this app uh to the more functional based guards which is pretty cool slings trims them down some and you can but you still they still behave the same way so we have the book exist card here so you could definitely check that out if you haven't already somebody landed this PR recently so didn't want to point that out so let's go to the books [Music] um collection page component here and we will update uh we'll go through and kind of do some of the same things here also as far as updating to use select signal instead of Select I have a question if signals have to be called does that mean that they will execute on every change detection cycle as Getters do um um no I don't think they I think signals are more efficient in that way in that they will only if they haven't changed uh then they won't produce a new value so even if you're calling them even though we're calling them as functions which I know has been uh like taboo in the angular ecosystem for a while calling them as functions in the template it's just returning you the same value over and over so if the value hasn't changed and you're still going to get the same thing as before so it doesn't like it does definitely is more efficient change detection with signals than with uh Zone JS even at even at that point in the template so it was not the same as like using the getter because a getter is going to like re-execute and possibly give you a different or a new value based on what you're doing but signals are more efficient uh in that way cool so we got our books uh collection page component here it's going to be and ideally like this is what we would want if you're trying to migrate from to of course necessarily be on some of the bleeding edge stuff because signals are still in developer preview that you'll be able to up update your apps in this way if you want to move to signals still use ngrx store but move to signals like in your templates or combine them in other ways then you'll be able to do that all pretty seamlessly also so in this case we have our uh books here and we're still using constructor-based injection so I'll update some of these examples also because I'm like I've been like all in on using inject so I think that'll be another uh one that would take advantage of there so we have our book preview list is just books and it says has no call signatures oh so I just need to update this to select signal and to fix that so yeah there's reactive there's no change to begin with so nothing will run until a change happens yes that's true Zone signals are more precise in how they produce updates uh so definitely a good point there so you can actually it can actually do more more pinpoint uh updates or precise updates so we can as you can see we can also remove some of these Imports uh from our components and I believe even if you were using like facades and you want to update to signals you'll be able to do that uh pretty straightforward also you should have to update your template and update your component class but the end result would be the same there so this was and now we'll move on to the that was the collection page component so if we go back to our app and we log in we got our my collection we find a book uh let's find another let's find another angular book uh let's see this is another one reactive patterns for rxjs for angular even got rxjs7 uh so we'll go back to my collection and we can see that the books there are still being updated correctly and we can also see that we're still getting our uh information flowing through the dev tools here so all their part is still the same we kind of lay this out in RFC that you won't see any impact uh there as far as updates goes for won't see any impact as far as that part of it goes so let's go back to our app here we did a collection page we have our fine book page now this one is gonna I think this one is probably one of the more interesting ones uh because in this case we got a store select and we're doing a take one so in this case we can't just switch to a um select signal on that one so we're actually going to leave that one like it is but we can change these other ones to select signal and the reason why that is and like I said this is more of a preference on how you want to update these so you can bring in a signal and instead of like say instead of using async pipe we can clean these up a little bit for Just Books and we can update these other ones also to I will keep the search query the same because with the signal it's a it's in like an ongoing thing I don't know that you can have to or clean up a signal in that way so we're gonna check the loading and we'll change these we'll we'll use the other pattern here as far as loading but I could even see uh if you wanted to migrate if if you wanted to try to migrate to this in an automated way how that could be at least potentially potentially be done I don't know if it it could be that seamless but so we got a kind of kind of a mix here and uh we are we got a mixer we got one observable for our select query here and we gotta take one on that so but if we converted this to a signal how we only get like the first value out of it I guess that would be the better question of how we could do that and I see we got some new people in ciao what's up Lars what's up Dominic uh can we apply a VM pattern with signals good question uh yes you can um let's see if we wanted to do that here we got oh I wanted to take at least uh create one out of the ones that are all together uh you could say VM equals you would use a computed here so then we could take these and move these into the computers say books books uh kind of loading and error equals this and let's bring in the store here so yeah this is like I said more a matter of preference also whether you want to have these you want to create a VM out of a signal our uh and then we can just return uh books and loading and error so this is very similar to like a a combined uh selector so we could have selected combined these outside of the each one of these instead of doing each one of these individually we could have made a selector for this but you can do the same thing here the only thing that you'll end up with here is that you have to wrap this in uh we'll throw it in the NG if for here for a VM and I guess we do this pattern here as VM and let's see we don't need to wrap the last one oh yes we can wrap that in there too so we have our so we'll get a value here from our computed and then we can have our VM dot loading now these won't be uh signals here so we have our VM computed and let's see so we need to name this VM signal so we don't have both things oops yeah this should be a signal of these values so maybe I'm missing something there Standalone declarable isn't related okay I see what I'm missing here so we got books this should be books for I've I've gotten myself you're supposed to call these as functions to get their values so now this would be a signal of those three things and it should be I probably should named it something else there was see this is an interesting one though uh so we have the before we we have like VM dollar and you would have like VM just using as an example VM as loading uh Lars what are you doing uh so VM not loading vm.books why does it give me unknown here object is of type unknown so if we do signal of loading Boolean error string or no and books book array why is it not giving me a readable signal personally getting it using a getter for now have you not tried next version angular angular language service okay so let's save and see what we're missing here BM there you go no it's not assignable to string let's take this out and see if we what that gives me there okay okay so this is like a a false positive I should say this was uh what the is giving me object unknown here and it may just be the the language service but everything compiles correctly and we can come back here and log in and browse books and what do we want to search for this time uh let's search for NX Dev tools let's see if we get any results there so let's see maybe hopefully I haven't hit any API limits or anything or maybe I missed something in the code here so we got books a lot of search results yeah so it looks good there I have something happens the same with the vert neither of us I'll return this uh specified type can I give a computed a type here I thought that would give me a signal of those things now we gotta add more stuff here which I already did this already but yes if you wanted to combine multiple Com or multiple signals into a new thing you would use a computed to do that I need something I know I don't have to uh do that part but I feel like I need some kind of name here um for the for the assignment part here we're gonna go old school that's not what I want to do I don't want to call it a controller I want to call it something else VM data or signal VM something like that that's not what I want to call it but it's the best I can think of at the moment you could check out signals component store ah yes I'll have to check that out so I'll drop the link in the chat ciao and I'll um and we'll get that one up there too so let's browse books Let's see if we get something this time if we're getting any network traffic here yeah we're getting books back so I'm missing something ngf VM as signal VM that's unknown though let's try this way suppose I don't have to vm.loading em dot books does that give me the correct type okay cool that does give me the correct type there log in browse uh let's do solid.js there we go now we got some now we got some stuff back there ntrx okay so the um our search query only only took the first uh one so we're not doing any but I think we let's see let's look in here this one isn't doing anything special on search yeah just uh searching searching with the query there so ah yes and child dropped the the link in the chat there I appreciate that also includes SSR non-destructive hydration cool is the main difference between signals and observables you have to subscribe to observables and signals nowhere to update already as they manage their subscriptions uh sort of uh it's a it's more than I think it's more well I don't think it is more than just the difference of having to subscribe one versus the other um but that is one difference though uh with a signal you don't have to subscribe to it it can always give you its value uh synchronously so you don't have to ask for what it uh you don't have to subscribe to it for what it is everything's always synchronous foreign yeah there are more are more differences there but those are some of the the main ones there but uh going back to here in the case of the VM um I could actually just delete this part because the VM is always going to be there because we defined it there but uh you can read these properties uh in in in the template just by calling the function in this way now one difference in the async pipe is that if we had the same if we had the same VM and we were using the async pipe and we use it three different times we would get three different subscriptions but we don't have to subscribe we're not creating three subscriptions uh all these will get updated when change detection uh runs there so a subtle difference there so like I said this one is a good mix of a place where which we probably could convert this into [Music] um and effect to listen to this so let's say this was we want to bring in the effect and use that instead of the the query here we we would have to convert this to a signal so if we do search query ing out the foot gun I haven't even typed anything yet um but yes if we wanted to let's say we want to use this um query foot guns right yes oh no uh so we could say we could set up a listener for uh the search query because right here we're doing search event here uh but so yeah let's just providing this with the first value that we got um but we could we could kind of Go a different way with that but if you can use the defect in here to to listen to signals and do things based on that so that's one thing you could do there but we are updating we're not pushing anything into um right pushing anything into these from the this particular component so uh we'll have to find a better example for going from are using an effect there so that one is good there and like I said we have our two components here um collection page we did collection page and find page there so still um working through some of that Lars is looking to update material migration across a thousand components six applications nice question by using signal effects is it considered best practice to move business logic to the component instead of having indirect side effect good question um it depends I guess it depends on what you want to do like signals are I think signals are strong enough to where you could for a smaller interactions API requests and things like that you can move that data into move that logic back into your component and not pay like a heavy cost for it um I do think that we will still have patterns uh like I said in Joshua moroni's videos he talked about a signal in the service I do think we'll still have patterns like that to try to abstract away the business lot it depends on if you're if you're of the mind that you want to don't have one have any business logic in your component signals or not then I think you'll still use the subject with a service or signal in a service to do that which you could still like I said do that here the signal is a service would be your facade or whatever but it just depends on how much you actually want to how you actually want to go down that path so uh we did our fine book and now if we move on to selected book page this is more of the same we're using the dispatch here to update these so those are pretty much uh good questions are pretty much set there I do want to yeah so we could do the same thing with these we're converting these selectors to select signal and so not much change there we import the signal we remove dollar signs and we change to select signal this should be a signal level book and this will be a select signal also so not much change there we're just some of this is just like change it to a signal updating your template and removing uh Imports uh this should be a book and is booking collection async pipe out of there now we got like a function a template full of functions which is uh still uh well in this case where you just have like inputs and outputs it looks very clean and very consistent but you can't necessarily tell which like we're used to using function calls for event listeners and not just for not for everything but it's an adjustment I'll put it like that so let's go back to our app here we'll log in we click on our book here this is our selected book there and we so we're good there so let's go to view book page and this one is uh another interesting one because we're actually subscribing to an observable and mapping that to an action and dispatching that action so there's like a couple of routes we could go uh with this one actually um because we're not using we're not using any selector or not using any uh observables in here or we're using the observable from the route params so we have like I said we have a couple of options what we could do is and we can talk to both of those where uh one of them is let's say we have ID and we say this is our route so we're going to make this private and we're going to say param map and we're going to use um some of these use of rxjs here paramap.pipe and we're going to use that params I'm going to say params.get ID there so this would just give us an observable of that value so one helper function that we have in angular this upcoming is the two signal uh function there so let's see if this will give me some Auto Imports here that's the part that it gets me sometimes is two signal is in angular core so if we go to from angular core slash rxjs interrupt this is where the helpers are for these two signal and two observable functions so two signal you can pass it in observable and it will give you a signal back so here we're going to say we have our I said we have a couple of options here we could well I guess we just really just got one option we got the Constructor and this is where we can use an effect to listen to this instead of creating a subscription here so we have our effect from angular core and let's say we have our ID equals this ID so we're going to read that value and we have our action here which we're just going to like pluck out of there uh and say action equals this and we can pass that ID directly there and let's see what this is giving me string Rd or no okay and this is expecting a string so let's say this is signal of a string let's see if it yells at me it's giving me three this could be a string or no okay so if that's in uh ID string no undefined wow string no or undefined okay so if we change that to add string then we have our action here and we can take our store directly out of here and say this dot store dispatch and let's see we got two lines instead of three this that store dispatch action and we'll make this one private also so then we can delete that we can delete the subscription here and we don't we no longer have to unsubscribe which is pretty cool we delete the on Destroy and we delete a few things from our uh temp or from our component class here so now this is the uh I don't know what to call it this is the give and take of where we where we are so uh doing stuff in the Constructor traditionally frowned upon but now that we have signals we have to set up these effects in the injection context so that they will have the correct uh so they will have the correct context to do the uh to run and change detection that sweet that route data is take it till destroyed yes yes child you you lead me to my next point this was one this was one option we can use to be able to use an effect to get a value um through our component and for my route parameters and use that to dispatch action here the other option is to use an input from our this is a new feature and I believe we need to enable it so if I go into app module and providers do I have any providers in here I don't interesting where are we at in here containers I wonder I wonder if you can use this at the top let's just making sure I haven't missed anything angular tiny cough thanks for coming through um so this is a new feature coming in V16 it looks better in Standalone components but we don't have standard one here so which we may try to try to sneak that one in uh but I have to remember what the let's see let's see if it'll help me route inputs no it's probably a router feature so we have where's my router routing module routes let's look at providers to provide router with component input binding I think that's what I'm looking for so routes you can import that and we can delete this one and use hash Maybe with hash with hash location there we go so that should be the two things that I need uh there for using the router uh with the new provide router and with component binding input binding so this will give me my parameters ID so I'm guessing if I just put ID here um and I can use a Setter here ID this should be an ID of string so if we update that and we create do the same thing here where we create an action so let's see the other one first so let's save all that and this is our view book page so let's log in click on a book and we broke something let's see ah writing to interesting what did I do here I'm getting an error and I will bring over the air here because I didn't think I was doing anything here that I shouldn't have been but writing to signal Okay cool so this is the air that I got when I tried to view the book page writing to signals is not allowed in a computed or in a effect by default but I didn't see where I was writing to a signal in here so we got two signal I got ID reading there dispatching reading there where are we writing to a signal let's comment that interesting so I dispatched an action okay all right let's go back click on the book click get an error okay let's comment that out login click on the book okay so it's not that well maybe it is log in this ID writing to signals okay poo signal pushes observable oh wow okay two signal pushes observable to a signal right so in our effect here oh man that one kind of snuck up on me um allow signal rights I think that's what we have to do here okay let's log in click on the book and now that works correctly Okay so that was unexpected but I suppose if we think about how the effect worked well it was unexpected because I'm not writing to any I am not writing to any signals ID when it gets converted from an observable to a signal rights to that writes to an internal signal um so we have to enable allow signal rights to do that but this was one way like I said we can I wanted to make sure that that part worked to convert to be able to use a signal with an effect to uh get that value yeah I could I could subscribe to the yeah hmm but I feel like that should not jump up and bite you though like me converting this to a signal and then reading this I'm not like it I'm not look I'm not doing any writing so uh and then I have to try to track down where the right is coming from because all I'm doing is reading but either way that that method works if we use the route parameters this actually seems like a safer approach uh um if we used to enable the route parameters component uh it's a mouthful component input bindings and use the setter for the ID and then use that use the magic input we're going to call it magic input I'm going to do a child do a child did okay let's go ahead and leave some of that we're going to say input as route input because that's more clear well this uh input as route input there we go that's a little more clear uh at least to me anyway so let's go back to here log in or click on that okay we got nothing what did I miss dispatch action did it dispatch action to select the book it did not I'm probably doing something wrong input set ID oh set ID there we go interesting set ID log in click on the book okay there we go they got surprises jumping up up um all around but that was my fault though because I just had ID I just had set which was the wrong thing set ID that looks weird for some reason I don't know why input set ID it flows well but still weird login click okay so we're good there so we went over a couple of patterns there which one was taking the observable of route params and with two signal and using the effect and allowing the right to read the signal in there in that sequence um I want I was surprised that two signal doesn't enable rights and maybe it does maybe it enables rights internally set book ID is more clear yeah set book ID but does this have this has to match uh uh does this have to match the parameter name like ID has to match here route input ID oh no oh okay you got me that works too uh looks promising this route input okay that's not a real thing I just want to put that out there I just renamed the I just renamed input to Route input because it makes more sense to me uh and I think ciao landed on this too um on that part of it so uh so yeah that those two things route input ID reassign yeah it's not it's not a new one uh which that could that could be more confusing so we'll we'll change it back to input but I think you get the idea you'll see both versions in the recording how about that so input ID set book ID and then we can use that it's okay to rename input for routing component since routed components won't be rendered on the template so you wouldn't be mixing ah yes so you could have I guess you could have it both ways you could say input as route input and have both of those there if it but yeah in this case you probably wouldn't have both right if this is a route component you're never going to have a regular input there or you're not going to have a input that you set some other way I should say cool so the uh we got I guess that's our one of our two main features there is the book uh search there and the other the book search so we got our update our containers for that and our core app component I think the rest of these are still pretty similar now this is the one where we could look at component store and maybe bring that in so all these are driven by or like kind of driving Global state but like the login page stuff could be self-contained because I and I did this in a in another video also uh where you could uh convert from a video converting from component store or component converting from migrating from indirect store to component store uh so let's bring in components store login page store dot TS and we'll bring in the injectable export class login page store extends component store and we'll call this one interface log in whoops interface login page state and we had it we had a couple of things in here uh for we have pending and air which so okay those are two pretty straightforward ones to U string or no where they're angular 3 you could use in component store or signals depends on my pitch okay so we're gonna we're gonna give the pitch for uh Chow to switch back to component store with signals and we'll see if he's uh if he's on board or or not so he got a Constructor uh super I need to create some initial State here cons initial State I guess it did ciao I'll tell you it depends on uh where they're I'm going to guess and say it's going to depend on if you're uh whether it has effect can you if if you're wondering if you can read a signal inside component store today the answer is no uh but that's not not for a lack of trying we did land a PR to add signal support there uh but we're still looking at the best option for the other part and I don't think I have coupon store installed here so I have to install that component store so let's stop that really quick and npm I ngrx component store we still have our uh Legacy why am I getting Legacy peer dips oh my fault at next there we go NG serve so we'll kick that off again is missing login page store oh login page store where's lock and pay store login page State there we go okay so what we did add to component store was the ability to read uh the state from a signal cell uh well two things if you want to set up signals you can say pending equals this dot select signal and you can just use a wrapper signal pending so that will give you a signal of this value the other option also is uh you can if we want to use air you can use a computed if you want to use it directly and you can use this dot state which is a signal also and error there so you have either option of which one you can use select signal to get a signal over value or computed if you want to use the the state there directly and read it that way so we're going to take our login page store here and go into our login page component and providers and bring in our login page store so we can update this pending and error and we'll change this to login page store and we want to have pending and our error store.air so we have those two and then we have our pending we update our template all this stuff is pretty straightforward pending uh signals and all signals in our template error uh which it does create clean lines there I would say with that property get updated whenever the store changes will value push to property and template updated uh yes this is uh which we can uh move we'll still have this store here so we can move this into here also so let's add Constructor we'll do private store and Global store and whatever you want to do here we can send this action here to login and we'll do dispatch store with actions and we'll just bring some of this stuff in here and what am I missing here import from store credentials and we'll use credentials here and from auth dot all right what did I have in here auth models so this is for the this is for the converts it will say if you want to move uh from store to component store and uh thin out thin out to your templates on there so credentials login we keep this as just that store log in with credentials I guess we still got to keep that there I will keep that they're for consistency I'm so lazy I was just making nges just to get a template nice uh RX angular state has an RFC for signals integration yes they do also um will value be pushed to the template excuse me uh so in this particular case um the login uh if we wanted to move the let's see login page forms probably the one I should have used update it but yes we could move the what we have here is the effects for authentication we could move this into the login page store and manage those without the global effects here and if we give it one second let's see if I have this already somewhere because I did this on a stream before on a video migrate there it is component store we'll drop this link in the chat also so this is a repository idea for a video where I converted and indirect store to component store and I did this pretty much the exact same thing here so I'm going to copy some of that in here so we got login we got observable of credentials at missing Imports and we had an auth service in a store and a router I'm gonna bring in some of those things too uh service and router so yes this one it did all the heavy lifting on the um did all the heavy lifting on the observable there uh so if we come back in here we are setting some state in here so the no ship propagate through our uh signals that we have in our component here so we're still doing the same thing logging in with our credentials and going through this these actions here to update that but this was uh like I said this was one I'd already done we have the auth API actions all this all the actions and things were hooked up we're going to clean up some of these Imports here so let's do that and off service and arc.js so we have our like I said our pending signal error signal login I think this is also part of the thing that we are part of what things like indirect's component store where it uh still fits into like the picture with signals because this login goes and does some like async work and writes to this state and then you use the like the signal once again the signal is to last The Last Mile there if we want to be strict about it we do read only for those but we still have these as provided as signals and if you really wanted to take it the next step you could drop these directly into your templates there but I like to keep them kind of separate in that way so let's go back to here let's see if we broke something okay I don't see any oh believe I said no painting is false pending a form is disabled so let's see what we got here yep it's pending we got this pinning set to false so let's see what pending is this is another thing uh I can drop this effect in here and read another thing that you know you run into an issue at least in this case is I just want to like read the value I can just call the function there instead of like tapping on the observable there so let's see what the assess pending is true why is pending true I must have said it somewhere let's go in here initial state login page store is the correct one here we can see that it's false I have not clicked login yet so I must have done something here computed this one hasn't been done yet or hasn't been called yet excuse me so let's see what we got here false interesting what happened there I have not called this effect yet have I store login is this a bug okay either way yes when you call the tap response okay maybe this is just an old book or we're gonna comment that back out for now so that our form will be enabled we can log in with our component store and our signals and so that flow worked uh correctly there so we can take this part back out and use that so we're all good there be really great once you finish you've pushed it to repository old version of indirect store plus new convert it on another Branch yeah sure well the you these would be separate commits so uh you'll be able to kind of dig through the the details there I'll try to at least commit to other we can see if we can commit to other parts uh here we'll commit the indirect yeah the indirect store parts from the component store part separately but I think you get the idea of what is going on there yeah I didn't expect this to be called when I first um did that part but uh we can should be able to fix this by returning here and see if we can find the correct uh in point for this tap response pipe format there we go so what we want to do here is when you push a value into here we set the state to pending tap response maybe tap the observe on call signal API there uh yeah maybe so well the oh that is one thing here is this should probably be a read-only signal uh well yeah this is read only because it gives you computed uh yeah so you can't you can't uh write to that anyway I was trying to trying to think if we it left that part out uh but yes there we go so all the logins still login still works so now we got a mix of our component with component store with signals uh using select signals in ngrx store with signals and all those things work working together new angular current angular it's all reactive angular which is what we're uh looking to do so I don't think there was anything else significant to refactor here which like I said there's of course there's more we could do here as far as our services are still the our services are still relying on uh HTTP client and all that which is fine and uh this was the only like I said if we want to update a few things in here for components uh they'll be fine too um uh we have our yeah all our all our all our presentation components don't need to change because they don't depend on the store anyway so that part could be the same as what it was uh we just had to update our containers and we're not doing it we're not changing anything in our effects because those are based off a stream of actions so we're good there so you could pretty you could I would say if you wanted to go in on with select signal and keep the rest of your uh the mechanics of the store the same you could definitely do that because your bait like say you're swapping out an observable for a signal to pass to your template and you maybe get some performance uh improvements just out of the box from doing that but all the rest of the ecosystem uh is still there for you to use so that part is uh is pretty nice and then like I said you find a nice spot for incorporating effects like we did with the view book page and we can whether you go down the route go down the path of using the activated route and converting it to a signal or you choose the new route inputs uh both of those are good options there yeah so I think that's a good place to stop on the the video here um so we'll switch back here yeah a good place to stop we we refactor it a lot with help from from you all uh so if you're coming back to the video later on feel free to like the video subscribe to the channel if you made it this far because that really helps me out um but yeah we're gonna like I said do some more refactoring on the example app and we still have the other side of this uh where we can convert this to Standalone application and do even more there so definitely be on uh the lookout for that uh thanks to everyone in the chat for coming through and uh we'll we'll do another one of these uh when V16 is out and we'll I don't think I think we're pretty pretty good for V16 but yeah thanks to everyone in the chat after coming through feel free to drop comments on the video if you'd like to see something else and uh with that we will see you in the next one foreign

Channel: Brandon Roberts

Views: 8,525

Keywords:

Id: MsbPkJYrv68

Length: 92min 2sec (5522 seconds)

Published: Fri Apr 28 2023