Ngrx Store Tutorial for Angular - Learn State Management for Angular

hey everyone Gary Simon of course etro today we're going to take a look at ng rx store which is a state management solution for angular so if you're dealing with data that's in a medium to large size angular application and you're passing it around to different components it makes sense to use something like ng rx because it's going to make your life a lot easier especially when debugging and trying to test your application so it's built on top of rxjs which is reactive X for JavaScript and I just did a free course on that it's about 59 minutes it's a crash course it'll help you understand the observable aspect of ng rx because it's built on top of rxjs alright so as always make sure you subscribe here and also leave a comment not enough people are leaving comments leave I don't care if it's bad you tell me I'm just absolutely terrible go ahead leave a comment and let's get started all right so I'm going to use the angular CLI to start the new angular project so 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 make sure you have that installed and if you know if you want to check it ng - V that will give you the version go ahead and install if you don't have that I'm not going to cover that part yet so what we're going to do is once you have it ng new and then I'm just going to call this ng rx toot for a tutorial and let this install alright it's finished now so let's CD into that all right and now we're going to use a package manager you could use NPM if you want I'm going to use yarn so in the case of yarn he'll be yarn add a 10 gr x ford slash store and I'm going to hit enter also at this point if you were having if you're gonna be working with api's and such you would also want to include ng RX effects as well but we're gonna keep everything really simple for this tutorial and then I will release I future tutorials will recover more intermediate topics but this is just bare-bones just to help us get our feet wet and understand everything a really basic level alright so now once that's done I'm just gonna run ng serve and then - Oh to open up the browser for us at localhost yeah it's already hitting and used soups alright I closed the other project and this time it should work and there we go localhost 4200 it is up and also I'm using Commander for my console emulator here and I you can right click and create a new window or new console or you can also load up you know if you're using a different one just load up a second one hop into ng rx toot and we're also going to run code period if you use new using Visual Studio code to load up the current project alright and here it is we are in ng rx toot okay so at this point we're going to create a model so for our fictional project we're going to allow users to submit both a name and a URL of a fictional tutorial using a simple form now we're not going to be persisting this data in a database or anything because that would really extend the scope of this tutorial way too much so we only want to focus on ng rx store and learning how to use it so being that we want to store two pieces of data and the flavor I have an array of objects we will first define this model so we're gonna head on over and side of our source folder we're gonna create a new folder where we'll store the models our case we're just gonna have one all right and then inside of this models folder we're going to create a new model so a file of our called rather tutorial Model Ts all right so a model of course this is something that's specific to ng R X or anything so we're going to export interface will call it tutorial and what is a tutorial going to consist of well a name of string and also a URL of string as well so go ahead and save that and now let's talk about actions so this is specific to ng Rx and an action in ng Rx store is two things basically first it's a type in the form of a string and it basically describes what's happening like for instance it could be had tutorial or remove tutorial or update tutorial and then second is it contains an optional payload of data so in the case of adding a tutorial that payload would be like the name in the URL and you don't always have to have the payload of data like in the case of if you're going to increment some type of number for like a view counter you wouldn't need any data to pass along you would just need that type or which is that string likes for instance increment tutorial count or something like that all right so let's go ahead and we'll go and create a new folder so make sure you're just in your source and we'll create a folder called actions alright and inside of here we'll create a file and we'll name this tutorial dot actions TS alright so at this point I should note that this I this entire tutorial that you're listening to you're watching is also written and so the written version is linked in the YouTube description and it has all the code that we're going to be dealing with and I'm basically following this this written tutorial as I you know as I record this recorded version and so I'm going to be just copying and pasting pasting and then describing bits and pieces of the code so if you want to do the same you can you don't have to sit here typing everything out character for character alright so but the very first thing for our actions file is we're going to import I'm going to control B to get rid of that side bar is route yeah we're just going to import these three lines right here I mean just I do the two relevant bits here would just be the fact that we're importing action from ng store being that this is an actions file we're defining actions and then also our tutorial model that we just created very simple stuff so for the next section we're defining two constants and the first is to add tutorial and we're just naming it tutorial in add and this is the type alright member I mentioned the actions are two things they're types in the form of a string okay so this is that section and so right now I'm just creating two for adding and removing and I should give us you know enough muscle memory to work with this thing you can go on your own to do other types as you wish and then for our third section I will type this out and we're going to export a class called add tutorial and it will implement action and we're going to define a variable read-only and the name will be type and equals our constant our first constant of add tutorial and then also will have a constructor we pass in public payload of type tutorial and if this is confusing to you don't worry basically at this point we're creating a class for each of our actions with this constructor constructor constructor right here and this allows us to pass in the payload of data and this whole setup right here isn't necessarily required you can create a more simple version where you don't even create an actions file and I'll mention that when we get to the reducer section all right we're going to do the same thing for remove tutorial so remove tutorial all right and then this time we don't need a tutorial to pass in all we need is the index I of the tutorial that we want to remove and you'll see how this works but in this case it's not going to be a number it's a it's an integer essentially and you normally you'd be persisting this in a database somewhere our case we just need the index from which we can remove the object from the array of objects all right and then finally we want to export a type of actions and then we reference add tutorial or remove tutorial right here and this will allow us to access those actions in the reducer that we created shortly so right here and again when it comes to ng rx store one of the areas people would probably be most confused about is this section and also the reducer coming up but this you'll start to understand how this works more and more by the way these don't necessarily even need a constructor like I mentioned before if you don't actually have to pass in any type of data all right so let's go ahead and save this and we'll go control B here to get our side bar and now we need to create the reducer so we have our model right here we have our action and now we create the reducer alright so a reducer is what takes the incoming action and decides what to do with it so it takes the previous day and returns a new state based on the given action and the the payload or the data that's coming through so let's create a reducers folder in source and we're going to create our tutorial dot reducer TS all right so first things first we have three different imports and we're importing action from an grx store our tutorial model model as well as all of our actions and referring all of it as to tutorial actions alright so for this next step if you want to create an initial state with some sort of data then we'll create it like this a constant we can call it default state or initial state whatever you want and it'll be of a type tutorial and then we could just define name for instance initial tutorial and then a URL of Google com alright so now let's create the actual reducer so the way we do that is export function and we could call this just reducer if we had one of them and we do but you may want to name it something a little bit more specific like tutorial reducer or two to reduce or whatever I'm just going to call it reducer and we pass in a state of type tutorial which is an array and it's going to equal and this part is where you can either just leave it like this or if you want to give it that initial state we can make it equal to that initial state right here and then for our action we'll put in tutorial actions dot actions right here alright so this is coming from here that we imported and we have to put a colon there and then for our reducer we're going to open this up and now we use a switch to determine the type of action that's being accessed so what we do is we type in switch and then the action dot type all right so that this action type is coming from right here and the type if you recall if we go to our actions is defined right here so the type is add tutorial or remove tutorial all right so we open this switch up and we say in the case that our action type is equal to tutorial actions dot add tutorial that I just put actions twice yes I did all right then in that case we're going to return our state and the action payload right here now if not we're just going to default to returning the state itself and the state is whatever is right here as defined so when we initially call this reducer and the project loads up I the default it's by date by default it's going to return the state until the action type which will be accessed through the dispatch mask method is equal to add tutorial all right so you'll understand a little bit more as we go and we're also going to add another case for a removing the tutorial but we'll do that in a little bit so we're just going to keep this simple for now and just save it and the we're almost done with the setup work here we're going to create in app state so inside of our source folder we're going to create a file called app dot state TS and we're going to import tutorial from our models tutorial model and then we're going to export an interface of app state and it's going to be a read-only tutorial and it's bound to a tutorial array and if you had multiple models for instance I've you had like categories you would import that as well up here and then also add another line of like read-only category to category array like that and on our case we are only going to be using just this one though but I thought I would mention that so now let's go to our app module TS file oh and I just realized the reason I couldn't find is because I've been working in source but we should have been working in app here so that's very simple don't worry we need to move actions models and reducers as well as our app state into apps sorry about that there we go that's better sorry about that again so what we're going to do now is create that I or go to our app dot module file and now we just have to import a few things so we're going to import our store module from ng our X store and then also the reducer that we created in tutorial reducer all right and then in our imports after our browser module we're gonna put in our store module that we imported above for route and then we pass in a property called tutorial and then we name it reducer all right go ahead and save that and then we want to generate two components for reading and writing to our ngrick store so I'm going to go back here and I'm just going to type ng G for generate C for component and we'll name it read and then at the up key are the up arrow key and we'll call this one create alright great now I what we want to do first will handle reading from our ngx store so we're going to open up our read and read component ts file and we're going to import I four different lines here at the top so the first will be our observable and we're importing an observable that way we can define a property as an observable because that's what's returned from ng rx door when we're trying to access our data and then we're going to import our store our tutorial model and our app state from the app state file that we created all right so next in the class we can say define a property and call tutorials it's going to be an observable of type tutorial and then in the constructor we access a store of app this is where we pass in our app state and then right here we can just put this dot tutorials equals store dot select and this is how this is a really important part this is how we actually access our ng rx store in this case we want to select tutorial and this is coming from by the way like where is tutorial coming from this is coming from our app module right here we're rebind the property of tutorial to our reducer and then it when this calls the reducer then it's going to make a call to a reducer and we'll see that the action type isn't going to be at tutorial it's going to be something else is going to be empty default it's just going to return the original state right here all right so hopefully that makes sense I'm going to go back to our read component we'll save that and now let's open up the HTML oops that's not the HTML there we go and we're going to paste in just a little bit of HTML not much we're gonna say I don't believe we need this here if you were working with an API you would but we're gonna say we're here we just have an unordered list item or using ng4 to iterate through our tutorials property that we defined and we're passing in the async and this creates and also handles unsubscribing from our observable and then we bind the href property to the tutorial URL property which is one of the two properties of our tutorials and then also we're using interpolation to show the name here very simple so let's go ahead and save that and let's go to our app component HTML file this is the default stuff that's generated with from the Ciera CLI and we're just going to add in our other two components so the first one is going to be the app create component which we haven't worked with yet and the next one is going to be the app read and again these names by the way this is all basic stuff so hopefully you're not a beginner - let's see here - - angular but this is all coming from right here each component has a selector okay so also real quickly I just want to make three rule sets in our Styles dot CSS and this is the global CSS stylesheet here and this is just gonna make it not look like absolute garbage so nothing too impressive is happening there now let's save it and with any luck if you have your ng serve command still running there you go we will see that we have our tutorials and most importantly our initial tutorial so let me just show you something real quick if you didn't want an initial tutorial to show up or an initial state of sorts then you could go back real quickly - I hate working with such a small size here I have a 4k monitor but we're I'm recording on a 1920 but if we go through our tutorial then all we would have to say is save that just get rid of that portion there you go it's not there anymore but I'm gonna leave it there all right great so now we know how to read from our end react store so let's talk about writing to it and into car add tutorial action so to do that let's go open up our create and our create component file so once again we're going to be importing pretty much the same four lines plus and another another one so we got our store right here our app state our model and we're also importing our actions because before in our read I model we didn't need any type of action so for this one we're importing our actions and then as well the observable so now oh and I just realize they don't even need the observable we're not defining any type of observables here we're just dispatching in action so now in our constructor again same thing we want to access our store app state rather and we're going to call a method called add tutorial where we pass in a name and URL from a form and then we dispatch from the store a new tutorials our tutorial actions rather and we call add tutorial and we pass in as an object the name from the name parameter and then the URL from the URL URL parameter okay so that's all we need for that page now let's go to our HTML for our create alright and this is real dead simple as well so all we have here is our two inputs with local template variables a name and URL and then we're just passing them in here normally if you were constructing a form you wanted you wouldn't want to do it this way but you would probably want to get into reactive forms which I do have this tutorial for already but I don't want to bog down any other none necessary stuff with this tutorial we're already pretty lengthy so let's save that and now let's try adding a tutorial so if I could find it there we go alright so this is it let's say rxjs tutorial I'll just give it any old URL add a tutorial voila there we go awesome so let's also get a little bit more muscle memory and talk about removing one of these so let's save on click which wouldn't make sense because these these are links already let's just make it easy on click that we wanted to remove one of these items and we'll do it from this store so let's go ahead and go back to our read component so control B go back to a read/write in here actually it's good to the HTML file first and we're just gonna add a click onto each list item click event equals we'll just name this Dell for delete tutorial and we're going to pass in I which is going to be the index and we define that right at the end here so we put a semicolon with let I equals the index save that and then we'll go to a read component and we do have to import let's go back to our I'm going to copy this part right here we're going to import this because this time we do need in action all right and then let's create that method down here delete the tutorial passing the index and then we say this does store that dispatch and we're going to make a new tutorial actions remove tutorial we pass in the index and that's it alright so now we can't run this yet because if you remember in our reducer we didn't create the case for remove tutorials so we're gonna take this we're going to paste this and we'll say remove tutorial so in that case what do we want to do now well in this case we can return the state but we'll do that only after running state splice the action dot payload which again is just equal to the index or the number and then we just want to remove one from that point so we'll save and now we'll go back here and let's just add one like that just so we can create some separation and let's say we want to remove this initial tutorial let's click over here to the right there we go awesome stuff all right so hopefully it all came together near the end and now you have a very basic understanding of ng rx store so coming up in you know hopefully the near future I'll also be covering ngrick story as well as ng rx effects and that's handy for more real-world case use case scenarios when it comes to creating applications that you know that get information from API and started communicating with api's and grx effects is something that's very necessary for that alright so hopefully you found enjoyment out of that make sure you subscribe here leave a comment and I'll see you guys real soon

Channel: DesignCourse

Views: 209,601

Rating: 4.8130841 out of 5

Keywords: ngrx tutorial, ngrx store tutorial, ngrx, ngrx store, ngrx/store, angular state management, angular 5 ngrx, ngrx angular 5, ngrx angular 4, ngrx angular 6, angular 6 ngrx, ngrx store angular, tutorial

Id: 9P5DTlg9oLc

Length: 27min 46sec (1666 seconds)

Published: Thu Apr 05 2018

Reddit Comments

[u/dreamache]

Ty, written tutorial is here: https://coursetro.com/posts/code/151/Angular-Ngrx-Store-Tutorial---Learn-Angular-State-Management

[u/gomjabar]

Great tutorial! I learned a lot from it and am looking forward to your ngrx/effects video to come. This seems like a much cleaner way to do state mechanics than what had come up with.

One suggestion that would have helped me, as someone who had never heard of ngrx/store before this, is to spend a minute or two at the beginning explaining what the goals of the package are and maybe a quick background on state mechanics.

[u/testard]

what about NGXS