Build a Shopping List with @ngrx: Part 1 @ngrx/store + devtools

and welcome to my introduction video on ng rx store reactive estate management library for angular you can see this article which is effectively an article version of this video over a developer dot school you'll also see that inside of the comments and description so as you can see the first step is to of course make sure you have the angular CLI installed and then of course we're going to create a new angular app using that angular CLI so let's jump over to the terminal and run these commands so firstly we want to run ng new and we're gonna call this ng rx a shopping list you can call us whatever you want essentially providing that you have the angular CLI installed it's just gonna make it new angular app so we don't want to add routing at this point because we don't need a we may have it in the future but for now we'll simply say no and then we want s CSS once again this is a trivial sort of decision because we don't necessarily need to have crazy styling at this point so when we come to actually add ngrick store in a moment there's a couple of ways in which we can do that we can do that with the angular CLI or we can just install ng rx store just by default with NPM we're going to be using the NPM option at this point and that's just gonna make sure that we do everything by the bug so we know how to go from an application that doesn't have ngrick store and we can see step-by-step how to actually add it to our project and then in the future I'll show you how to add this with the angular CLI so this may take some time to install be good time to get some coffee or simply just sit back and relax as NPM installs all of our packages this would also be a great time to hit that subscribe button and the notification bell to stay updated for more content especially if he interested in angular and ng rx so once that has completed we can see D into n grx shopping list and then we'll need to install at NGR X slash store now that's simply just installing the package itself however if we wanted to have the angular CLI set this up automatically for us we could run ng ad and your X slash store and by using the angular CLI to do this what the stars is are updates package.json it runs npm install on the ngrick store and creates it reduces folder with the reducer and as well as the add updates the module dot es these are all things that we're going to be doing manually for the first time then in the future you can use this command to have this set up automatically for you so now that we've installed ngrick store and of course we've started our project we can use called dot to open up inside the vs code and we can run ng serve at the same time and this will open it up inside of the browser so what I've done here I've opened up the application I put it on the right and I'll call this here on the left the first thing I'm going to do is open up the file system and inside of the source app folder I'm gonna make a new folder called store and because our application is quite small we're gonna put all the things related to the store inside of this store folder now if you have a larger app maybe you're using something like NX workspaces to create multiple libraries this makes sense on a library basis it may not make sense on a larger app which has multiple store elements you may want to put that inside of its own sort of feature folder but for now it'll work for us so let's make its talk and then inside of the store folder we want their models for them and that will be our shopping item Model Ts so what the first thing in mind we'll export an interface named it shopping item and our shopping list is simply just going to have an ID of string and a name of strength super simple you can think of this model at this moment as a representation or the shopping item inside of our store so we'll have an array of shopping items and each shopping item will have an ID and an M okay so let's now move on to our store and make in actions folder inside of the actions folder we can have a shopping don't actions don't TS file and in indirect store actions sort of represent the main building blocks that express the unique events occurring throughout our angular application so what exactly does that mean well we can think of an action as any time we want to update the state of the application or otherwise communicate with our store we want to send off a particular action so maybe if we wanted to add something to the shopping list we would dispatch an action called add item this will make sense in a moment so let's import from an grx store and we want the action we also want our shopping item so let's import that too from our models and then we can create a new enumeration so let's export an enum called the shopping action types inside of our enum we'll make an add item and that will be equal to shopping add item so this is a string representation of our action action strings have to be unique so what we're doing here at this point is we're saying shopping in these brackets and that allows us to say this action is part of the shopping state and then we want to add an item as this is a local synchronous thing we're going to make the assumption that adding an item cannot feel so it's always going to be successful if we wanted to have a failure state and its success tit we might have an ADD item but we also may have an add item success and an add item failure and as such we create a couple more different actions that would allow us to start the add item process and then if it was to succeed we'd say hey this is succeeded fire this new action and so on but that's sort of jumping ahead of ourselves for now that's when we start getting into ng rx effects and we will look at this in the future for now we just want the add item we also want to export a class and that class is called add item action so this actually implements the action and events that we imported earlier on and every action has two main properties a type and an optional payload so the type is read-only and that's a read-only string and that represents the type of action that we're going to dispatch into the store so that will be shopping action types don't add item and we also have the opportunity at this point to add an optional payload and that's some data that goes alongside this action in this circumstance we can have a constructor with if public payloads equal to the type of shopping item and whenever we dispatch this action we can pass along a payload of a shopping item finally I'm going to export a type and this type is going to be a shopping action and that's gonna say then that's either an add item action and in the future when we have multiple actions we'll say that a shopping action can either be an add item action or maybe in the future we'll have a delete item action and so on for now we're simply just gonna set this equal to the add item action so think about it this way at the moment now we've described the add item option or action for our shopping list app we've described the fact that a user can add an item and when the add an item that's of type shopping item so that's all well and good and that gives us the ability to describe the action but now we want to add in what's known as a reducer and this reducer in managing the transition from state X to state Y so this takes our shopping items so an array of shopping items and if we added a new item it would have penned the new shopping item to the end of the list it would return this as a new array so we aren't mutating stared at this point and we're gonna look at that in the next section so that means we now need a new folder called reducers let's create a shopping reducer don TS so the first thing I want to do at this moment is define some initial state of our shopping item so let's have a const initial Stead's and i'm just gonna copy paste the end from the developer skill article you can paste that in here and you can see we now have an initial state which has an ID and in name of diet coke this would represent a 1 item inside of the array and then next what we want to do is export a function called shopping a reducer so the reducer has two things it has the current state and it also has the action so the state will be of type array shopping item and we can make our one interface for this if we wanted to but for now we'll just set that to be the initial state and finally we also want the action and that's going to be of type shopping action so we'll need to import that from our actions slash shopping don't actions so the reducer says hey what's our current state and at the moment we are giving it that initial state and then it says what's the current action that's been fired and then we then have to do is switch statement on the action don't type and in the case of default so this is where no action matches a particular shopping action we want to return the state so the moment that's just want to return the initial State however if we have a shopping action types dot and item then we want to return all of the previous states but this time add the action or payload to the and of that so what exactly is happening here well we're returning a new version of our state's know that we aren't over writing the previous debt instead this is a new version that takes the previous debt and then adds the new item the item of course is that action payload and if we hover over the action or payload we can see that it's an ad item action dot payload is of course of type shopping item because we type that inside of the actions so we can say public payload is of course the shopping item next up let's add another thing to our models and this time we can add something called AB dash dates don't Model Ts so like I said we have a small app right now so this sort of structure makes sense and the app state is just going to be it sort of statically typed a sort of strict ID interface for our state so we can export an interface called app state and we want to read only shopping which is an array of of course shopping item so why are we doing this at this point well that just allows us to get an idea of how our state locks throughout our application so when we start add other things to states we can understand that hey we've got shopping we might also have a car to him I have multiple other things but if we didn't keep this in an app state it would be much harder to understand the structure and outline of our state I'll guess on next up we want to go to our app module make sure we save this and then at module don TS and inside of our module we want to import the store module dot for route and they store module comes from ng RX / a store you can also hit command periods and that will give you the opportunity to of course all or complete that and inside of here we have the option to pass in some reducers so because the shopping functionality isn't part of a feature module at this point we are going to say that this shopping is a route for a juicer but if we had things such as shopping as a feature module would want to use something called a storm module dot for feature inside of that module and then past the reducer within that module we'll look at this in future videos and articles of course but for now we'll simply want to say that shopping should be equal to the shopping reducer so we'll need to import that from of course our store reduces shopping dot reducer now you can make an indexed on TS file to make this easier to import but for now as we have a small app we can simply just import it in the long form version we also want to add the forms module as I'll be using the ng model so let's take an import from at angular slash forms and we want the forms module and here comes the fun part so now we're going to look at wiring up the store to our user interface and seeing our shopping list in action so to start with I'm gonna head over to the app component CSS and I'm gonna paste in some CSS this is nothing too complex it's gonna break how our application looks right now but you can get this CSS over a developer dot school these sort of posts that I've linked to inside of the description and comments or you can just simply leave it's up to you and then I'm gonna take the background color and put that in these Styles dire CSS and save the file once again this is part of the article so inside of our app component we want to make a constructor and the constructor of course it will be injecting our store of type store which has our app state and that represents our store and they store itself comes from an grx slash store so this tells ng RX how our store looks and we'll see at how we can select an item from the store in a moment I want to keep the selection as part of ng on an Ed's so let's import on a net and we'll implement the in defense like that we can remove the title it's gonna break an hour-and component or HTML but that's fine and inside of ng on the net I want to say this don't store don't select and right now if we said store and we put the arrow function and see the value of store we can see that we have this shopping and shopping then allows us to of course select the shopping item or rather a list of shopping items because it's an array and we get that because we've tied this to our upstate so and jarek's knows how the store locks and as a result we get this typing which makes our life much easier so most the time we won't be selecting items from our store like this will be creating what's known as a selector but for now this will work because it's just a super small example and the final thing I'd like to do at this point is to make a shopping items and set that to you an observable and that observable will be of type array shopping item so we'll need to import observable from rxjs and of course import our shopping item and set the value of our shopping items equal to that store selection once again to make this quick or I'm gonna import from developer school the HTML and that should allow us to of course display those shopping items on screen so let's make this a little bigger like so and now we can see the shopping list so we're using the ear sync pipe to automatically subscribe to this observable and if at this point you're thinking how on earth has this a diet coke appeared on screen I don't really understand how this works well let's just take a quick look back so right now we have this add item and this add item action which currently hasn't been used too so don't worry about that instead we're inside of the shopping reducer and we've decided to say hey this initial state contains this diet coke and I can even change this to be something different let's change this to be fun sir and hit the Save button and then we can see we have a frontal we can also add another item to the initial State give this a different ID at this time I say Diet Coke and then we should have both items here on screen so this is because we have this shopping reducer which takes in the state equal to the initial state and because we haven't given any action at all it's just returned us at this state so the next thing to do is of course add a new shopping item that's the fun part so back over to our app component then and inside of here we want to add a new function and that's called add item in add item is called with dispatch and action to the store so we can set this don't store don't dispatch and as you can see here this takes an action will say new add item action so we'll need to import that from our shopping actions and then as we know our add item I shouldn't expect so one payload and that payload is of course a shopping item so that's for now say ID of 1 2 3 and the name of dr. pepper and the inside of ng on a net we can then maybe use the set timeout just to see this here on screen we'll make that call back after 2 seconds so what's going to happen as the shopping list is gonna have two items then it's gonna add this new item after two seconds so let's watch this fun - that died coke and then dr. pepper so what has happened here okay so we've added and dispatched this new add item action with the payload of this new shopping item this has been passed down of course firstly we have this action which describes our item our reducer has picked up at this action it's matched at this switch kiss equal to the shopping action types don't add item it's then returned us the previous state which is the Fanta and die coke but this time with the action payload no birds but now I wanted the ability to of course change this up and add an item from the UI that's like it how we can do that so what we want to do is add a new shopping item that's gonna be a type of shopping item and will give us some initial ID and name and then angular comes by default with a dependency on UUID so we can import UUID without needing to installer inside of our project and then inside of our add item we can see this don't new shopping item don't ID is equal to the UUID we can then add dispatch the new shopping item itself like so and then after the item has been added we can set this back to being yeah ID of blank a name of blank so that's the add item functionality of course it doesn't actually have a name so it won't appear inside of the shop and lest we instead need to add this inside of our UI once again I'm going to copy this from developer school and we are gonna add this underneath our div well is simply a form like this which has a text and ng-model a placeholder and of course the form name when somebody hits the + button or the enter it calls the add item function and that function dispatches the action to the store and so on so inside of our app component we can remove that set timeout now because we have for the UI to add that to the list then it let's add a new item such as dr. pepper hit enter and we can see dr. pepper inside of the shopping list once again when we hit that + button were firing this add item action has the payload of the new shopping item inside of our reducer its then seeing the suction it's saying is this an action type of shopping action type start action if it is of course it adds that to the end of our states and returns a new version then inside of our component because we're subscribed to this slice of state inside of our shopping items here and updates our dump with the new items this shopping items observable array then has instead of two items and now has three so I have a challenge for you at this point if you've been watching so far and you truly are trying to learn ng rx store go ahead now and try and add the ability to remove an item by ID so we have everything we need at this point we need a new shopping action to represent that deleted item we'd also need and you reduce a statement or reduce a case to represent the deleted item and the ability to click on an item inside of the list item here or however you want to implement that so if you can go ahead and try and implement that will be great if you don't want to that's fine just simply continue watching the video and I'll show you the answer to this so let's start inside our shopping items we'll have a delete item equal to shopping delete item and we'll export a new class called delete item action and that will implements action the read-only type for this will be equal to the shopping actually types delete item we then have a constructor which has a public payload of string so payload at this point is going to be the ID of course and that's going to be of type string final thing we want to do is update our shopping action and say that I can either be an add action or it can be a delete item motion and so everything we need to do for our shopping actions let's move now to our shopping reducer so we have a case of shopping action types don't delete item we want to return its dead stop filter that filters our stats we'll check each item to see whether the item ID matches the actions payload and that's going to allow us to remove the item if we don't actually want that inside of the list now that we've done that we can head over to app component ES and underneath our ID item we can have a delete item that's gonna have an ID of string we can use the this don't store don't dispatch we can dispatch and you delete item action we can pass through the ID as a payload finally inside of our app components we want to add a click event to the Li which will said delete item and we'll pass in the shopping don't ID so once we said delete item shopping don't ID that's gonna be the ID of whatever we select and when we select an item it should remove from the list not too bad we now have a pretty fancy addition and deletion a shopping list what's next what wouldn't it be great if we could see and visualize our state changes without needing to build out this UI sure each time but we added something inside of here we could also say console.log adding item or maybe even just log out the action type like so and that would work because we'd be able to say that we've added an item and we can even see this in action by adding it to both things and then inside of our console if we click something we can see we have shopping delete item delete item once more we could also add the action dot payload on both accounts so then when we hit fanta we can see that we deleted this item ID same with the diet coke at Sarah so that's alright but it could be much better so what we can actually do here is take advantage of the redux extension so we can see the redux extension here that I have for Chrome and you can find this once again I were to Cutler links over at the developer school article for Chrome or Firefox or whatever else you use once again if you just check out the article you'll be able to find a link for that but um let's look at how we can add this to our application because although we have the Redux sort of dev tools extension it doesn't work out the box with ng rx so once again angular gives us the ability to automatically add this and because it's just such an easy addition it might be easier to use the angular sealion and look at how this has achieved that rather than do it manually like we did with ngranek store so let's run ng add ng rx store dev tools this is going to go ahead and run npm install as you can see right now it's then going to update our app don't module don TS as well as update our package don't JSON and already you can see that my Redux dev tools is updated with new functionality but before we look at that I want to go over to of course the app module TS and you can see that it's done this thing here store dev tools module dot instrument max age 25 essentially we want 25 state changes and we can see here that was importing the store dev tools module from ngrick store - dev tools so if you want to add this yourself you can either run the NPM install or you can just use the ng add so let's look at this right now we have an inspector and that inspector says that the ngrick store was initialized we have this state and we have the action for now let's have a look at the state and on the tree we can see we have two items inside of our shopping item the first one is fonta the second one is Diet Coke if we add an item that's a dr. pepper and then hit enter we can see the inspector said shopping add item and if we select that we can see we now have the third item here find that Diet Coke and then we have dr. pepper with us a new ID we can look at the action as well as the action payload we can also look at the difference between the states so the diff is of course this new item here and we can even now delete an item we can see that's been deleted and if we're doing everything it gives us the ability to step back in time so if we click this arrow we can see that we are stepping back in time if the state changes within our application we can also go all the way to the back and hit play and this will play through all of the different actions so the redux and ngrick store dev tools is definitely worth adding to your nginx applications I hope you can find and hope you can see just how important it's sort of answered to an application like users and grx it gives us the ability to dive into our states to look at our actions and you can imagine that debugging an application is so much easier than console logging everything inside of a reducer or even creating what's known as a meta reducer to log everything etc but these store dev tool modules gives us the ability to go backwards and forwards and much more so in summary we looked at how to add ngrick store to a new project we made a small shopping list application here we liked it how to of course at different actions how to create a reducer as well as looking at the NGO axis toward dev tools to investigate each item as it was added or deleted from the list so nginx itself is quite large in understanding the different concepts of how everything works we haven't looked at the router store yet we haven't looked at a and much more but they should get you on your feet in locking at sort of synchronous things that aren't lucky ATP servers or anything like that just data that of course is synchronous to the client if you'd like to see more energy rx content let me know outside of the comments section below if you don't want to see on grx but you want to see something else of course let me know what you think thanks a lot for watching don't forget to check out the article version of this video and much more over at developer don't school I'd also really appreciate it if you hit that subscribe button to stay updated with more videos that I create thanks a lot

Channel: developer.school

Views: 49,749

Keywords: ngrx store, @ngrx store, @ngrx/store, ngrx how to use, using ngrx, ngrx devtools, ngrx, ngrx store tutorial, ngrx tutorial, angular ngrx tutorial, angular ngrx course, angular ngrx store, ngrx store angular, angular, angular tutorial

Id: KZkRGm1xC_I

Length: 31min 1sec (1861 seconds)

Published: Fri May 24 2019