Angular ngrx-store Tutorial - Action, Reducer, Selector

ngrx store is a state management framework for your annular web app whenever several components must share a state this framework provides a solution ngrx store works with actions reducers and selectors a component can dispatch an action and a reducer determines the next state based on the dispatched action and the previous state components can observe a state or slices of a state with selectors a state can be as simple as a primitive type like boolean or integer or it can be a complex object we will take a look at all those mechanics and build an online shop shopping cart in my example online shop i can add products to my card and in the header i can see how many products i have added and the total price i have to pay also i have a detailed page of my shopping cart where i can add or remove products and even clear the whole card i start with a basic angular based online shop example here i have three components one is the header one is the product list page and one is the shopping cart details page currently ngrx store is not in place so all buttons are without any actions the header has a routing to the products and the shopping cart page it displays the total number of added products every product can be added multiple times also it displays the total price the customer will have to pay these numbers are currently zero but they will be streamed from the store via selectors i have defined a product interface so every product has a unique id name description price and a url to a picture my shopping cart will have a list of added products so my state store will contain an array of these products the product page has a list of hard-coded products here the shop is selling a toy robot a board game and a book the buy buttons currently call only method stops which will later dispatch a store action the shopping cart details page currently only has the buttons to clear the card this button will also dispatch a store action also later i will display a list of all added products grouped by the product id so the customer will know which products he has added and how many of one kind the grouping by the product id will also be done by a store selector now it is time to install the ngrx store package via npm after installing it i create a typescript file where i will define my actions an action is created by using the create action function of the ngrxtor library it requires at least the name of the action i create the action clear card it does not require any input parameters and it is simply used to remove all existing products entries from the cards and now i create the action add product this time i say that this action has an input of type product this action will add the given product to the card and at last i want to remove a product from the card consequently that means i am creating another action with the name remove product now we have defined all actions we now need to define a reducer the reducer is like a state machine where we tell what to do on each action the reducer is created using the create reducer function of the njrx store library at first it requires an initial state remember that i want the store to keep an area of products so the initial state is an empty array for all actions that we have defined we must define a state transition instruction using the on function for example for the clear card action we say on clear card the current state is being replaced by an empty array note that i do not care about the previous state i just simply return an empty array it gets more complicated for the add product action so we say on add product we have the already existing entries and we have a product as an input for the action it is important to understand that the existing state must be immutable for isolation purpose i make a deep copy of the existing products array and then push the newly added product and return the new array every product can be added multiple times to this array i do a similar thing for the remove product action so on remove product action i have the already existing array and the product which i want to remove again i make a deep copy of the preview state then find and remove a product matched by the id and return the new array now the actions and the reducer are complete we must configure the store to use this reducer for our card state in the app module we import the store module and provide the reducer map we have a state named card entries and assigned the card reducer it is time to dispatch these actions in the shop product component class we inject the store in the methods tab where we want to add a product we use the store and dispatch the add product action with the given product also in the shop card details component class we dispatch the clear card action when the clear button has been pressed we also want to get the current state using selectors selectors provide a way to get slices or aggregations from a state in the header we must display the total number and total price of the shopping cart entries we create a selector named select count products using the create selector function we also specify that the selector is applied to the card entry state and also we provide the instructions for the selector we have the products array and we simply return the length now we would like to select the total price of all products in the same manner as before we use the create selector function and we say that we want the selector to apply on the card entries state for the select instruction we iterate all products in the array and do a sum of all prices these selectors will be used in the header component so in the constructor we inject the store on the store we select the count and the total price using the previously created selectors the select returns an observable these observables are used in the html template for the product counter we use angular interpolation and insert the observable for the product count and pipe it to the async pipe function the async function resolves the observable to the actual value the same goes for the total price i pipe the observable to the async function and then to the number pipe function to properly format the decimal number now we do the first test in our application every time we buy a product the counter and total price should go up if we clear the card all products should be removed and the counter and total price are zero i create the third selector to get the grouped list of products for that i define a new interface which contains the product and the count the new selector is iterating the state array and grouping products by id and also counting them and then returning the grouped list this new selector is used to display the card details overview for each product group i can also add or remove one product by dispatching the proper actions we have one last problem to tackle every time i refresh the page the state gets lost i want the state to be at least stored in local storage in the browser i can use a so called meta reducer of ngrx store the meta reducer is like a hook between actions and reducers this hook is implemented as a wrapper function around the actual reducer before the action is delegated to the actual reducer i checked what kind of action that is if it is an init or update action i try to get the state from the local storage in all other cases i delegate the action to the actual reducer store the result state into the local storage and return this new state this meta reducer must be added to the store config in the app module and just like that i can refresh my page and restore the state from before the refresh you

Channel: Genka

Views: 10,485

Keywords: ngrx/store, ngrx store, ngrx-store

Id: GSc1fHXVBGg

Length: 9min 0sec (540 seconds)

Published: Sun Sep 05 2021