NGRX props/payload | pass data to ngrx actions | Angular 16- NGRX Tutorial

this is our angle of 16 ngrx tutorial in this video I am going to explain how to pass data to the actions using action crops so the same functionality available in this redex pattern also the property name is payload so in this ngrx we can use the step traps okay for doing this implementation I am going to use the same counter application that is created based on my last video so in this counter application we have three actions the first one is increment and decrement and the final honest reset here we are doing this increment and decrement by one so that means whatever value available in this current state if the action is increment means we are adding by one similarly for the decrement I am providing -1 okay so instead of adding by 1 I am going to provide only input based on the input value we can do this increment and it decrement actions okay now we can start our implementation so the first thing is I am going to create one new component so the name is custom counter okay next we can create our actions so already we have one action file counter data action so here I am going to create one more new action export constant the action name is custom increment okay so we can provide the unique name is custom increment so the next thing is we have to pass the data so as I mentioned we can use the props option okay so this props also belongs to this ngr store so let me provide the property name is value and the data type I am going to use number okay so let me format this one so the similar way we can pass n number of parameter also okay so as F now I just passed this value so similarly if I'm having some other properties also I can include okay so anyway let it be we can include later and finally we have to use like this okay next let me move on the reducer side so in this reducer we can see this action increment decrement and also this reset so after that we can include our custom increment also okay so let me change this into custom increment so initially I am going to provide the value is the default State value only and in this parameter point of view already we have this state I am going to include this action also now this is let it be let me move on the component side so in this common let me copy this selector we can include in our app component and I see the output okay the text is coming and here I am going to use some material away component so we can import all the required models I am going to use this matte card input select control so obviously form field also so we have to import all the models also the first one is MAT card model next matte input model and the third one is match select model and the file on this matte form field model so in this HTML side we can include this map card then let me include two custom classes so insert the mat card I am going to use one input control after that I am going to include one button okay so already we have included some buttons in our counter button component we can copy and reuse it in our custom counter also okay so let me provide the name is custom agreement and let me write the function also here we can have one Constructor and it may declare one variable also counter input so the data type is number so let me save this one see okay the design should be like this so in this counter inside the Mac card we can include this matte card content also so actually this is for the designing purpose only okay this is somewhat fine so the next thing is uh we have to take this value and also in this actions we have to dispatch our custom increment action okay so first let me dispatch this one so before that we have to inject the store so that already we have done in our button component also so first we have to provide our reducer object name say counter so then State value format just a number that's it so let me format it so after that we can dispatch our action here so this dot store dot dispatch and our action name is custom increment it is expecting one parameter so that is our counter input okay it is showing any error so we have to pass the values in this object format so the value we call to this dot count of that's it so let me format this one so the next thing is we have to get the input value for that I am going to use the two-way binding so first we have to import the form model okay so this is fine and next in our HTML control side so in this input I am going to use in C model okay and let me save this one and finally we can complete our reducer side so as of now I am just assigning the current state value so after that whatever data we are getting through our action that we can include it here action dot value okay so let me save this one so here I am going to provide 20 so if I'm clicking this custom increment I am getting this 5 to 0. Okay the reason is whatever value we are passing it is considering as the string only so we have to convert this into integer so that we can do it from our component itself okay mechanism like this so let me save this one so now I am going to provide 20 so if I'm clicking this button see the counter value is 25 so if I'm clicking this increment button it is adding by one only but the similar way if I am clicking this custom increment so whatever value I am having in this input control based on that the value should be increased okay okay this is working fine so as of now we are passing only one parameter that is nothing button user input and also this action point of view we are doing only increment okay so what I'm going to do let me pass one more parameter so that parameter is nothing but an add or remove okay that is the input data so let me include one select control so once this implementation is completed you will get some better idea okay so let me provide add some type so instead of the input control I am going to use this match select send this math select I'm going to have this matte option so the first option is ADD and the second option is remove and in this Value Point of View also we can add as the ad the remote okay and in this TS side we can declare one more variable action type are the property string so let me save this one and we can include this variable into our two-way bending just we can cut this one we can include it in our match select itself so let me remove this input control see the screen now it is having add and remove so the default value we can provide us the ad so this is fine and the next thing is we have to make changes in our action side so already I am passing one parameter so after that let me include one more parameter action data type string we can format this one so obviously we are getting error from our common inside so here we can pass our next parameter so the parameter is action the value is action type and in our reducer side I am going to check like this action Dot action double equal to add if it is said we can have the existing item else it is obviously remove only so then we can provide us the minus and in this design point of view also instead of the label we can use the mat label so I am going to provide a 10 or 11 so the action type is had so if I'm clicking this custom increment see the value is 16. so similarly if I am changing this into remove let me provide Phi so the expected output is 11. and we can change this button text also proceed okay again I'm providing 100 it is 105 and in this remote time let me provide 73 so the value is 32. so now if I'm clicking this decrement the value is decreased similarly this increment it is increased by one at the same time if I am proceeding within our custom functionality if I provide 20 the action type is admins the expected output should be 53 okay okay this example is working fine only so our end object is we should know how to pass the data through our actions and also how to pass multiple data so that actually we have clearly done so let me provide on overview so first in our action side using this props we are passing this object so if you want to pass single data we can pass and also if you want to pass multiple datas we are able to pass okay once it is done we have to handle in our reducer site so we have included one more parameter that is our action so using this action we are able to get the values okay finally in this component side while dispatching this action we have to pass the exactly data so that is all about our concept so now we are in the end of the video still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel thank you thanks for watching

Channel: Nihira Techiees

Views: 2,190

Keywords: what is ngrx in angular, why ngrx, ngrx state management in angular, what is redux pattern, what is actions in ngrx, what ngrx store, what is ngrx reducer, what is ngrx selectors, how to implement ngrx in angular, introduction of ngrx in angular, ngrx course for beginners, install ngrx store, createAction in ngrx store, createReducer in ngrx store, ngrx folder structure, pass data through ngrx actions, how to pass multiple data through ngrx actions

Id: 2jA7iHQ6Mg4

Length: 14min 45sec (885 seconds)

Published: Wed Jun 14 2023