Install NGRX/Store | create files & folder structure NGRX implementation | Angular 16- NGRX Tutorial

and this is our angular 16 hdrx tutorial part 3. so in my previous videos I have provided some overview regarding this ngrx and also the red x pattern from this video onwards we are going to start the implementation so before that let me tell you what are the topics I am going to cover in this video and the first thing is we can create one brand new angular 16 application throughout the series I am going to use the same application only and next thing is I am going to install this ngrx store Library so after that we can Define some basic state and actions and reduces for implementing one basic ngrx example first let me create the application NC new Lan and grx so the routing is needed and CSS okay the installation gets completed now let me open this application in our Visual Studio code okay this is our created application and the next thing is I am going to install this ngrx store so in this new terminal so let me execute the command see npm install at ngrx store so this is the npm command similarly we can use the engine and also so let me show you if you go to the official site of ngrx you can see the NC command it is installing the latest version so even if you are not providing also it will install the latest only and similarly yeah PM command only we are using so now the installation gets come and this ngrx 16.0 the latest version is installed okay okay this is fine and next I am going to create the files for the state actions and also reduces okay for the example purpose we can consider one basic example counter logic okay first let me create one service so inside the shared folder so let me provide the name as Master service okay the new folder is created and also we have this service file so inside that I am going to create one new folder the folder name is store so here we can keep all of our ngrx files okay so next let me create one file so that is for our state so since I said my example name is counter logic so I can provide the name as counter Dot state DOT TS okay and for similarly actions counter Dot actions.ts and the final one is counter Dot reducer dot TS okay now our files are ready so here I am going to Define our state so already I have mentioned the state is nothing but on Json object so let me Define my state here constant initial state here I am going to have only one property counter the default value is zero okay so let me save this one so and next I am going to create the actions so in this action point of view we have three actions okay the first one is increment then decrement and final one is reset so we have to create the three actions so let me create one by one constant increment for creating the action we have one function is create action that is belongs to our NCR store periodization so once I choose it will be imported top of that okay so here we have to provide our action name while explaining this Redux concept I said like so in this actions have the default properties type okay so this type is the unique value so see we have this type so let me include it so I'm going to Paradise the increment so similarly if you want to pass some parameter also we can do so that I will cover in the separate video okay so next let me create the next action so we can provide the name is decrement and the final one is reset and one more thing we are going to use this actions in our reduces so we have to export everything let me include this export keyword okay so now we're done with our actions next let me move on the reducer side so reduces it is kind of functions okay it will take two inputs one is the actions and another one is the state so based on the actions and state it will calculate the new state that should be updated in our store that is our concept so let me Implement our basic reducer for our counter application export this is the function counter reducer it's having two input one is State and another one is the action so let me provide the data typically okay otherwise it will throw the error and inside the function we can return one more function counter reducer so here we can pass this state and also the actions now let me Define this uh counter reducer constant counter reducer equal to we have one function it's called create reducer so that also belongs to our ngr store create reducer okay this is fine so here we have to pass our initial state so initial State already we have declared in our state file so after that we have to use the on keyword that also belongs to the ncrx only and here I am going to use our actions so the first action is increment and also it is imported and here we have to use the state also state and the Lambda expression so here we can return we are defaultly returning the state and here we are modifying the counter value okay so we are taking the default value so after that so this state DOT counter so increment means we are adding plus one that's it so let me format this one next I am going to include one more on so in our red X actually we have used the case option so here we have this arm okay that's it and next I'm going to use it for the decrement so in this decrement as usual we have to return the current state and we have to reduce by one so then I have included minus 1 okay and the final one is reset that means we should have the default value so anyway let me include one more round section so in this action we can provide us the reset okay and finally I am setting the default value that's it state DOT counter now let me save this one and also we can format it okay this is fine now we successfully created the basic state for our account replication and also the actions and the reduces okay so in my next video I am going to complete this counter application now we are in the end of the video still if you have any doubts or clarification regarding the state actions and reduces please put in the comment box and also please don't forget to subscribe my channel thank you thanks for watching

Channel: Nihira Techiees

Views: 436

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 tutorial for beginners, ngrx course for beginners, install ngrx store, createAction in ngrx store, createReducer in ngrx store, ngrx folder structure, implement ngrx counter application

Id: SiImpKkdjUo

Length: 10min 2sec (602 seconds)

Published: Thu Jun 08 2023