Beginner's Blazor State Management Tutorial (Part 2)

welcome back to just blaze programming today we have state management part two so i don't normally like to do this but yes you will need to watch a video that i did before about state management over here if you want this to make sense and you don't have the prerequisite knowledge of state management so what we'll be discussing today is how to use state management in other parts of your code so let's say you have information on one part of the code and you want to use it in other parts or want to access it in other parts and that's what we'll be doing today so why is this important to to use or why is it good to consider this for your web applications well the simple reason being is that you can make less api calls and make your application a lot more efficient and you know it's a lot more performant when it comes to user uh the user experience the reason being is because instead of making more api calls only get data if you already have data in one place then you could if you design your web application good enough we'll be able to grab that data from that one place and then stick it wherever it is stick it in but there is a caveat when you do this and that is the the fact that now you have to design for it because you have to take into consideration data coming from a third party so that is a different topic on its own but in this one i'm just going to teach you how to actually do that in blazer and um and basically if you are able to design it well because it's really easy to screw up on it and it makes your programming a lot uh makes your program much much worse but if you do it right you can actually have a far more efficient program than if you didn't have any state management or at least have state management in places where you know you are going to be grabbing that data over and over again so that you could save yourself some api calls save yourself some um some performance issues down the road but again if you want to go on down this route there is some architectural considerations when you do that and it's best if you plan from the beginning that you are going to do that so there are pros and cons but this is how react does is how angular does it when it comes to using um using state this is one of the features of it is that they have unidirectional flow of data so with the explanation out of the way let's get into the extra tutorial and quickly clack our way into this state management business so when it comes to state management and blazer there are a couple of things you have to consider um the first thing is that this does take advantage of the actual life cycle uh component methods that exist for basic components that is the one method that we really care about is gonna be the state has change method and you're going to see an actual live use of how this works because when we make a change to one place it doesn't necessarily trigger in the other places where we want to see the change so we want to kind of keep things in sync so that is the whole reason why you even have that cycle method because that allows you to trigger the re-rendering of other components if you need to but i'll show you all that once we get into the code so right now i have my profile state object so yes this is the actual same project that i did last time and if you have not seen that i would recommend you to because i am not going to redo this again um so yeah so the first thing we're going to have is the profile state class that we created so this is actually the class that we have our state we're actually calling for the state management and we have our form state which is what um where the example was we just created a form we attached a state to it and then it kept track of whatever our changes were so that whenever we moved out of the browser we were able to uh not lose the change we've done and then our nav menu so the nam menu is just going to be for show basically and what i want you guys to do in this first is we need to import both the um the directory for the state objects that has our class for profile state and then we're going to inject the profile state in there so uh you'll see what i mean now this is essentially what i want to do laser state uh what was this thing laser wraps blazer state raj state objects and then we're going to inject our profile form state in there for profile state so actually not stock up for upstate state perfect so in this case yeah i just copied basis from the other thing sorry so yeah what we want is the directory that has our state objects and we want to get our profile state uh injected into this because that's how we're gonna check to make sure that we've actually are able to both see the changes that we bound to the page from the other form state uh page in order to do see the all that we need to create another div here right under this one and basically i was going to copy paste this thing up here but it was basically the same class that we're going to use that has been used in these other nav links except we're going to add the style of background white because it was hard to see so just do that so you can actually see what it's going to be written and then what i want to translate here is actually the first name so we're actually going to show you what happens when i try to get the first name from this class here just make sure that that yeah okay so we're good now don't if you're actually you know calling options and stuff make sure you put that at sign now we're going to test it out so here's our first thing this is our change we're going to do a small test what was going to happen nothing exactly so i just wanted oh look it did update it updated only after we did render it but we want to update it either on an event or we want to update it using the actual state handlers so yes even though you have tied the events together uh it's only going to update when you start to re-render other things but we want to be able to control that which is what we're doing so this is what i so you have already access to this state by doing this and the actual data the problem is actually updating it and that's what we're going to fix now i'm only surprised because i i forgot that yeah we'll re-render it again you just have to trigger it by going through the actual components and stuff so in order to do all that we need to go to actual profile state class and write a few things here the first thing you want to write is actually the actual event handler that will be the thing that's going to trigger the state change so handler handler so we're gonna have this handler up here this will be the thing that's gonna we're gonna be using to invoke uh the events uh once we do what i'm gonna show you to do which is to click a button and trigger everything again but we're gonna need a few more uh functions in order for us to actually do that so we need something that actually triggers this event so we're gonna create a function copy that here i didn't do the the tab thing unfortunately but you could just write that in take the invoke this event args dot empty we're not gonna really like passing any data through this all it's we're really gonna do is just say that an event was trick that's really all we care about right now and then we're going to create two functions one is to get the actual first name so we're going to create um a constant for this or not a constant like a private um a private string variable gonna be separate from these two that'll be our current first name write string screen current first name perfect state handler all right so now we're going to create our getter function here at first and we're going to return the very same current first name and now we need the actual setter the reason why we do this is because we're going to be passing in the these very functions in order to ensure that uh the data gets triggered and all that good stuff so you'll see what i mean once i start doing that so you don't mind i'm just going to copy paste this we have the current first name is equal to oh that's what i need to write the actual parameter when we set the first name we're passing in some string the string will set the current first name and that will actually trigger the state has changed function which triggers the which actually will inside of it trigger a handler to say an event has been triggered basically which is what we want so that'll be it for this side now we need to make some changes on this side so what you saw there when i actually uh made the change and you saw a change happened on the actual first name in the nav menu that was only because i moved between like the renders of other components but i don't want that i want to be able to control that within my component and we're going to do that through this button here so even though i said this button was for show it was not haha you see how it all comes together this was not just a happy coincidence i promise you i promise you so we're gonna have this on click here and we're going to create our own function for the uh to actually change this but before we do that let us make um i don't want to use the first name last name within the profile save because i think that might be a little too confusing so i'm just going to keep it all local more or less so public ring first to bring we're going to replace this bind value to this instead you could keep this there but this is to show you that i have made these changes and they are not being caused by anything we've done before so that's kind of why i want to do this separation so that in mind we will not have to create this method public void first name change that's part of the reason why i look over is just to make sure that i'm not blocking anything uh and that this is actually in the center of the screen apart from me cheating profile date uh so we want to get the set first name function take this and we will take the first name is equal to whatever get first name i don't think you have to really do this step but if let's say i had like an initializer or whatever or if i had other data doing some specific things i would probably want to set the first name to this so this is probably good practice just not in this case probably don't need to do it this is just something that um you probably would want to think about when you're creating an actual component that actually gets data is have that get first name somewhere either in the get uh they're in the initialize lifestyle live component so it's just a consideration but we could do this here because i don't see a reason why to do it any other place either so good what we have done is simply bind the button to this first name change uh function that first name change will set it to this function within our profile state class that will set the first name to our our private string here and it will have a state has changed and then we get the first name that it was changed to and then that sets it even though um in the net even though here the first name is bound we still need to pass it into the profile state so that we could show this to another to whatever else uh wants to look at this data or whatever else has the state management injected into it as you can see here so that's what we were going to do and instead of first name we're going to replace this with get the first name function so this should be able to every time we click the submit button we change that first name and then i'm going to explain something else to you uh that might be interesting about these on input things so [Music] don't test test submit what happened here olaf boy well that was a bit embarrassing i actually did forget something so there's actually more work to be done on the side of wherever is going to make the actual cost so in the nav menu side because here we need to actually subscribe to the event so i completely forgot about that my bad sorry about the interruption so how do we do that so the first thing we got to do is create our uh the event itself and this on this side so on first name date change we forgot about this step so this will now trigger the lifestyle component uh of state has changed so if you don't know what these are every component has lifestyle not life what lifestyle life cycle methods that do something during the render process of that component so this method basically tells the component that a state has changed please re-render essentially and then there are other comp there are other life cycle methods that do other things or allow you to put a certain logic depending on what state of the rendering it is in but this is what we care about and this is actually part of a lifecycle i don't know if you can actually see this you hover over it you see it says component base that's because this is part of the actual component so that's where i'm actually pulling this function from the component we're just creating this one so that this event triggers this that's that's all that does but there is but when you do these subscribe when you try to subscribe then you have to subscribe them um on the uninitialized step so we're going to do that because you have to you know in the beginning of the rendering describe all your uh all the uh you have to subscribe the actual state management to whatever it is you're trying to use it in in this case we're on the uninitialized step for this particular component this is what it's called profile state okay oh so this is running that's purple so we are setting this event into our state change handler so if you remember what we did here we're gonna that we're gonna be invoking that essentially so that's how that works however if you just do that without um removing it at some point in time you might cause a memory leak so up here you will need an eye disposable and this basically means that we're going to remove the subscription void i dispose of that disposable instead of plus equals whatever that is whatever i just wrote on first name state change is gonna be minus equals on first name uh state change because we got to remove this whole scripture it has to stop listening at some point and this will happen i believe at the end uh of the component whatever does whatever does the whole resource thing i don't know like it's a whole thing but it will what we want is to ensure that whenever we attach the subscription we remove it or else you might cause a memory leak at some point in time and you don't want that so now that that's done the events should trigger as expected our uh our page is now listening or you know it's actually has it is truly attached to estate management and then once the state changes on the form state side you will see it here that is trying to listen to the state management so if i do it here test test and submit so now we are able to uh both trigger an event from our form state component to the nav menu essentially because the nav menu is attached right now it is listening to the state management and then uh when we're done it the um yeah disposal will take over and then remove that uh for you when it has to so i hope this taught you how to use the state management and state management uh whatever the data is that it has in it in other places of the code basically it's similar to how react does it where in the background the the process is essentially um you have some state management that you you have a state that you are listening to and you have other things subscribed to that so that they have access to the data and then at some point in time your data is gonna you know do whatever it needs to do so unfortunately i didn't attach to this is attached to the first name so what i would need to do in order to ensure that when i do that movement uh that i don't lose that data i would have to attach it to the uninitialized of that copy paste the one i have here i'll see if i'm right as i was talking about before about adding this the on initialize step and if it's not correct then i'll figure out and edit it here here see i was correct haha i wasn't sweating at all but yeah that's what i meant before where we want to add this the honest slice step so i guess we don't really need this here anymore uh so you would have to do this extra step in order for you to make sure that you don't lose data on the actual component itself if you're doing it this way on initialize you call you know you get whatever the whatever the data you want that you were saving and then you attach this to some event like on click to set it and then that setting part will actually have a state event in there that we are attaching to the other components that want to listen to us and the way you do that is by um attaching their state has changed to an event and then that event attaches to ours so we could trigger it oh i wish i could draw it or whatever but that's how it's kind of like a chain basically yeah the really really layman's terms of trying to set this is that i have a state manager you want to listen to it you could subscribe to it to listen to it and then i could also attach events to it if i want to specifically the state has change event once i do that then i could trigger my own events and trigger the event that you need to trigger the state has the state has changed event in order for us to change the data when we need to so that is the gist of it i know it's a little confusing but that's what's happening in the background um and this is how another way of using the state to use state management is by having other components listen in to the state manager or whatever it is that you're managing now i'm repeating it a lot but um yeah this is how you do that uh this is a more advanced way of doing it but if you've been to react wrangler this is very similar to how they do it this is how blizzard does it with it without you know going to a third party i might go into that if you want you can go talk about flux or something like that so that if you are used to that way of doing um what you call if you're doing state management then we could talk about that but this is a very simple way of actually having other components subscribed to your estate management so that's all there is to it thank you very much i'm very happy that we have reached near monetization i've just applied for it because thanks to you guys you've helped me reach the threshold and you have allowed me to actually apply for the monetization i can't wait to make my 20 bucks a month just like these other youtubers at about my size so you know fantastic now but for real i i do appreciate everybody uh helping me out here and don't worry there'll be more videos to come so i hope you enjoyed it it was a little confusing yeah it is kind of confusing when you think about it in the background like just hearing it myself is kind of it but that's how it goes sometimes uh but yeah thank you very much see ya [Music] you

Channel: Just Blazor Programming

Views: 2,071

Keywords: blazor, C#, blazor C#, blazor 2022, blazor tutorial, .net blazor, C# blazor, what is blazor, .net 6, blazor webassembly, .net programmer, programmer, software developer, how to blazor, C# developer, Microsoft, .net, blazor management, blazor subscription, subscibing to state manager, listening to state, blazor state management, state management, component subscription

Id: YLu9WGKjJIE

Length: 23min 31sec (1411 seconds)

Published: Fri Sep 02 2022