NGXS - introduction & getting started

ngxs one of the options on the market of state management especially taylor for angular having its own decorators lifecycle events and allowing developers to easily inject services through dependency injection inside state files ngxs gives the developer a lot of options on dealing with the data some actually advanced that will be discussed in detail in separate videos we're going to learn a step at a time so now let's jump to the basics let's go very briefly about how ngxs works the component makes a call to a state the state fetches the data the component is subscribed to part of that state and gets the data through the selector call to estate is called the dispatch state has both actions and selectors action fetches the data and assign it to a state selector returns that data as an observable component is subscribed to the selector data hence gets the data with that explanation done let's try to code that to our application here we have a simple angular application a very important takeoff is if you want to code along you can pause the video fetch the application from github right now and come back here the link is in the description of this video now is the time to add ngxs go to visual studio open the terminal and type in npm install at ngxs forward slash store wait for it to complete once npm has finished installing the library we need to go to the app module and import the ng-access module to our application remember when adding an initial state to the root of our application we need to use the for root option as default feature is used when we want to lazy load we need to provide a state class as an argument so let's create a separate folder and three files inside a file holding our action list a state file and lastly our state model first things first let's populate our state model we just need a single property of type number go to our state file and populate it with initial code when that's in place we can go back to the app module and provide our state class as an argument so that angular will load our state now let's jump to the action list file and add all the actions that our application needs let's look at the view we have an increment a decrement and a reset function we can also update the value just by typing it into the input that makes it four methods in total let's add them to our actions file first action is about incrementing it by one so you can explicitly say the type of a state in square brackets and then what it does same goes for the decrement and the reset action the fourth action is a little bit different as the user is providing a custom defined value thus the action needs a constructor that will hold a public variable the default name of the parameter is payload and i use that as there's only one parameter but if there's more then it's a good idea to name them in a state file you will have access to them by the name you've provided in the action description here in our case payload now it's time to add these actions to our state which later on we can call throughout our application in the state file we're writing the actual code that these actions will perform let's start with the increment value action we need the add action decorator then provide which action we're describing then in the action options we only need the state context inside the metal itself first we need to fetch the context current state then get the value from our state increment it by 1 and call the context again this time setting a new incremented value that's it for the first action and a very similar approach goes to decrement action reset value is even simpler as we know our default value is zero so we can simply set it to 0. the last action looks almost exactly the same the only difference is that the method now contains an argument called action of type set value we use that action to set a custom value into our state like so we've added the actions but now it's time to let ngxs know what can be returned to our components we need a selector selectors are simple static methods that we use to return chunks of data from the state to the component they consist of a decorator and a name inside the selector we declare what part of data is being returned from the state when that's done we simply go to our component and call that selector we can either subscribe to the data inside our typescript file or use the async pipe within the html in the change value component we're going to subscribe to an observable and assign the result of that observable to the local variable we also need to call our actions from the state but first we need to inject a store now we need to replace the code inside increment and decrement methods we also need to add two new methods the reset value and the set value going to the html file we need to replace setting a value to zero with a method call and add a ngmodel change that will now call our setvalue method for the second component we need to select the creator and use it on the view with an async pipe which will handle our subscription that's it our state is fully implemented now important key to notice if you want to see our actions and changes to the state life you'll need two things first you need to install a chrome web extension called the redux devtools the link is in the description of this video then you need to go back to your application and run npm install at ng access forward slash devtools plugin last part is simply adding an import and declaring it inside the imports array of your app module file when you serve the application and press f12 on your keyboard you should now see a new tab called redux now when we perform an action in our application we can see it being reflected on the right and because we name our actions nicely we can clearly see what's happening within the state that's it for today thanks for watching and i see you in the next video [Music] you

Channel: JavaScript and Stuff

Views: 598

Keywords:

Id: y1gfyEaKPpk

Length: 6min 46sec (406 seconds)

Published: Thu Oct 07 2021