Managing Blazor state using Redux | Blazor Tutorial 11

hello everybody I'm Nick and in this video I want to talk about the problem of managing state in your blazer application currently we have something like this what you just see in your screen right now in a very simple app you have your user and then you have a bunch of components in here we have one and this component usually has a state internally represented by variables or properties and then we have events like on click event or type-ahead events and stuff like that and then you can have nested components and this is easy if you're just saying a to-do list or the application that comes out of the template and later it's easy to manage this because it's not much but all your going into more complicated things you'll see that state management becomes a pain because everything can mutate your state in your blazer application unless you control that for example if we go in a more complicated scenario where we have two components you have your component 1 we're using might be interacting but if the state of this component change is through an event then this state might actually be used by another component that also is affected by it and it needs to represent the change in that state but then this component also can change other states and potentially win the state of the original component so you can have this mess of a state management system where you cannot actually see what's going on and then you might have bugs are very hard to reproduce and it's going to be very hard thing to manage as your application becomes bigger this is where we can use a very popular library from JavaScript called redux in our application to manage the state and just to make it clear we won't be actually using redux and redux is just a library that implements a few concepts like the Flex architecture and then CQRS an event sourcing but we're gonna use the exact same concept through a library that a member of the community has created to see how we can manage State in a very efficient and manageable way and let's see our example how how redux looks like how this flux or package operates and we're gonna see why it's easier and better to manage the state for our application or components so I'm gonna explain what you're seeing right now this is a basic implementation of lecture the packets were going to use which is essentially a redux blazer we have a user as before and now we have our component and the component no longer stores its state in the component it's just that daughter eraser file with the state coming for somewhere else and where this state is coming from it's coming from a centralized store this store is a huge singleton object and you might be saying oh isn't that an anti-pattern like a huge object in my application normally it would be considered as such but in this specific scenario it's actually a great tool that we can use to manage our application of State and you're gonna see exactly why we exposing the state for this component through a store of the type of the component and you can also use stores of other types in your component if you wanna see the state of other things and the state is never mutated on that store instead here's what happens the component during an event will dispatch through a dispatcher an action imagine the action as just like any other thing that happened and you describe this with a co-op class that has some properties in it to explain what exactly happened and then this action is being picked up by something called a reducer and the reducer is just like an event handler which only has a reduced method which you can imagine as like a handle method and this reduced method is a pure method this means that whatever is coming in whatever the parameter is will not be mutate it cannot be mutated and this is very important instead we're getting the action and the current state and we construct the new state based on that action and the previous state but this previous state is never mutated very important in the whole concept then this new state is pushed into the store and then served to the component and this is exactly what Redux does there is no magic in it this is a very predictable approach to the whole concept and that's because you know exactly which reducer can create a new state for that state in the store and you can track it and you can actually replay it you can export and import it and debug it very very easily we're gonna see how we can do that in this video and let's see exactly the same thing as before if you add another component what happens to your architecture internal Yemen so here we have two components component one component to you and now all you need to do to add the other component is you have another set of an action and a reducer and then the new state into the store and then you have a store of T which is essentially a state provider for that component and you could very much use the same state in another component if you want to provide it but nothing can mutate this state and in fact because C sharp has getters and setters this state shouldn't have any setters nothing should be able to change it even during runtime instead we're gonna have the reducer everything goes through that pure method and then the state is recreated and then pushed into the store now we're gonna see exactly how we're gonna do that in that video this video is part of my blazer series so if you don't wanna miss any episodes please subscribe and the some modification bells to get notification when a new video comes out so here we have application that will be building throughout the a lifetime of this playlist this tutorial series and we have the counter raise or component which is just a component where you just click to increment the count and we have the current count stored as a private field here and every time we increment count we increase that count and this is the state of our component it's this count property and this is starting very in simple straightforward by the way the reason why I'm showing this is because when we build our trailer Cologne I'm gonna heavily use this pattern and I'd like you to be able to follow it without feeling lost so that's why I'm gonna start small and then when we actually sit in practice to make more sense in the large-scale application so the first thing I want to do here to implement my flexure approach is to add the blazer dot flexure package this is a package created by community member and I highly recommend you check it on github does a couple of other projects as well but I found that flexor is probably my favorite again it's a personal opinion you can choose your own but that's how I'm going to manage the state in this application so I'm gonna use flexure and that should be added and then the first thing I need to do is I'm going to set up some code for flexure so the first thing I need to do is go to the app dot eraser at the very top and I'll need to do it a couple of things I need to initialize my stalls essentially so I'm gonna say inject the laser dot flexure dot I store and that's the store I showed you in the graph is where the state lives and then underneath that I'm gonna do store dot initialize and that's all I need to do to initialize my store and once I've done that I need to go to the host dot CSS HTML and down here I need to include a J's file which is coming from the package we just added and that is going to be underscore content for slash blazer dot flexor first last index dot JSON data it in terms of setup now we're gonna convert this counter dot razor to a flexure component and the reason why we can do that is because one of the huge advantages of using flexure is that everything that is a flexural component will actually instantly be notified of changes when the state is updated and we're gonna see how that plays out in a more elaborate example when I'm gonna involve the navigation in a moment but for now let's just stick to that so the first thing I want to do is I'm gonna go here I'm gonna say inherits from flux or component so this is a flexural component and then I need to create a few things for this component so I'm gonna go in my root folder and I'm gonna say store and I'm gonna make a folder in here for its state that I'm managing the first thing I want to do then is I'm gonna make the folder because we're gonna put everything we need for the counter that razor folder in here and I'm gonna create my first file which is going to be the counter state and the counter state just needs to have the current count it's very important to remove the setter here because we don't want the state to be changed by anything in our code once created and then we're gonna just initialize it from the Constructors or current count and then current count equals current count and that's it in terms of state starting very simple that's all we need now the next thing we need in here is a feature and the feature is just a way to identify our state in our store so I'm going to create our counter feature class and this counter feature will be an feature of type counter State and if I implement the missing members you'll see I'm getting a get name and I get in initial State so I'm going to shorthand write them this is going to be the counter components of your name counter and then the initial state is where we provide what the component will be initialized with so I'm gonna say a current count will be 0 so we start with nothing and we can close that as well now the next thing I need is an action and this action will be what will happen whenever somebody clicks the button so I'm gonna say counter dot create clause and I'm going to create an increment counter action and this is the action we're going to dispatch every time somebody clicks the button and I don't think I'm gonna add any parameters here this is just used for identification purposes but if you want it for example your clicks to count as to you can have the click count here not counter sorry count and discount we use by the reducer when the new state is created and nice segue this one because we are going to need a reduce as well these four things are crucial for our whole flux or implementation so I'm going to create a reducer called increment counter reducer and this which user will need to inherit from redo the reducer and then we have two generic types the first one is the counter state so the state we're going to use and then the action we're gonna use to listen to so increase meant counter action and there's only one missing member to implement and that is the reducer and as you see here the reducer this pure method we have the current state of our component and then the action where we can actually just say action dot anything and get any values related to the action the thing I want to do here is I'm gonna say return new counter State and as you can see we don't change anything here we don't do anything like state dot current count plus plus and in fact we cannot do that anyway because this is immutable we are returning a new state and this is very very important and we're gonna say state dot current count which is the previous one and then plus one and that's how we're gonna increment and like I said if I had a different like step level I could just say action dot step and increase based on a different number but now I'm just gonna do one so you can actually understand this with the minimal amount of code required so once I have these three things in place I can go back to my component three for things and I no longer need to use this current count this can go away I no longer mutate anything in my component instead I'm going to inject two things first I'm going to inject an i dispatcher and this dispatcher is what is being used to dispatch our actions the other thing I need to inject is an eye state of type and then the state type so in this scenario it's counter state so if I just copy that our counter state is now being injected and that's where I'm gonna get the current count from I can do counter state dot volume dot and the current count I created in that class can be accessed here but nothing can change it here what I'm gonna do when I now click increment count is the following I'm gonna say dispatcher dot dispatch there's only one method in here and except an object and this object will be an action and is going to be the new in cream and counter action and then this action will automatically be listened to and increment our value in order to do that I need to go to startup and I need to use some a DI initialization code I'm gonna say services dot add Flexer and then some options here as well we'll say options dot use dependency injection type of start-up dot assembly for a little bit of assembly scanning and this will automatically register everything you can find all the actions or the reducers everything for you don't even have to do any other work to get this to work now with all that out of the way let me just run the application and see how application is working now so as you can see application is running and if I go to the counter component click me now still increment the count in the same way it used to but look at this if I go to another component completely the other one goes away is being disposed and then I go back you can see that my state is the same we didn't change even though if I did this without this flag for approach this would be zero now if this will be only this powers completely if i refresh my state is no longer there you can see that even that changed but now I can just maintain the state and as the user is navigating the site everything that they in different places they stay the same because the state is being managed by this same entity now this is very cool but let me show you what's cooler in this scenario if I stop the application now I'm gonna go to the shed folder and find the nav menu and I'll go I'm going up here and we are say inject the eye state of the counter state and as you can see the counter State is here injected everything but now I can go to the counter and if I say open brackets counter state dot value dot current count and if I of course change this into a flexural component so if I say inherits from a flexural component then when I run this let's see what happens now I have my application running and the counter is zero because the state of that thing is zero even though the component is not initialized the state is there and I can access it but the cool thing is not that I can access it is but without any code once I click this this also changes I didn't need to subscribe to it it automatically subscribed as long as it is a flexure component which is awesome because not only you can actually see it changing to components at the same time with minimal code but you can also change components and the state is still maintained and shown and the cool thing is you have full control over the action and the reducer which means that the state can be predictably and deterministically updated which is huge when it comes to debug on obligation and you might be saying oh that's very cool that can't possibly get any cooler well let me show you how it can actually if I got the startup this package also includes some other options that are very interesting like if I add middleware and middleware is a concept of radix and this flux architecture and we can take a look at it in the future video alongside a custom subscriptions but for now let's just focus on this if I do Redux dev tools middleware and also options dot admin where route routing Middler what both coming from flexure if I now run the application let's see what I can access so I'm here back to my counter component and as you can see this icon here in the Redux dev tools which is a google chrome plugin that you can download if i click inspect there's another thing here called redux and ignore the errors here we can ignore them for now as you can see I have this little inspector of my application and as I mutating the state look at this you can see exactly when and how the state was mutated you can see the rotation at being as being pushed you can see the tree the diff you can see the state change on exactly the URL that happened and you can even do things like export and import this the other thing that you can do which is very cool but sadly I'm doing this in a server side blazer is that you could actually replay the whole thing and as you can see me replayed but it's not actually changing anything that's because it doesn't work on server side blazer but if you were using client-side blazer you would see the actions happening automatically before your eyes and the reason why this is amazing is because you can debug this very very easily and efficiently and this is a free plugin you can just download and install it I highly recommend it I'm gonna be using it in our a trailer a project so if you like this please make sure you go and start the project on github it's not my project I don't even know the price related but it's a great project that's all I had for you for today just an introduction in this flux or redux type of thing i'm going to make more videos on the subject as we're going on and if you like this type of content please let me know in the comments down below especially next to my github sponsors for making these videos possible if you wanna support me as well you're gonna find the link in the description down below leave a like if you liked this video subscribe for more content like this and ring the bell as well to get edification for new videos and I'll see you in the next video keep coding

Channel: Nick Chapsas

Views: 15,903

Rating: 4.980392 out of 5

Keywords: Elfocrash, coding, asp.net, .netcore, dot net, C#, how to code, tutorial, asp.net core, javascript, csharp, development, lesson, software engineering, microsoft, .net core, nick chapsas, chapsas, asp.net core 3, blazor, webassembly, wasm, razor components, blazor fundamentals, blazor authentication, js, blazor tutorial, blazor for beginners, redux, flux, blazor redux, flux architecture, cqrs, event sourcing, state management, dotnet, .net

Id: k_c-ErPaYa8

Length: 19min 47sec (1187 seconds)

Published: Mon Nov 18 2019