From the course: Angular State Management with NgRx

Actions with NgRx - Angular Tutorial

From the course: Angular State Management with NgRx

Start my 1-month free trial Buy for my team

Actions with NgRx

“

- [Instructor] So the first action I want to implement is the most obvious one. Add zip code. In order to do this, I'm going to rely on NgRx schematics once more. We go to our terminal and we run another command and generate action. And our action is going to be called ZipCode. And we add this option to group. And the same idea as before, when we use that group option, instead of creating multiple different files, which can get really complex very quickly, we have just one single file for each action. So let's run that command. So I'm being asked if I want to generate success and failure actions. I'm going to say no, no need to do that. These ones cannot really fail, so we'll go without that. And our new file is now created. So if we go to our IE, now have an actions folder with ZipCodes.actions.ts. And our schematics, we're able to create a group of actions with the CreateActionGroup function. And inside there's just one auto-generated action, Load ZipCodes. In our case, we need to add a zip code or remove one, and it's going to be one by one. So I'm just going to do some slight renaming here. Call this one Add ZipCode singular, and then add another one, which is going to be Remove ZipCode. Now you see that these two actions, they have a parameter called empty props, and that parameter is the payload of the action. It is the parameter that we pass to it to make things happen. So by default, of course, the tool generates empty payloads, empty parameters, but in our case, we know that we are going to have a parameter. And when we add a zip code, that parameter is going to be the zip code itself. So instead of emptyProps, we use a different syntax here, which is going to be props. So that's a function we have to import from NgRx. And in here we can define the shape of that object. And so the shape of that object is just going to be a zip code property of type string. And we'll do exactly the same thing for Remove ZipCode. We have to know which zip code we want to remove. So we add another prop with a parameter zip code of type string. And at that point we have our two zip code actions. They're properly defined and ready to be used.

Contents