Deep Dive into Angular statemanagement with NGRX

for is are we live yes is it better now yes no let's see let's see let me check the stream also guys if it is good now is it good nice okay if it is is good then maybe let me just put up a voice is good thanks thanks thanks for that confirmation let me just put the chat on the left hand side I don't know what was the tissue let screen is off I need to see a chat window just give me one moment okay okay okay thanks let me know if there is anything bad again okay I see people are joining in again I'm so sorry guys apologies please I need to see a chat window just give me one moment okay okay okay thanks let me know if there is anything okay bad again okay I see people are joining in again let's wait for the another I'm so sorry guys apologies one two seconds and then maybe we can proceed I need to see a chat give a thumbs up if you guys think that stream is good let me know if there is anything okay bad again all nice I don't know what was the let's see let see people are joining in again okay then let's wait for and six of us nowb for know if there is anything okay let's see let's see let's start things of I don't know what was let's see today's session I want to focus today like you remember last time we have did something about the angular State Management okay and the State Management only very small counter application I know that's a very small application what we will do right based on all those knowledge and only based all those [Laughter] knowled uh what about now I don't know I don't know what why it takes let me know now H I think first thing I need to start a course on how to go live on YouTube I think I should do that first yes let's see let's see oh I got the problem that what is the issue okay okay okay guys I'll give you one trick if you're going on live never open up your Chrome browser on the left and if you're opening it then always mute that video that's it nice I learned something see learning is everywhere okay all right okay so let me run this application what we have created last time so let's do NG serve let it get buil this is uh we have angular version 7 in so the build will be quite faster as I told in the video also okay so this is what my screen is and that's what it is increment decrement reset and all of this okay so this is what the project was all about what we have created last time now what we will do right so now we'll have to plan uh our add to Card application and to create that right what we need first of all we have to create something called as some product list okay so as okay maybe let me also open up my a screen where I can show you how I will be doing it so maybe I can draw something and maybe I can explain it to you so that will be better okay let me click this start now maybe you guys can see it yes okay so this is what we did last time right so we were uh discussing about the ngrx store how the store works and all that so you remember right how the life cycle was that there should be some action okay then reducer then store then selector will take data from store and it will give it to the component correct So based on this right uh what we will do right we'll try to uh understand why this life cycle actually works like this okay with an with a one level extra what we did last time it was just a counter application but let's see with an add to card related application okay let me do this and um also let me do this okay I'm just setting up my chat so that I can view no doubt right last time whatever we have learned I'm just looking at the chat now okay good good good nice nice okay so if you remember right so we have created all those things so now first let's go ahead and create our component okay where we have to display everything okay to create a component again everybody knows now like how to create component in angular so the command is NG G for Generate C for component and we'll give the name as products okay products component all right so now okay V know said I have a doubt uh know once we we are done with the screen of the product list then we will take all the doubts whatever we have so we'll go part by part like once product is done we'll take a doubts if you have then we'll go with the action then we reducer selector and all that okay so our product page is ready and now we have to do an API call okay so for doing getting the product I will be making use of uh fake store fake store API one of the best to demonstrate any example so I will be using this endpoint to fetch all the list of product okay so now in the product component we'll have to do the API call okay to do the API call okay so now we are into uh what do we say angular 17 so now we have stand alone we have our own configs and all that so to do the API call in previous angular versions we used to do import HTTP client module correct but now with this new right with the new way of developing things now we have to import the provide Okay so so now we have this providers array inside that you have to provide your HTTP client okay so once you provide HTTP client and then you will be able to do API call so there is something called as provide HTTP client okay and once I have this HTTP client I'll show you one uh one of the like famous warning nowadays like people are getting if they are using angular version 17 server side rendering cuz this application is SSR what we have here okay so if I save the changes so we might get some warning that if you are doing HTTP call and all that so let's do the API call now like we are able to now we are allowed to do HTTP call because we have added the provide HTTP client okay now what we need so if you guys remember I have made a video on Instagram that uh declarative and imperative programming so I will be following as much possible how to do declarative programming so let's first get all the products okay products will be of type of observable and I can say that I can say that to do the HTTP call I need to get HTTP client so to get the HTTP client we make use of this inject function import your HTTP client and that's it now what you can do you can directly do the HTTP call so you can say this do http.get okay and inside this get just pass in your url okay so this is how the URL looks like and now if you over on this right so what you get because we are directly doing a HTTP call which returns an observable okay and if you guys are using observable please give your startup project file okay uh I think this is already available uh shf it is already available on GitHub you can just search for ngrx store YT on my GitHub profile so you will get this okay all right so now we are doing this HTTP call so this is how we did so now this is an observable if you remember if if you are a good angular developer then you should always do subscribe and unsubscribe if you are subscribing something then you should do unsubscribe in NG on Destroy okay so but you know right we are not following imperative everywhere so we'll try to focus on declarative so I know that this is an observable okay so to use an observable I can make use of async pipe directly so okay I can make use of Asing pipe and now in the product list if I want to display all the list of product so let's take an example I have UL I have Li okay and now if you remember previously we used to do ng4 remember something like this NG container inside that I have Li and here I will do star ng4 yes or no in this ng4 you have what products so you'll put product like this and you make use of async pipe yes or no and to use okay let me import something here so that I can use everything uh common module see it's up to you if you import common module then you can uh use uh the NG style NG class and all that so you don't need to import them single single so either if you don't have this then you can just directly do like this okay you can import NG form like ng4 sorry if you if you are using it okay now let item of products now it says that object can be null and it can possibly a null right so that's what it it complains okay so to get rid of that you can either add exclamation or something like that let me just check H is an itable of null okay so for that what I need to do right I need to specify a type so I have to tell it explicitly that this is an observable of an array okay so once I specify it okay it was in typescript error so it doesn't with typescript 5.0 you need to be more specific whenever you are defining any variables okay so type is very important okay let's save the changes let's save the changes and now if you go here so now there is no complaint anymore now you can iterate the items now if I say item dot I don't know what is how the API looks like so let me go and do the API call here you can directly go and fetch go to okay so I have a title so I want to render the title so I'll say item Dot item do title save the changes okay so now I have this product page and what I can do I can go in this HTML okay I have this footer and just below this if I want to add the selector right I have to import my component because we all are using Standalone components so product is our Standalone component so that has to be imported here so what is that products component okay and now you can use the selector somewhere here and say app products okay I know guys I'm very going very slow if you feel slow then do let me know we can speed this up up to you up to you okay now it complains I don't know what it complaints let's save the changes again with this server side it takes time to detect okay now let's go back and let's go here H I have okay it was visible but I need to change some Styles so let me do that so we are using Tailwind so I can say text white I want to make this color white that's it okay so I should be able to get all the list of product can you see so I did an API call okay and in this NG container I can display all the titles okay and this is what the famous error I was telling about like now whenever you are using server side rendering and if you're doing HTTP call like this what I did then you must must you must import something very important or I would say you should provide it in the provider like provide HTTP client that okay if it's because this is server side rendering so you have to say with fetch okay once you add this with Fetch and now this warning will be gone okay and this is only applicable to server side Pages like if you created application in which is a server side then only you need to do this guy okay save the changes and now there will be no warning I promise see no warning okay so HTTP call is done and I am able to uh like view this all the list of product I need to create a card component okay so to create a card component I will make use of again um I have this uh what is that let me just check in my yes one of the base component yeah so now I need to do this uh create some card or something like that see whatever I will be doing I will be doing in front of you so that nothing is hidden okay how to create card component suppose if I'm working on a new project how do I start okay what how I do Google also like what kind of Google I should do to get my job done and something like that okay so now I can see both of the component is visible on the same page which I don't want I need to configure the routing let's see how do we configure the routing in version 17 of angular okay so now we have this app routes it's still the same but to specify something like path yes and can give a path name as if it is counter application then counter and you should say load children and in the load children what you need to do you need to import your Standalone component so specify the path where is it product/ uh my bad it should be counter counter SL C counter component okay now if you see right now this returns a promise so to Let's fulfill The Promise by saying do then and now I can say that okay a do my component name which is my counter component okay and in this way I have loaded my first route like whenever my routing is like my path is on counter I should load this component which is my uh Standalone component okay so this will be in a chunks okay in the same way I I will be doing for the product easy peasy right so just go here and put up your products product or product whatever you want uh change the path change the path to product slash product component and this will change to product a do product component that's it so now the route is configured so what are your expectation will this work now will this work yes or no tell me I will be covering up all the questions mom see I can see you have asked what is server side rendering I I'll explain you that but uh any doubt question for this and what do you think will this work say yes or no will this work if I go in the browser will I see counter page and product [Applause] page if I say your counter will this work yes or no yes or no h it didn't work see it is not working and I'm getting some errors why because your routing is done you have configured your route but you need to call them you need to call them like you need to call your container which is your router Outlet so what I will do I will add my router Outlet here save the changes so compile should be success and now I can see the route is empty now if I say that I want to go on products I should be able to see it but I'm not able to see because I did a mistake H let's see what is the error we'll try to fix the error okay there is some error which says that expected n actual okay this is because of the save probably because of the save let's see okay let's go back let's add a default route also if my path is blank then please redirect redirect to product okay this should match H this should match whenever you are redirecting this should match okay and then you have to specify that the path match should be full that it should match your exact path which is products okay save the changes there is some some error here let's see what is that error so so it says that please reload to client application bundle blah blah blah don't no no no let's go here and see I don't know what is that error let's see so we have this Asing pipe HTTP call looks perfect don't know what is the error assertion of NG module products component is not a subtype of NG module type h that's strange it's saying it is not of type NG module type but this is a stand alone that's correct we have a import okay let's see let's see I have it in the Imports array also which is Imports okay let's remove both of them okay now it still complains I don't know why I haven't I don't know this let me just figure out what can be this issue M okay refresh it after refreshing it says the product component is not not a sub type maybe something wrong in the routing okay so this ISS that okay who can tell me what is the mistake you guys are not helping me guys come on help me who can tell me what is the mistake here I saw the mistake I know it happens when you do live coding it happens who can tell me what is mistake in this page come on come on I want you guys to type in the chat what do you think what is the mistake here who can tell me let me check my okay I need to switch on my AC okay who can tell me what is the mistake anyone would like to try Okay the mistake is that this should be load component okay this should be load component because we are not loading childrens we are loading the actual component [Applause] okay save the changes so one mistake is resolved okay let's see let's see oh still it breaks let me just do NG sub again and let's check if still we have that issue but this was a mistake this should be load component rather than saying load children okay can you see fixed issue is fixed so that's what so that was the issue okay import instead of component h k said no the mistake was load children because we should not do uh load comp like we should not load children here because this is not the child routes we are loading the actual module which is my component now so I should say load component rather than load children okay clear clear so do not do such kind of mistake okay so now I have this product page and now I want to design the card okay so I will not waste my time I'll just go cards template Tailwind CSS maybe let's go Tailwind CSS there should be some card Let's see we have if we get some good card we'll make use of it h this looks okay to me let's use this template what do you what do you guys say let's use this template yeah let's use this template okay and let's go here and okay again this is not a good practice so I should always go and create a uh shared component folder right so shared inside that I should have the components okay so to create a components what you will say components slash uh what component you want to create product component okay rather than doing me like this I have a trick what is that trick the trick is that I make use of this generate component I don't know what is this um I have downloaded some extension from vs code I don't know which one is exactly it is but I'll share my all the list of uh extension what I use so you guys can get it all so generate component you can give the component name as product card okay and this should create the product card component inside the shared folder yes shared folder SL component SL product card and inside this there is only one problem with this selector this is not still mature I can say that it still takes the old way of creating component so you need to specify your own Standalone true okay and you need to specify your own Imports something like that so that's the only drawback with this I don't know when they will update this but that's how it is at the moment so now that's what my product card component is and now over here I can paste where is that okay so I can paste my code okay now let's go in your product component here now I will import the product card product card component go in the HTML and okay let me Comm in this for now what I will do I'll go here and save app product card save the changes now on the product list I should be getting a single page yes that's correct let's style it a bit The Styling is all bad let me change the styling here Max width what I need to change if I change this to text white let's see how will it react okay all the that color become white and then BG okay let me keep it like that and let's make the background white rather than text okay I save the changes it should reflect let's see yep so that's what my card look like okay now what we will do right now we have to add the images here so now currently we have all static correct so what I will do right this card is nothing but my it is inside a shared okay and this will act as my child component now because why child component I am using the selector of child inside the parent which is my product okay so this becomes child okay app product card becomes child and product. component becomes your parent so now I want to pass a data from a parent component to a child component okay so to do that what you need you need first of all an input so that this input will receive the data so input and in the input you will say that I want to accept something called as product or you will say a single product product okay I'm saying it as type any but maybe you can uh also do one thing okay let me just do one thing first here let me see it as any and later I will specify all the types how the type should be okay so input of type any you should not use any guys if you're working in your project you should not use any okay now so I have this input which is my child and this guy will receive input from the parent so I'll go in the parent I can specify like here product and this guy need a single single product so what you can do right you remember we are doing the ng4 and all that NG container and all this correct see rather than doing this ng4 why am I doing that now we have a latest feature of your angular the control flow okay so in that now you can directly make use of at theate for Loop okay something and this is quite performant because this has a track by function by default which tracks your changes the single single change so whenever you are updating one line it will not update your whole tree it will only update the single single uh what we say that uh the component what what has been tracked okay so now here what I'll do I'll just make this as products and again make use of a sync pipe so that I don't need to do unsubscribe manually and in this right I will just try to Loop this whole inside this okay app product card and inside this I will pass the single item which is my product save the changes okay save the changes and now let's go back H can you guys see I should remove this now I don't require this anymore so now this is how my page looks like at the moment so I can see all my cards okay let me also remove the footer because I don't want to focus how to make your footer where it belongs let me remove it at the moment okay so now I'm able to render a lot of cards I know which which are having the same data correct which are having the same data which I don't want so let me make this card a dynamic card so for that what I will do I will go in the child. HTML over here what I can do I can do the string interpolation I say blog sorry it was product dot title save the changes and let's see now if you see that I will be able to see and now I'm able to render all the cards see all the cards which are having a different title in the same way I can do for the images so I'll go in the SRC I have something in the API okay okay I'm not doing any rocket science Shashi how do you know that it it will be like it will show like that so if you go here in the freix store API if you copy the single object I don't know till where it is till where it is okay ratings and all yeah till here okay copy this go inside Json tot this and inside this you can just paste this to get the actual object okay so can you see now I have my type ready okay so I can copy this I will go in the products maybe let's go in the Shar only in the Shar I will create one file called as models okay models and in this I will create a file okay I hope no one has question okay I will create a file called as product do interface. DS and let me paste it here so this will be my i product if you're creating interface always make use of prefix which is i i product and I know I'm yeah it should be like this and this is the rating just below okay so this is your ey product now what you can do your card can have a type now so rather than saying any you can create a type which is i product save the changes save the changes here as well okay now this has a type and now what we'll do we'll go in the products here here also we can specify the type which is i product of an array because this is a list of products okay save the changes now what you can do right because of this type now you can do a lot of things for example you can see that now I have a product if I press dot I able to get the intellisense like okay are you looking for ID image so I don't need to go every time okay should I type so if I make a mistake like this right see straight I'll get an error in the compile time at in the compile time okay so this is product. images save the changes and I don't know how it will react let's see okay I have all this images okay I still The Styling is spending guys don't worry but let me put up all these things in place okay also for the description uh I'll make use of string interpolation product product dot product dot description do substring why I'm saying substring because okay let me show you the problem first then I'll give you solution okay if I you just go and watch the description how it looks like okay so see so much big big description which I don't need which I don't need I want to make all of them constant like okay they should not increase more than 120 wordss or something like that so I can say dot substring and I can say start okay from where you want to start and from where you want to end so 0 comma 100 it will limit your see the description got limited so now everyone have the same and also if you like to like give anything like for example after that particular character you want to say dot dot dot so that's what it will show the ellipses the three dots okay now that's what we have at the moment now I need to design the buttons so let me just check how can I do that so currently it is all this is all incorrect right so I have to make use of uh the CSS or Tailwind class so that it should be aligned okay so just above this I will create a div okay and in this I will say a class this is of type grid and saying grid coal of okay I need to say grid coal of three or maybe four I don't know based on my screen grid call of three okay and I'll give a gap between each as five okay now what I need to do just take this for Loop and put inside this grid which you have created save the changes and now use see you have a good looking card in front of you the only problem is the images they are lot they're not quite stable okay so what you can do right you can specify a width to your image going in the product card so just change at one place and you see that it is reflecting everywhere so that's the beauty of this shared components okay now I'll go in the image width full okay I don't know what to do here okay but let me just give width as 200 I don't know how will it how will it react okay so width of 200 but it still didn't take let me remove this with full because this gives 100% width okay much much better and also what I can do um I can change this if I say coals of four right I will get four products see this is much better okay much much much better now ALS also what I'll need to do I'll need to make them Center so for making them Center let's go again in the image there should be something called as I don't know let me check text okay I can tell it as a flex justify [Applause] Center okay let's see if that works didn't worked so what I'll do I'll say it as a block I don't know man there is a way to by which we can do and I can say MX Auto there are two three ways by which you can Center a uh I'm just trying which will work see done okay so that's how you make things Center okay and if it is an image you can make them Center by this so make this block and put it in the center now what I need right I have to also get the two buttons like add to cart remember if I click add I it should go to the cart item something like that so to create that button let me again okay let me uh I think I'm I don't want to waste much time so what I'll do I'll just take some of my code Snippets and uh yeah maybe we can do things faster then okay so this is the currency description I don't know okay let's take these two buttons okay let's go here this is my D for inline block so just below this paste it currency okay let me import some currency pipe cuz to use it rather again do common module okay let's import the common module and there should be no errors and this add I will add later so currently this click should not have anything okay save the changes save the changes and let's see how it looks uh I know there will be some errors save it save it here as well okay no changes anymore and compile success so that's what I have added uh see I did nothing I just added two buttons just two basic button okay type is button and I just added this bunch of class okay this is all coming from your Tailwind you can get any of this uh template from online so no need to make everything by your own make use of Internet also to do things fast always use internet okay so now I can see that my button is ready okay so I'm first focusing on the U and then later I can I can do that still we haven't started ngrx I'm so sorry still we haven't started ngx first I need to do all these things basic things okay save the changes and now things are ready okay the things are ready I can see lot of things here now whenever I click on this add to cart right I want to create here a component called as cart okay and that will update and that will update your value here like if you add one item in the card that's what you can do here okay so for that again let me go ahead in the page okay over here and create a new component uh this will be my card component okay so card component is there and let me also add the routing for it so let's add the routing copy this completely paste it below this will be cut card slash card component and this will change to card component okay so this is what it is so now the cart is also ready now the routing will also work now what I'll do right if you go on the top of the header this is what it is right the home let me change this to cart okay let me change it to cart okay and currently let me oh you remember right I have I was displaying for the counter application so this is what it is so let me change this to Zer okay at the moment and now I will add the router link so to add the router link again go here we need to import router link I don't know if you guys have already familiar with the angular version 17 if not then do let me know in the comment uh in the chat that you need a new changes what are the new changes in Anger version 17 so I can take up that as a separate video but to use the router link right so I have to import it first and then only I can use router link and this should go to card okay save the save the changes let's save all the changes and let's go back here now if I click on this cart I should be going to see cart works okay let me make it big so that or you say it's so small not able to see cart Works see if you using tailin CSS right and your expectation is that if I say H1 it will give you something like big text no no because whenever you use Tailwind R it inherits all your existing CSS of your HTML and it replaces with all as a base okay so you need to always specify your own class to make it look like H1 so you can say text 3XL and you can give a text color to it which is white okay now it will be like a big okay big text as in a white color cart works okay now we are able to do routing also now now I can say that now let's start building the ngrx or you guys want me to uh like make this page also so I can do that also if you want up to you or should I start I think I should start now it's fine we can design it later in the next video if you want okay now let's see some of the chats if you have any questions V said I have a doubt uh last time we statically settled initial value right how can we dynamically set I didn't get this question to be honest statically settled initial value means what like H I think you're asking about how to add the Dynamics of the Redux I guess I'm just assuming I don't know can you just specify it like little clear like more clear let's see can you please explain what is servers side rendering okay so okay I can explain that I can explain that so what is right so now we have two types of rendering so one which always on the client side okay if you create an any angular application uh okay let me give an example of my blog which I have created very long back now so if you see this application right okay so this is a client side like whatever I'm doing right it is everything is on the client side okay you are creating the component everything like you create a normal component and everything gets rendered in the client itself but let me show show you with this one okay where where we have this angular material bootst whatever we have so this is an SSR right if you inspect element okay if you inspect an element if you go in the network tab okay go in this all if I refresh the page so can you see currently I'm on the product page yes or no but see my contents my contents are getting rendered on server side okay it is not in my client it is on the server if I open up this right if I show you the preview can you see the header angular ngrx store which is this the card button see I had a button all of this if you go in the response you can see that server is actually sending me a complete HTML okay and what is job of angular here angular takes that HTML and it just displayed on the UI so that's what it is so if you see right there is a network call happening okay so this is a network call which is patching all the product page if I show you right if I click on this cart if I click on this this cart right so this is also is kind of a server site if I refresh right so can you see on the top there is a cart okay if I go to the preview can you see a cart component also have a header on the top so it has the header title the button and the heading which is cart works okay if you see right this cart works is quite bigger than this one yes or no because my style is getting applied on the on the client itself okay server is only storing all the metadata of the HTML but all the stylings are getting applied in the in the component itself in the client side itself okay I hope that is clear okay I hope that was clear yes or no just say yes yes yes okay now the note says that uh export cons initial counters to yes yes yes that's what the agenda of today's session is like I will be telling you that how can we handle those data dynamically okay let's see that let's see that in action uh I will Design this card page later I design this card page later okay now first thing what I need to do whenever I'm starting with a ngrx so as I told you right there are few things which is very important in ngrx and that is me open take up my pen and show it to you okay so as you know right in ngrx we have already talked about all of this so whenever you want to start with ngrx first thing you need to focus on creation of this actions so first I want to create action okay so first step is to create the action okay to create the action let's go how how do we do that let me go back to the I don't know how do I do this okay let's exit this full screen yes now we have to go and create that so I will be doing something like this in the app States I have this counter I will create one more folder whose name is okay do you guys know how to create a file like rather than creating this folder and then one more file what you can do right you can just click on this creation of the file you can give the name of your folder which is um I should create cart cart slash you want to create action for cart so cart. action. PS see the folder got also created the folder is also created so now to create the action right so there are two things okay there are two things like what kind of action you want to do so if if you have a card page so you want to add a product Okay add a product to the card so what is your action name your action is ADD okay so you will be adding the product let me just take uh yep somewhere like this y so what I will do I will just say import okay import from I have ngrx already installed ngrx SL store okay I want to create action so create an action okay what okay what I'll do right rather than doing all this manually I can copy paste okay I'll do this fast so now I have a create action now I don't want to do increment so this was for the previous example increment now I want to do add to cart add to cart which is my inaction okay whenever I want to perform an action for which component I want to perform I want to perform for card component what is the action name the action name is add to card and this should be unique guys this should be unique currently right when you want to add a item to card you should have an item with you correct so which means you want to pass a property yes or no whenever you want to say add to card you're taking a property and you're sending it to the to that particular store what I will do right I will just say okay if you want to pass a store so there is something called as props okay there is something called as props is nothing but your property inside this you want to pass what you want to pass a single product so that you can add one by one what is the type of this product is of of type i product okay and in this way I can say that my add to cart is done like my add to cart action is done so I created one action which is add to card okay now if you have a action right so you must create a so every action has a reducer remember that image so we need to create a reducer now so to create reducer let's say cart do reducer PS okay again I can do one thing I can take from this existing reducer okay copy this card reducer paste it here no need of this now what I need to do right in reducer I first need to initialize my state okay let's give a state name here as cart State okay cart State okay what we'll have in my state I will be holding some value right in my cart what kind of value it will be it will be a product value okay it will be a product value okay products value which is of type i product because I want to store into some array right so this is what my array is okay and I can change this to card State and this will also change to products and I need to initialize my state so this is what how I initialize my initial state of the application okay so now I want to create a new reducer so I will not say counter reducer I will say cart reducer I want to create a card reducer okay and I'll make use of this create reducer method which is coming from ngrx Tool okay now the initial state state is initialized now what you need to do right what you have to do that whenever there is an action a reducer will come in picture so let's perform an action so who will listen the action if you guys have uh like worked with websockets uh where we create some live chat application or if you must have seen my signal R video so over there also I have taught you about this that uh how to how the what do we say the angular handles the action so there is something called as on there is something similar in ngx also we make use of this on and in this on right we have to specify which action I want to listen so I want to say add to cart action Okay add to cart action okay so whenever there is an action add two card what I want to do okay so you need to specify your reducer now so to specify the reducer right so what you will do you will perform that action at two card and whenever I say bracket right see what you will see you will see some on reducer what you need to change so once you put up your backet you will have two things you will have a state okay and you will have the like method to add okay so what I will do right I will add my state here so state is nothing but my previous state okay and inside that I can destructure it okay I can destructure it that I need to pass my property properties so I have a existing state and I have a property to pass which is my product okay so this should be my product let me just check product okay my single product okay now what I can do I can return this so now I can say I can return return few things over here okay so I have a state I have a product and now again I have to return few things after an action okay anyone have any doubt guys let me know in the chat I'm watching the chat also anyone has any question Momi deleted a chat wow why if you want to ask me you can ask me okay yes no if you have any doubt question let me know in the chat okay so now I have this state and product what I need to do right I need to uh what do we say manipulate a data so what I will do right I'll say const const update updated product okay updated product and inside that I will perform a logic that what I will do right I have a existing state which is my state do product yes or no the thing is this is an array right I need to destructure it just started sir okay okay so what I need to do I need to destructure it okay I will have to destructure this existing array and what I will do right okay you have an existing array can you please add my new object inside that okay so this is what this guy will do so this will say that herey you want to add add a product to the card okay you add it like this and you will update your existing product so now what I need to do I need to return it okay so how do I return I'll say Okay pass the existing state okay pass the existing state restructure this product and pass in your new state inside that which is my updated product okay which is my updated product and now right once I can pass this product I don't know why is it still throwing error it should okay this should be my products no no no no no let me just check it I have to perform an action I don't know okay they should not throw error contr shift F okay we'll see that what is that issue okay so now we have this state and we are passing this product let me just check why is this uh still an error okay so I have created a props already so where is my props so this is what the props is okay see guys uh again small mistake because I'm live I know this thing will happen for sure okay so the props that's how you have declared right but this is not correct you need to also say that it's in kind of a method okay props is a method which has a type which you specify the type okay now if you go here in the reducer it should be okay okay so now that's what your props is now you're able to pass your props and let's save the changes save the changes okay now your reducer is ready okay so now your reducer is ready to take a action and the action is add to cut now if the action is ready right so now what I need to do I need to perform some some more operations for example I want to do increment I want to do decrement yes or no so what I can do I can create some more actions let me copy this action and paste it here so the first action is add to cut second action will be increment product okay I can change it to increment product same for this one as well that this is at two card I can change this to decrement decrement product all I can do is I can change this also to decrement so this is very important now this should should be unique guys this key should be unique and that's what now I have two more actions if I have action then I should have a reducer let's create a reducer now so I what I'll do right on this on so I can create one more on okay so this on will be for the next action to listen Okay what I want to listen on I want to listen for a new action which is increment product okay increment product and based on that again what I have I have state right h chat looks good okay so based on that I have state right again State okay and now you have your again the structured item which you want to increment the thing is Right whenever you want to do increment you should not pass the whole if you want to increment just pass the product ID correct so what I will do right in this property I will change this to change this to product ID of type number same thing for the decrement I have I have to pass a property called as product ID which is of type number save the changes now here if you see right if I restructure this I will be able to get product ID okay I will be able to get the product ID as my props okay product ID now this is something similar what I have to do okay so over here right what I will do again this will say return return a new state so which you can specify the state okay and this is your product ID which is coming from your props now again what you need to do right you have to specify a logic so you have a new product again I'll say const updated product maybe I can copy this whole okay now I don't I want to update my product existing product yes or no so I'm not passing a new product I'm updating an existing product like suppose if I have a card quantity as one if I say increment product which means I want to add a add more quantity yes or no so I have to manipulate my existing product so what I will do right I will say that dot dot dot State oh sorry this is state state DOT products okay so you have a product existing product in the store do filter sorry not filter you have to do map so what you you want to create a new array right so you have to say map and inside the map right what you need to do you have to specify what you want to change yes or no what you want to change that so what you can do you can take your value you can take your value which is product and inside that you will say that if my product do ID is equal to equal to okay if it is equal to equal to what your existing ID what you're sending okay existing ID what you sending if they both are same okay if it is matching that product right so so what I can do I can add a tary operator what I will do if it is matching so what I should do I should say that okay product dot quantity okay product do quantity or I think there is no quantity yet so I I have to add it okay I'll add it later so but that's what you need to do right you need to that you have something like quantity and this quantity you need to say Plus+ or something like that okay if product match then do this or or else or else do nothing and send the product itself so this is what you need to do that this is what you need to do that um hello sir it looks like the read react dispatch hooks it's new in angular no it is not new in angular it is all this was already there back then in 201819 when ngrx was there so the fundamental is still the same it still follows the reducer pattern okay so that's why it still looks similar okay now this is is throwing error because I don't have product interface let me add a quantity of type number okay now it should be okay all right all right all right all right all right now this is the reducer what we are trying to focus on but you know right if you check your API if you check your API there should not be any uh what do we say quantity see there is no quantity so I need to add a quantity explicitly okay so how can I add that do you know do you know there is a way to do that who knows that there is a way how can I add a quantity on the Fly let me see in the chat who is able to answer it how can I add a quantity like I want to add right so for example um I want to add a new extra element in an existing observable in existing stream how can I do that let's see in the chat who can answer let's see let's see let's see nobody come on guys can anyone no okay anyone would like to try nobody would like to try okay it's fine so what I'll do right okay let me just show let me show a way so I will create a service in my shared okay I'll will create a service inside my shared okay you not say no idea it's fine fine I'll create a Services folder and in this I will create a service let's generate a service and the service name is product API service okay a very random name I give now what this product API will do right this will be responsible for doing the API call so HTTP so for doing the HTTP I'll do HTTP inject HTTP client okay now I will create a method here the method name is get products so inside this get products right you have to manipulate the data how will you do you will say return this do till here everybody will know I know that http.get uh get will give you I product of any array so till here everybody knows that I will be taking uh HTTP what we say the URL let me take that and put it here okay everybody knows still here correct but if I want to add an extra quantity which is not existing in my existing API like existing data to do that right I can use something called as pipe so use a pipe operator and sorry pipe and inside that use a map operator so let's use a map which is coming from rxjs see on the top I have imported it so now what I will do right in this map this map accepts a call back where you can pass your product you can pass your products okay so what this products will do right so this product will take your data and it will map it accordingly okay it will map that data accordingly so for example here over here okay so what I want to do I want to return the product but I want to add extra something extra inside that so I'll say return products dot map so this is Javascript map this map is rxjs this map is Javascript so in this new map what I will say I will take a single product okay I can take now single product and inside that right this will return what this will return this will return an destructured way of data set like for example like this I have existing product okay but inside that add something called as quantity and give the value as one okay give the value as one okay so now this is my API N1 what I have created for get products save the changes let me show you a magic now if I go in the products okay over here let me implement the interface okay implement the interface on in it okay always make sure that this is below the Declaration okay now what I will do uh over here I'll do two two calls let me also Implement product API product API service okay now I will do two call First is this. http.get which is on the top okay which is on the top okay and if I subscribe this subscribe response okay let's check the response here console.log response save the changes okay I'm doing a flat API call here and now if you go in this okay let's go back hope I haven't broke anything yes I haven't now if you see this right I have 20 products and if I open up any product right there is nothing called as quantity let me Zoom this a bit can you see there is any quantity no right so I need to add my own quantity so now if I do this call so okay if I comment this okay and now I do this. product api. get products subscribe this if I do console. log not the length console dot do log and inside that I can do the response okay let's save and change uh check the changes okay I save the changes again I can see I have 20 calls like same product calls but now you will see something interesting which is quantity yes or no and that's how you add Okay so that's how you add a quantity explicitly so monan said can we use Behavior subject Behavior subject for like to pass data yes we can to pass data across component yes we can use Behavior subject but to add a data dynamically so because for example right now I want to use this 20 product page on different different component so I don't need to add Logic for all the component like add quantity add quantity I will just add it in one service and this will reflect everywhere I subscribe this kind of data clear okay so now rather than doing this what I will do I'll just take this get all product and put it here okay paste the changes okay no need to do this because we are doing the unsubscribed directly okay because we have this Asing pipe here okay save the changes and now we are still able to see everything same see no changes yet now this is what it was so now you're able to see the quantity also now what I need to do right now I have to create the reducer for it so I'm thinking to take my code Snippets because I think this stream can go up to 2 3 hours Manan I read your uh chat already no need to delete it's fine okay so now let me do one thing let me take some code snipper and try to explain you that what is actually happening there here and there okay so let me take something from my store which is the reducer okay let me copy this all the actions okay let me also take the increment product decrement product and all that okay let's go here and put it here in the cart reducer so now if you see right I have all this reducer which I have copied in from my codes net and I'll just paste it below I'll show you a good ways to add your actions can you see now I'm getting some error here that hey you cannot use this and that okay let it's fine let me delete which is all unnecessary at the moment because I haven't taught you yet okay uh I'll explain you that also how I'm doing it now if you see right I'm directly getting something from the actions so for example here I don't need to do this one by one by one what I can do I can say import Star as what is the action I'm doing I'm doing cart action so I can say cart action from from your cart action which is this okay now if you see that I should remove this okay this is actions so I can change this to actions yes now can you see I have card actions dot I have add to card decrement product and increment product so I can access all of them now okay directly so remove item yes I think I should have done it but I'll let me do it later part of the video okay now this is how you do add to guard this is how you do increment product and this is how you do decrement product but in the increment right let's take a look what I'm trying to do here so here if you see I'm using a map and that's what I did in the If the product ID is matching with the ID what user has passed in the property then please add an extra quantity plus one or else return the same product okay and that's how I return the state of my uh card state which is this okay same for the decrement product what I'm doing right I have this const update product again this is my manipulation before sending the data I want to send the data but before that I want to do some changes I want to do I want to act on my action so if the action is decrement then what I do I will first check okay if the ID is matching for this particular product do one thing destructure this product and decrease the quantity by one and send it to the user that's it that's how simple this is that's how simple this uh reducer is okay now now if you want to also know about what is this remove action let me also create that action here so over here we have to create this action first so let's create the action remove it's remove is the easiest so I will say remove remove item or remove card whatever you want so remove item this will change to remove item and again you need to pass up uh props called as ID okay so this ID you want to remove from the existing array okay now I have an action then I should react on my action okay so let's react on the action okay let me uncomment this code and explain it to you okay now whenever user says that remove item is triggered okay what you will do you will take the property which you have passed in the props this props is very important H if you have doubt then do let me know yes yes okay Manan said can we inject HTTP Constructor also yes we can inject that yes we can do that I'll show you that okay so this is how the property is importance of property is so if you don't pass it there then there will be some error over here okay now over here right in this remove item I have this state and inside that I have restructured that property which is my ID now I'm checking that if if my product has that ID okay then please filter that product suppose I have uh 1 2 3 4 five five elements in the array and I'm saying that please is filter three so what what this filter will do filter will remove this three and now your item from five becomes four okay so something like that what I did so state that product I'm saying please filter from the product and remove this ID which are not matching okay exclude this ID and give me the new state that's what remove item does so remove item is removing that particular item from that array okay now let's so now I can say that everything is run everything is ready now now so I have actions reducers everything is here in place now what I want to do right I have to create a selector see the data is already but I want to select those data correct so to do that right I will create one more file cart do selector dots okay and again I did a small mistake this spelling is incorrect this should be card guys if you have have doubt please let me know in the chat H please and if you're able to understand then do also let me know yeah I'm I'm able to get it does give a thumbs up or thumbs down it's fine and is fine okay save the changes save the changes and now let's create our selector okay so for creating the selector let me show it to you directly what is the changes in the selector so now what I will be doing right so I have a card State okay so let me open in implement this card State okay let's go back now what I will do right so first of all you remember I have something called AS Global State okay so I maintain a global state which is this so this is nothing but my Global state which is nothing but your named as App State I showed it in the video also App State so now in the App State I want to add a new entry so I want to do a new entry of a record which is cart correct so to add that cart right what I'll do I'll go here and in my app State I will introduce a new state which is cart State okay cart State and now this card State I can use it in the selector so what I'm saying that hey from this okay let me show you in the diagram now so currently currently this is my app State okay which has two partition at the moment one is your uh counter another is your cart now in the selector right in the selector what I'm creating for cart what I'm saying that from this whole App State I want a slice of data which is this this this section I need which is in the yellow color I'm highlighting this I want this yellow section I want this yellow section okay so this is what the selector will do okay so this is what the selector will do okay so now what I will do here right so from this select card state I'm saying that okay from this whole ad St please select only which is belongs to your cart okay which belongs to your card only take that so now this select card state will have your card slice which is this okay this yellow slice will have so this is what I'm doing so this is the diagram and this is what the implementation this line okay all right now what is the next thing next thing from the whole St like from the whole state right from this whole yellow State okay from this whole yellow State okay I have two three things there I have two three things there which is my product okay I want to select the I will not I'll remove this total price from now but I'll explain you how in the next video like how do we do it okay let's let's focus only on the one thing at a time so now from the whole state I have some something called as product inside I have something called Product inside from this half slice of State take this outside take this outside as a product so this is what I'm doing so I'm saying okay select card product so that's why I create a new const and to create to get that select right I am injecting something called a selector so we have a create selector inside that I can make my own State like select my own state so what this guy need this guy needs two things send me your selector which you want to select which I have created on the top and tell me what you want to return so I'm saying from this whole selector please take the products please take the products so that's why this guy becomes product selector if I do undo right so I had this total price for example in future I have total price also to display correct so that's what I will be making this so in the C state right what I will do go to definition so what I will do I will also add one more thing which is total price let me make this nullable so that it will not throw any error okay so I will have total price also in future like whenever you adding an item in the card your total price will also get increase decrease yes or no so you will also need to change your state at that time so that's what it is so now that's how you will be doing it in the selector okay when you want to select the total price okay now if this is clear now I can say your action reducer and selector are ready now they're ready to get into action this was the only difficult part of ngrx you know I don't worry guys there is a reason why I'm teaching you this ngrx state okay ngrx store whatever it is there is something called a signal store in the market now I could have directly taught you that but the problem is I wanted to make your fundamental clear first trust me if you have this knowledge with you if I explain signal store you will learn it in just 10 20 minutes I promise that I guarantee it okay so that's why I'm focusing more on because this is quite complex to understand like a lot of boiler plate of code you need to create 1 2 3 four files then use them and do whatnot okay so rather than that so this is just for understanding purpose if you know the fundamental of how the reducer pattern works then understanding signal store will be way easier like we are making use of signals there to do our job okay so now I can say the selector is ready the reducer is ready the action is ready okay now I want to perform some actions inside my components okay so now if you go in the app component okay in the app component you have some actions yes or no so what I will do right I will first expose the okay I'll go here I will go over here also yeah this is the guy so what I will do right I will say click add to card so I'll say add to cut okay and over here I will create that add to cut okay there is something wrong imported let me remove it okay add to this is my function what I can do right I can actually create an uh adate input output because that's how you do that's how you perform your actions your child component is only responsible for uh display purpose this is called as presentational component so it should only display data action should be handled in your parent component what I will do I'll create an output okay I'm trying to do it in a correct way I could have done it in easy way also but let me do it in a very correct way which is handle add okay and this will be my new event emitter okay let me import it first because event emitter and this is my event emitter I want to emit what I want to emit a data which I passing it over here so what I will do I will pass the product as a parameter as an argument to this function so this is my product product of type i product okay this is what I want to emit so I will say this dot this Dot handle add please emit the value which is product okay so this is the event emitter right this is the eventer in the child component now why is it completing let's see maybe because of the spelling mistake yes for sure so this is not correct we should be add to card and I should change it here to C caps save all the changes so now I have this add to cart created okay now what I will do right uh once this add to card is clicked I calling it in the parent component so go in the parent component so over here you have this handle ad okay so this guy should be responsible for doing the logic logic things logic apis whatever it is okay so add to add item to card add item to card so this is my new function and this I can pass the event right event CU this is event amiter so let me take this method and put it here and what you will receive you will receive a product inside it yes or no of type i product now what you will do right now what you will do right in this add to cut item you have store created correct so now you can inject your store so there are two three ways by which you can inject your store so one thing uh someone said directly we can do it in Constructor or rather we can do it uh with the inject function I don't know what I'm saying but yeah let's try to do it it with the Constructor okay so to do it with the Constructor it's quite easy like you get lot of examples on internet also like how to inject the store and all that okay so let me show you first Constructor way and then I'll show you in the inject way in the next one so I will say that private store okay in the store right you have to specify the store type so this is coming from your store this store is coming from ngrx on the top this is this is the guy okay now this store has a type right this store is has a type like from the store what you want to get so you are creating a store for cart yes or no so you can specify like this cart of type inside that you have what you have store of product products and then you can specify the type of it products okay something like this you need to import this because this is i product okay let's start so this is your store okay which is specified which is checking for the card item which is checking for the cart items okay now what you can do right whenever you want to dispatch an action so now your action is created so now you to dispatch it so you can say this do store do dispatch dispatch what action you want to dispatch you want to dispatch the add to cart item okay so this is what you want to dis patch this is what you want to dispatch so let's import this uh okay do we have action already I don't know I don't have I don't have this is the add to cart action okay I don't know this should work I guess I don't know why is it not working let me just check yeah dispatch which is correct okay dispatch and then we have add to card okay oh yes why can you see the error it says the expected one argument which I'm not passing it so let me pass the argument which is I want to add okay I want to add this product correct so this is what I will pass it to it and now it says that property product is missing on i product but requires of type iuct I don't know what is this let me just let me just check okay so I can pass in that product here directly by doing it destructuring it to be honest because this is an object what I'm trying to pass okay so that's how you will you will be able to pass your product to it okay once you destructure it now you will able to pass your products there okay this is what the beauty of ngrx is that now if you see your component code it's quite less right because you have added all your boiler plate inside your uh reducer action and whatnot okay but this guy right this guy just handles a single line and it does the job that this will perform the action for you once you click on ADD okay so now add is okay but you want to get the item also correct where you want to get you want to get it in the cart component so let's go in the cart component here and now again let me do that same thing let me have it from the snippet directly because this can take the whole day guys this can take the whole day okay so what I can do right I can can make use of the Constructor okay and inside that let me import these things now you'll be asking question why you did this here this is just to explain you guys that what I have did here right the App State I did something similar here but okay so this is also same what I did here so here you can also specify App State directly okay but this is a new way of doing things like you can directly pass your Global State and then you can tell that okay from the whole state what you want to get what data you want to get and all that okay now I can say the the store is injected I have to get the products so I'll say this dot this Dot card cart item sorry cart items cart items this is an observable I can say that this do store sorry this do store why is it not working yes it works store do select what you want to select you have to specify I want to select cart yes or no select cart products which I have created see if I go on this location card selector if I go on the location here I can see I have this selector created which selects what which selects my product and what is the type you can see that now if I go here and show you the type of it you will be amazed to see it where is that yeah if I hold on this right can you see this is observable of this returns an observable of i product okay and now you can use them inside your inside your card component okay so over here let me put up a span tag okay and also let me add a common module here common module I don't know I hope the Json pipe is part of that so now I will just display the data for you that uh this is my cart item card item I'm making use of async pipe and I'm also making use of a Json Json pipe I don't know if you guys know it Json pipe okay I'm using making use of Json pipe this will convert my actual J like object data to a Json so that we can see okay the data is there or not okay Al what I'll do I'll just make use of the same class uh let's make this as Excel the other and save all the changes so once I save all the changes everything is working fine it looks good now let's try to test it I don't know if that will work or not because I don't know let's check let's check let's try to check if that works fine okay now what I'm doing right whenever I click on ADD I'm trying to dispatch an action okay if I click on ADD here I'm trying to dispatch an action and now if I go here in the card component So currently the value is n let's see why because I'm getting some error in the console we'll try to fix it okay so I have this card selector let's try to put a debug Point okay let's go back try to click on ADD and if I go here the selector is empty see the state here is undefined and because of that I am not getting any value here okay the state says it is undefined and this is undefined because let's see the reason why remember like whenever we are creating those reducer pattern and all that right what we do we have to specify them in the app module okay but we don't have app module here so we make use of app config okay so we have to provide the state so let's provide the state here by saying that I have one more provider provide State and this is my cart and please use my cart reducer save the changes okay save the changes and now it's break because I don't know there maybe some issue with the spelling or something like that I don't know yes okay because it's breaking still here the object now is now it has an object can you see so products State can you see the state has an object now now if you see here right uh there is one small mistake I can see the state is a product and this is what I'm trying to send yeah as an empty object okay again it is an empty let me just check it is getting refresh yes I can say this is correct now because now I have an empty object okay it was missing because of that data all right now uh let me just check again that if I have any product here can you see now I'm trying to debug and I'm calling this selector now if you see over on the selector I can can see two data has been added when I clicked on click add okay and I can see both of them here on this particular page which is my card page okay again let me show you again small demo if I refresh the page again let's start now what I'm doing I'm clicking on this add if I click on this add one item got added if I go here in the card component I can see that one item is here ID which is one let's go back again now I'm adding this two let's go and see here see and also getting one more item got added now the problem is right the problem here is right I'm not able to update this cart right so for example if you want to do this with behavior subject how will you do it easy right so I think somebody asked prik asked sir I have created a behavior subject for adding item to card but every time I refresh the screen the behavior subject erases and no values available how should I approach it okay let me come to that question to you okay so what happens um whenever you are click clicking right so currently I think I have made a video also at to cut by using Behavior subject if you haven't seen go on YouTube and watch it it's a very good video that I have shown how Behavior subject works over here right it is doing something similar job but I said in the video very efficient way let's take an example now if you want to do something similar what you will do first step number one you will create a product service then you will create a behavior subject of a product then you will make use of an observable then you will say next okay you're opening a stream of a data then you will subscribe it in one component you will subscribe that in maybe if you're using it in 5 10 components you will use it everywhere and you will do subscribe yes or no the problem is right there is high chances that you will make use of data leakage and if you have such a big component right to handle them it will become a hassle for anyone okay it will become a big problem if you are working on a very big Enterprise level application which we have observed because uh when I was two years back when I was working for my company there we have seen that we have observable stores we were maintaining our own stores there but trust me it was not easy for us to um maintain maintain our code base so we have shifted to ngrx store uh this one this specific version what we are using right now something like this so we have shifted to that and we saw the benefit of it that now we are only maintaining our stores okay we don't need to focus on unsubscribe do this maintain the state uh adding the behavior subject everywhere and do all and do whatnot now we are not bother about that what we do we just maintain our store like even one or two developer can maintain your store like okay what data okay you need one more data add a new data create a selector create a reducer now if you have about 50 components where you want to use it just go and use it directly inject it and use it and you see there is code base also gets minimized because to use in 10 components you will doing subscribe everywhere like this dot component like the card component. subscribe then response store the response update the state and show it in the UI yes or no but this one right you don't need to do anything store is handling everything for you just make your selector just take your slice of dat data what you want to select and show it in the UI and that's it that's why I'm in love with this ngrx store okay and coming with for the PR's question that see uh maintaining State means we are not storing it in the browser okay if you want to maintain the statea right on the refresh also so either you should handle it with the database approach or if you know that it is not a sensitive data then you can keep it in your uh local storage okay so something like that you can do but ideally how we handle in uh like in our uh Enterprise level application we what we do right we only send the data like for example I want to fetch a product detail if I go on a route so what I will do right I will say so for example I'm doing add to card add to card add to cart and add to card now once I go and click on this cart item right what I will do I will do a DB call I will do a database call because on every item I clicked what I have did I did a API call to store it in the database so you can do on every click or what you can do right once you click over here this will do a post call and once you go on this page then it will do a get call okay so that's how they maintain their state like now even if I refresh right I have a card ID so I know for Shashi the card ID 001 so I will have your card / 001 like question mark 01 as a query pams so even if I refresh the page right I will maintain my card items for this user something like that okay subject Behavior subject then this ngrx they cannot help you to maintain data on refresh even not even react can do that okay so react also follows something similar fundamental like only take the ID maintain it in the route and do the API call based on that ID associated with it I hope I was clear let me know if you have any further questions if yes then please give a thumbs up in the chat like the stream guys I don't see no one has liked the stream I see only one like Ah that's bad please like the stream guys okay so now I have this product list of product is visible on the card page but now I'm not even liking it right it's not a good user experience right if I click on ADD see if I click on this ad this is still zero yes or no now to get the value over here what I'll do right okay let's see so now the data is so that UI is present in header component which is in the app component. HTML and it is somewhere here okay I can if I can use an ID and do API call I can see other card details so usually what we do right n that we don't even allow the user to put in the query params in the most of the time so for example uh let's take an example of a product detail page so let me show you one of my website so over here right so this is my list of product okay so now I click on this read more okay so what I do I am passing a my ID in the route which is which is only for this particular user like for this particular blog ID and even if I refresh the page what what I see the data is still persistent like I don't need to on refresh the data is not going back but when in the term of you're saying uh user specific card detail right so now like for example the example what I give so if you have this cart question mark and then you passing your ID of that correct so you have card slash you have ID you're passing one yes or no something like this so what is this what are we like what can we do in this case so you can create your own middleware in in nodejs where you can validate the user okay so for example you should not able to see anyone's card okay so for example you you like in the cookies R you will be passing your user ID every time okay so so for example we do cookie based authentication we do uh what do we say uh token based authentication you always pass your payload data to the back end and that back end validates you okay this is the correct user if yes then he go goes to the second check okay now this guy is requesting the cart ID 001 it will check in the DB yes if it has that ID then only it will display for example I'm saying here 101 and I don't have something like that yes or no if I try to fetch it I will get no response or like 44 not found something like that okay so that's how that's how we are actually practicing to maintain the state on the page all right now what's next what's what's next what's what next okay now now what we need to do we have to uh maintain the like we have to get the data over here in the header okay again there are two three ways by which you can do everybody's knows the what we say okay cool thanks thanks naen okay all right so what we will do right now now we have this app component right so in this app component again we have to inject the state okay inject our store which we have created can you see here I already have my store injected okay and this is pointing to my my appet which is the global data the global State what we are maintaining okay now inside this correct what I'll do I'll create one more uh which is my total item or else or else or else or else or else what we can do we will have the products so let's add all my products cuz we have already created a product selector correct so and this is of type my observable of products with i product okay of an array okay now what I will do again I will select the data select the slice of data this dot products and let me take the slice of data store do select select what select my card products yes or no now once we have this list of data now I can get the count from it yes or no so I can go here I can just display with an string interpolation which is my products oh okay which is my products products array and this is my Asing pipe I can make use of my Asing pipe and inside that right once you have this so this will give the list of data to you all you need to do is you just need a length Okay so that you should be know that okay what is the item I have what are the total item I have inside it okay save the changes and let's see let's see what we like are we able to get the ID or not the numbers or not now if I click on this add can you see over here there is a change that now I can see the item what I have in the cart if I press again press again and press again so I can see there is four item I have added like four times I clicked if I go here now I can see all my four product visible yes or no all right so now what I need to do right uh this doesn't look good so what I'll do I'll just take some of my code Snippets to make the UI okay copy this and let me put it here okay let me put it here okay I'll remove everything and paste it so currently I don't have um uh did this part so I'll just put it as a random number okay uh decrement I will be doing it so let me put it remove it at the moment this also let me remove at the moment let's go back what else and this also let me remove at the moment let me just show you how the UI looks like okay now what I have did here I'll I'll show you so currently right when my card is empty like whenever I refresh the face so there is no no item in the card the card is zero so I just have added this if condition again I'm making use of the new control flow what we have an angular that uh with this atate if we can make use of it and what I'm doing I'm using the same same logic that if the cart item length is zero which means there is no item in the cart and this will display your cart is empty but if this is not the case it should come in the else case and this will render this data again this is not a good way to do things you can try to divide your component into small small chunks if you want like for example this can be a separate component and you can render them based on we have a deferred block where you can make this chunks visible only when it is required to save some bundle size so it depends but this is just we are focusing on ngrx to so that's why I haven't did it so we have a single component here now what I'll do right let me just go back okay uh let me just confirm that I have this card items yes it is there now if I click on this add add and add I did three time add I can see three components here like three items in the card if I go here can you see now I have a very good looking UI done already for you guys okay so now I have this title okay I have this image okay I have this to add in but it is not working now but that's what we have that's why I'm maining the state now so which means I'm able to see the all the products item what I have added yes or no now I want to implement the remove okay I want to implement the remove so how can I do that so see one thing is that our state is ready our main hurdle was this guy mean like making these three files this is ready now so now what I will do right what I will do right uh I will just make use of these actions So currently what actions I have I have uh increment oh no where is decrement I don't know okay I have the increment decrement at two card and remove item so now I want to use this action called as remove item okay and let's see the magic so in which component I want to use it I want to use it in the card component so I'll go in the card component so over here I have injected the store and let me remove say that remove you need to pass the the product ID of type number okay and from the store see no logic you need to addite you just need to add one line and your reducer will do the job this do store dot what you want to do perform some action so what you will say dispatch dispatch action give an action name what is the action name you want to do you want to add you want to say remove I don't know what was the name let me go and check again uh over here yes action name was remove item let me copy this just to be sure okay remove item and import this okay once I close the bracket what can you see it is asking me to pass your props okay so pass your destructured props here which is the product ID and that's it that's it so in this way you will be able to do the remove action also now you just need to call it over over the button so I don't know where the button was let's see uh this is the remove span which is this button I can call it here so whenever the user clicks click on remove and pass in the ID which is nothing but your item dot ID okay so this ID I want to remove save the changes and let's see the magic now the card is empty fine let's go here add add add and add I added four items let's go here again now what you will see right I want to remove an item so I click on this remove can you see the item got removed remove remove and the card is empty okay isn't it cool yes or no say yes say yes say yes okay so that's what it is so that's what it is like now we are able to handle two actions okay now we able to handle two actions now I want to do increment and decrement okay that's another good thing to do it's a good challenge actually now I want to perform two action increment and decrement so I can do something similar it's very easy to do now see the power now once the store once the state is ready now to do things is quite easy it's just a copy paste of code to be honest see even for increment and decrement what I need to do I have something similar yes or no the only thing is the action will change so this is my increment method This Is My decrement Method okay both of them I'm passing it from the UI I I'll show you how so to do this right I have increment product action and this is decrement product action again both of them you should pass the props which is ID okay which is this product ID now what I'll do I'll go in the card component I have two buttons created if you remember okay so this is the button where is that where is that yeah the plus and minus yes so what you will do you whenever there is a click happens you will say increment and in the increment you just have to pass your product ID which is nothing but your item do ID if you guys are confused what is this item it is nothing but coming from here okay we are doing NG for remember NG for let row of so this is let item of cart items but this is the new way of doing it okay now I'm also using the sing pipe to do the Subscribe and unsubscribe so that's what it is so that's why it is taking the item id same thing I'll copy paste and and put it here for okay I did a mistake sorry this is increment and this is decrement save the changes now what we will do let's go back and again let me add these two product once I add these two product can you see I have this item one okay which is coming from item. quantity now if I click this plus can you see that okay sorry I was watching the comment BB HB okay so can you see that how cool it is I know lot of people say that ngrx is this Bo your plate code this that it is only for like if you are just beginning with the ngrx if you're just a beginner ngr I know it is quite hard to get those things in mind very fast but once you know ngrx right you will be just in love with ngrx but you you see now I'm able to do increment and decrement yes or no and the data is getting updated real time now what I need to do now the thing is that still I have these two items I want to change the total amount this is the best thing I will be showing you that now I will maintaining my state in such a way that everything is in sync okay everything is missing that now I will show you that how to maintain this total amount value so let me just go here okay let me close all this and where I'll go right I'll go in the reducers in the reducers now I have this total price let me now make it compulsory so you should have a total price and let's give it as zero initially okay zero initially who can tell me who knows this how to do it anyone knows like anyone knows how to do it in rxjs way observable who can tell me anyone in the chat would like to answer this how can we get a total price by using rxjs come on come on try try I want to see in chat who will do it who who wants to try anyone who wants to try let's see just tell me the idea what how how we can can do it okay let me just see in the chat okay anyway I will be doing it in front of you how to do but I'm just interested anybody knows like the keyword I'm just waiting for the keyword like how to get a total from an array okay so what I will do now I will say export I will create a new function okay export a function function name I will say calculate total price total I hope the spelling is correct price okay so I have this function I'm creating this function which takes as argument as products products of type i product okay now what this product will do this product will return this will return a number return there is something called as reduce okay there is something called as reduce so what I will do I will say uh products dot reduce this is a what kind of function reduce is a higher order function of JavaScript okay so reduce has two things it has accumulator okay it has an accumulator and it has a like it can take your previous value and it can add a current value so previous value is nothing but my total which I want to maintain the total comma the current value is nothing but my product yes or no now based on these two what I will do right I will say that okay based on these two can you do one thing can you do the addition can you do total Plus product dot price yes or no this will give the total value yes or no this will give the total value but the thing is right we also need to uh make sure that we are also checking the quantity suppose I have a product of 10 Rupees okay one quantity if I take two quantity the total price becomes 20 rupees for three quantity 30 rupees so that also you need to specify it here so how you will do that so over here right so you have a product do price but what you will do you'll just say into you will multiply that you will multiply that with the quantity which is product do quantity okay and just below that just below that there is something called as in the reducer that you have to specify the initial value initial value okay so now the initial value of total starts from zero correct now we will be adding now what it will do right it will Loop it will Loop to the Ed AR okay it will Loop to the array and it will add all the values yes or no are you guys I hope you guys are not confused let me show you get total price from array just go anywhere just search for reduce okay it's quite famous it's quite a trendy way of getting the total item so this is what but we also have an array yes or no and what I am doing I'm just trying to return the item but how this reduce works this reduce has this accumulator and this and but you need to specify initial value to the reducer okay that's what I'm just trying to do here as well like it's it's quite simple it's quite straightforward you just need to know that what is your expectation it's okay to do Google it's fine but you should understand that what this guy is doing what this reduce doing how does reduce actually work so I have this a clear thing in my mind then then only it's fine to do Google it's fine to do chat GPT don't just do chat GPT copy the P copy the code paste it down and say yes I did it just don't do that I'm not saying anybody to don't use chat GPT chat GPT is quite good thing to use to be honest I use it on daily basis but we should know what to search okay you should not say that create a to-do list application for me it will not help you then right it will help CH GPT I guess to get its model more better okay all right so now that's how I'm able to calculate the total price by using this reduce function okay so that's that's about it now what you need to do right every time now every time you're returning a state you will return one more thing you will return something called as total price what will be the total price you will say calculate total price and send this updated products okay on every action this will calculate the total price so for example now if you do increment if you're removing the item right still you need to update your total price if you have added an item incremented the item again you will do the total price if you decrement an item again you will do a total price and in this way the total price will get updated now you have added the action in the reducer okay so now the reducer knows that okay I want to do some manipulation of a data which is this logic okay like whenever there item there is change in an item if I'm doing increment so I'm updating the product and based on my updated product please calculate the total price clear and that's what it does now the only thing is right I have created a reducer but I want to do a select I want to get the slice of a data okay so let's go in the selector I have already added it but yeah that's what it is now let me again show you in the diagram in the picture way okay let me show it in the picture way over here right remember I have a App State a big App State it has two slice slice one is I don't know counter sorry let me remove slice one is counter slice two is cut and now now in this selector right I have this yellow selector so I have this slice of data outside now okay so now this is what my slice of data is and this slice of data has two things one is product or you can say the cart items okay cart items which is a list of product and the second one you have a total price so now to get these two slice of data so now from this slice you want to select this and this so now here if you see right here if you see I have this one slice and this is the second slice so from the from that slice of card I'm getting my data I'm selecting only my data what I need so from the from the bigger slice which is this the yellow one which is this from the yellow slice I need only my data which is total price and that's it so now wherever you want to get a select total in your component like so for example I want this to be used in cart component yes or no so I will go in the cart component. HTML okay go here and create your selector so now what I will say total price of an observable I will say that this dot store okay this do store do let me put this pen okay this do store okay from the store what I want to do I want to select what you want to select I want to select the total what I have created see now if you over on this total price what is the value of over price observable of number now if you go here in the HTML okay where I want to here I want to render so what I will do I will just say that uh total price make use of ASN pipe to handle unsubscribe and also I'll make use of currency currency pipe okay now save all the changes save all the changes and let's go back on the product page okay now you will see the magic if I click on this let's say some simple one because I'm very bad in Maxs so let's go with this one okay I added one item so one item added in the cart go here now if you see I have this total price I'm not bad in Max I'm good in Max sorry okay so if I go here right now if I increment can you see a magic there what is 9.9 into 2 I know the answer it's 19.98 and that's how you are able to maintain the data like all the data are in sync now okay that's how you make sync of your data okay now let me show you one more thing let me go back and let me add some more items so add this this this and this five items added yes I can see the total amount also who wants to add they can add now in calculator okay now see the magic I'm adding this item again increase I'm also increasing this quantity increased see the total price in sync now see the if I remove this right remove remove remove can you see now I have only one item which is 15.99 and also the total price is 15.99 and in this way right we are able to sync all our data okay we able to sync all data like the total is in sync the quantity is in sync yes or no the card item the count here it is in sync and how you're able to do this everything is possible because of ngrx State Management okay again let me tell you that we have only covered the half section what I have told you like and this is what we will do so for the next thing I let me tell you the advanced way of the ngrx thing when this will come in picture okay when this will come in picture right for example this guy let me remove this okay let me remove all this okay so I'm talking about this section so I will create a separate video for you guys to explain this effects when does effects come in picture the effects come in picture when we are doing the API all because this product API right this data you are getting the product list of data what you what you are able to see here you're getting it from somewhere correct so from where you're getting it so I will be showing you like how you uh do the effects call you maintain the state of your product list yes or no so that I will show it in the next video or maybe next live and I'll come I don't know do let me know in the comment section that uh if you need a YouTube live or you need a video directly to teach this this section of ngrx do let me know in the chat now now now okay do let me know that you need a separate video for this effect or you need it as a YouTube live okay so this is what I will be covering it later but we but I can confidently say that we are now now we know about this section this section now we know how we know let me tell you now so now we have created the actions which is add to cut remove increment decrement whenever I click an action what happens reducer triggers triggers the reducer do some manipulation it do manipulation okay once the manipulation is done right now we maintain the App State so this is nothing but your app State okay App State and in the App State what you do right whatever data you have manipulated it goes and stores here it is sitting there now just we are not doing for data to get sit right okay just for sit I'm not doing that I'm doing it because because I want to select the data so the data what it is sitting here I can create a selector so the selector is for this guy so that's why the arrow is like this so this will select the data from store okay and now this component who is here which is responsible for selecting that particular data for you okay so this selector is nothing but for your slice it will take the slice as a selector and now from this slice I expose I expose my small small chunks of data which is uh the card item and the total yes or no and now this component can use this selector to display it in the UI and that's how this life cycle I have explained it in my previous video also that's how this life cycle works okay clear any doubt any any questions any doubt any questions anyone yes no no yes let me know give a thumbs up if you guys understand this if you guys learned what I have just taught you today and I think this is what my agenda was for today I think it's already 2 hour long I guess I missed that end in this live class no worries no worries guys I will be making uh a video for this session anyway I will edit this video okay and I will just no questions till my first doubt is there uh V what is your first doubt I didn't understand no questions my first doubt is there initial initial initial okay whoever have still doubt right just connect with me on telegram let's have a call one to one and try to get things done okay let's let's take a separate call with you guys you can follow me on LinkedIn Instagram everything is there in my description any go in my any video and check the description you can find it there and let's connect and let's try to get your doubt clear and I will do that for sure okay so this is what I wanted to teach you guys today about the ngrx store where we have created a an add to kind of an application okay and that's about it anybody anyone has anything to ask they can ask me now let's see if anyone has any question by the way guys I have started uh creating Instagram reals do check it out also I don't know if you have seen it or not but do follow me there also like I'm started to like create some small small reals to explain things like I will be starting a JavaScript series uh which will be about 50 60 videos I don't know I'll just see that I will be starting that very soon so I'm just in process of doing my setup for that shorts and all so yeah do follow me on Instagram also if you haven't followed me yet okay now anyone has any questions to ask poo poo guys you can ask me anything if you have anything to ask I see three people are still watching thank you so much guys it's been 2 hours that you are with me thank you so much thank you so much thanks thanks okay if you don't have anything then maybe we can end the stream now if you don't have any specific questions then yeah but if you still have anything you can connect with me and we can we can talk it separately okay also for this one uh I'll push the code on GitHub okay let me push it right away okay now we are almost done so let me put it on the okay let me send it on the GitHub oh sorry let me Commit This so always give a message I can say it's a feat added state for cart okay Comm the changes syn it okay so you can find my GitHub link also right it's there in the chat I don't know can anyone please put in the chat if they have you can find it there just search for ngrx store YT and you will be able to get it so you can get the code and you can play with it like whatever you want to do okay okay yes no yes no guys say something say something in chat okay okay okay okay okay okay let's see let's see it was really nice session to be honest I think we have learned a lot today okay okay all right guys then it's time to say goodbye see you guys in the next stream once I think I'll do it again maybe next week on Sunday uh I will take some new topic to teach you okay let me know if you guys have any uh idea for me thanks you know thanks thanks I appreciate it okay if you guys have any idea that you want to learn from me I think somebody has already told me that uh he want to learn unit testing so uh what I can do next week I can take a session on I will do a live everything I'll do live I'll take choose one of my old project and I will show you how to do unit testing in Ang if you want for net also you can let me know net nodejs react also react guys if you want to learn react from me do let me know uh I can I can teach you like how a angular developer can learn react if you guys are interested do let me know because I started my journey as an angular developer but now I'm also working on react and I'll tell you the way what things I followed to learn react and it took me 15 20 days to learn this so I can help you guys if you want do let me know if you want to learn react from me I'll teach you the best and free of cost okay okay then bye bye bye bye bye bye bye bye bye see you guys see you guys next time thanks for joining in then bye-bye guys see you see you

Channel: Let's Program

Views: 2,654

Keywords:

Id: nNxsmP1MBs8

Length: 127min 22sec (7642 seconds)

Published: Sun Dec 31 2023