Angular NGXS Tutorial - An Alternative to Ngrx for State Management

hey everyone Garry Simon of course tetro so just last week I did an N grx store tutorial for angular which handles state management and there's a new kid on the block called ng XS which is an alternative and so what I decided to do was to take the very simple and crude application we built from last week and this time instead do it with ng XS so you can make up your own mind if you prefer it I know a lot of others do it's a bit less code and there's some other advantages as well I don't get into everything but you can also you know once you understand it very basic so you can begin to research on your own especially as more tutorials come out alright so make sure you subscribe here and then let's get started oh but real quick before we begin make sure you check out my site course cetera comm where you're gonna find a bunch of courses on modern design and development a lot are free and others you can access for the cost of buying me like a six pack each month that's it now also it probably wouldn't hurt to subscribe here on YouTube and be sure to make sure the notifications are turned on all right let's get back to it okay so as always we're gonna use the angular CLI or command line interface to start the new angular project here in the console so I'm going to type in ng new and then ng XS and we'll just call this ng XS I guess and hit enter all right and once that's done we're gonna go ahead and CD into the new folder and I'm going to use yarn although you could use NPM I'm to add ng XS store so yarn add ng XS four slash store now this next step here is optional but we're going to use yarn to add the logger plugin and dev tools plug-in and there to help you when you're developing with ng XS and you're trying to manage your state and see what's happening so the logger plug-in outputs the state in a console and then the dev tools plug-in allows ng XS to work with the read X dev tools Chrome extension so if you want to add those yarn add ng XS and then logger - plug-in and then we're also going to add n GX s dev tools I can plug in and save it as a dev dependency all right and while we're in here we might as well go ahead and generate two different components an GGC one called read and that will just allow us to read from our our ng XS store and then also n GGC create and we'll use that one to write to it all right then next once it's done we'll go ahead and type in code period and this will launch Visual Studio code if that's what you're using to write your code alright so here we are the very first thing we want to do is define a model and so we're going to open up source app and we're going to go create a models directory and then inside of here we'll create a tutorial dot Model Ts and I'm calling a tutorial simply because this little fictional project is going to be based on just listing out tutorials with a name and URL property so we're gonna export an interface called tutorial and then we're gonna have a name of type string and then a URL of string as well mmm we may want to add like an ID if you want to be able to delete them easier but I'm just going to keep it consistent with the previous ng rx tutorial all right now it's also very similar to ng rx is we also define actions here so inside of our app folder let's create an actions folder and then also a tutorial actions dot es file all right control B to get rid of that sidebar all right so we're going to import our tutorial model from models tutorial model and then also we're going to export a class called add tutorial alright so this is going to be this is one of the areas where it differs from ng rx normally we would specify read-only type but this is going to be a static read-only type and then just the same as before bind it to a string of tutorial add and then a constructor we're gonna pass in the payload as well right just like that now let's just copy this we're gonna have one again called remove tutorial all right and this is remove and this time the payload isn't going to be of type tutorial it's just going to be a string and we're just going to remove them and we're going to use a JavaScript filter to filter them out based on the name obviously you wouldn't want to do that in a real world scenario all right now a key difference between ng RX & ng XS is how the state is handled so the state files in ng XS take the place of basically of what our reducer is in ng our X and this is done by utilizing various decorators so we're going to hit control B to get that side bar up and we're going to create a another folder called state and inside of it tutorial dot state TS okay so the first thing I want to do is I'm going to make this real simple just to save time and I'm going to paste in from the written version of this tutorial just shown right here by the way at corsetry comm I linked it in the YouTube description just the these three imports right here so we're just including I various imports in our various functions initially from ng rx store and then of course we have our model right here and then also we have our actions of add tutorial and remove tutorial all right and then inside of here or afterwards rather we're going to create a state model so export class tutorial state model we'll name it alright and then this is where our properties will go we're just going to have one just for our tutorials of an array of tutorial type right there alright and then after that we're going to use a decorator so a state decorator which we've imported up top and is going to take in our tutorial state model all right and it required parameter is name so I'm just going to name it tutorials and then any defaults like in a default value for to startup or load with so this is going to be consistent with our tutorial type so tutorials and in here we could pass in an object if we wanted to load initially but we're just going to make it just an empty array and we need to make that tutorials plural alright alright next we're going to export our class of tutorials state and here's where we define selectors and actions and we'll start off by defining a selector so we'll put in selector and as you can see we've imported this up top here and we're going to create a function here called get tutorials rather sorry and we'll pass in a state of the tutorial state model from above and simply right now just going to return state tutorials so this selector decorator allows you to create functions to return data or return specific results from your data so these these allow you to reduce code in your components and access them from multiple location another example we're simply returning all of the tutorials though you could run a filter on them and return only specific results or do other interesting things so now we're going to use our actions so we're gonna use a action decorator and we're going to create a function called add and then we're gonna pass in get state and also patch state another one that's commonly commonly used is sets and you'll see how this differs in a second and then we pass in our state context of tutorial state model and then also the optional action or the payload so in our case we do have a payload and it's called add tutorial from our actions file alright and then inside of here we're going to say state equals get state so this gets basically the current state for us and then we can use patch state to pass in tutorials state tutorials and then our payload and this here will allow us to add in the new tutorial to our array of objects by the way we have to add in I the actual action add tutorial up here so now I'm going to copy this and we'll do another one for remove tutorial call this remove here and then we also change the action from add to tour to remove tutorial and this one here we don't need get state instead we'll just patch state by saying get state and we're accessing this right here and then we're going to say tutorials as that's part of the state and then we're going to filter and we'll say a name doesn't equal payload and the payload is going to be the name of the property name and that's just how we're going to simply remove a result alright so that's it for our our state file and by the way when it comes to our patch state you can do the same thing with set state although patch stay in our case reduces the amount of code necessary so you can look that up on your own for set state as you wish all right so now that we have basically all of our code ready to use as far as ng X s is concerned let's go ahead and update our app module file so control B we're going to go to app module and we're going to add a few different imports so again I'm going to be referring to the written tutorial right here I'm just going to copy those four right here so control B all right so we're adding in our ng acts module also our state file that we just created and then also optionally the read up the redux dev tools and also the logger plug-in all right and so where those are added is in the import section after browser module and I'm just going to paste these lines right here all right so we have our ngx module and for route we're passing in the through the array our tutorial state and then also we're adding our logger and dev tools plug-in all right so now let's talk about what it takes to actually write to the state or to add a tutorial in a sense so let's go to right here under our create our create component alright so we want to import a couple things up top so we have import we're gonna import the store from ng rx store and then also import add tutorial from our actions file right there all rights and where did I screw up right here oh that's because I'm used to typing ng R X n G X s there we go and then down here in our component within the constructor we're going to access an instance of the store all right and then we're going to also create a method down here called add tutorial and we'll call this in our component template passing a name and URL and then we're going to dispatch an action so this stuff stored dot dispatch which is the same method that ng rx uses and we're going to call a new action which is add tutorial which we already defined and then we're going to pass in simply the object that when you have what you want to add based on the value so name is going to be name and their URL is going to be the Y we're all from above all right and that's it so let's go ahead and save that and then go to our template file for create and then mostly div class equals left and inside of here I'm just going to put in two inputs place it older his name and we'll give it a local template variable of name and ordinarily if you were serious about this you would use something like reactive forms I don't want to get that in depth though so we're gonna have URL here and then finally a button with a click event of add tutorial name dot value URL dot value add a tutorial all right so we'll save that and then also real quickly just referring to the written version I'm gonna copy that CSS and we're gonna go to source styles dot CSS right here and just paste that in real quick alright so at this point if we go to our console in our project and type in ng serve - Oh to open up the browser it won't work right yet because I forgot we need to go to our app component HTML file and just put in our two components that we created all right so once that's ready we'll go ahead and hit ctrl shift I and we could see that our logger plug-in has I already outputted some information you know if I just type in something random here add tutorial we'll see we have the logger plug-in providing us with the payload and also with the previous and next state same thing over here if you have the the redux dev tools plug-in integrated I as you use this you'll see it'll begin to update everything as we start to add and work with an GXS store alright so let's also talk about how to read from this state so this is where we're gonna head on over to our read component if I can find it there we go alright and this one we have quite a few imports so I'm just going to copy these from the written version of the tutorial alright so there's five imports all right so we're just adding here store and select this time from ng XS store and select will allow us to use a real handy shorthand feature which we'll get to momentarily we got our model here we have the state and this is also something that we're going to use in conjunction with select and then also an observable and also remove tutorial from tutorial actions we don't need to add tutorial here but we will be removing a tutorial here done momentarily so it's created a property that will hold the observable and this will be observable of type tutorial all right and then in our constructor once again create an instance of the store and then inside of here we'll go ahead sorry about that and say this is a tutorials equals this dot store dot select very simple and then we'll take our state and then we'll say State tutorials dot tutorials a little bit redundant they're my fault and then also will create a Dell tutorial it'll take in a name normally it would be like an ID of some sort this dot stored that dispatch so this time it'll instead of add a tutorial be removed tutorial and it takes in the name alright ok so now we'll go ahead and head on over to the template for this one so a read component and this time I'll just copy this in or paste this in rather from the written version all we have here is a list element and our list item rather and on click we're just passing in the name and then also let me shrink this down just a tad bit we have an NG for let to tour of tutorials and it's a sink for our observable and we're just listing these out in a I a link basis so let's go ahead and save that and check out the browser real quick all right so now let's just go ahead and add in a name of JavaScript tutorial cetera com we'll add it and it didn't work because I had a typo here I said tutorial since I have tutorials so we'll go ahead and save that go back and ctrl shift I and then just put something in here and there we go it's now showing up and we could also delete these with remove tutorial action all right so let me show you a real quick way for instance if you remember we created a selector I over here in our state file called get tutorials so how do we you this use that well let's go back to loops are read component and will combat these two lines out as we don't need them if we want to do the same thing using the select decorator so to do that simply at select we pass in our tutorial state and then the name of this selector called get tutorials then we simply define a new property of type observable like we did above so observable tutorial alright so we'll save that and you'll see that it will work just the same so we have a name we have a tutorial and there you go alright so hopefully you now have a very rudimentary very basic level of understanding of ng XS there's several things that it didn't even a touch on so I hope to do follow-up tutorials that get more in depth and more to cover more specific topics as it pertains to ng XS alright so make sure you subscribe here if you haven't yet check out course at your comm and I'll see you real soon good bye

Channel: DesignCourse

Views: 47,136

Keywords: ngxs, ngxs tutorial, angular ngxs, angular 5 ngxs, angular 6 ngxs, ngxs angular, ngxs store, angular tutorial, angular 5 tutorial, angular management, angular state management, ngrx, ngrx 6, design course, what is ngrx, coursetro

Id: SfiO3bDUK7Q

Length: 20min 38sec (1238 seconds)

Published: Wed Apr 11 2018