Angular 1.x Redux: Create Reusable Actions with Action Creators
Manually creating action items every time we need to dispatch an action eventually accumulates to a very tedious process. In this lesson, we will learn how to abstract out the creation of action items so that we consolidate their creation into a single place. This not only creates efficiencies in how we express code but also reduces code volume while simultaneously increasing stability.
[00:00] In this lesson, we are going to learn how to create a better abstraction around how we create actions within our application. Currently we are manually creating an action object every single time that we want to dispatch an action. As you can see in our categories controller, we are creating the exact same object twice.
[00:22] Now this is a slightly contrived example, but it's not too far of a leap to see how this could happen in more realistic scenarios. It would be really handy if we could delegate the creation of all our action items to a single place, instead of having to create the same objects over and over.
[00:40] Well, this is exactly what an action creator does. It allows us to create a simplified API around creating the same action objects that we will need over and over within our application. To see how this works, let's hop into the category state file and start to build out a categories action creator.
[01:02] We'll create a new comment block just to break this up a little better. From here, we are going to export a categories actions function that is going to hold the methods that we're going to use to create our action items.
[01:21] The first method that we're going to create is getCategories. That is going to accept a categories parameter, it's going to return an action item with a type getCategories and a payload of categories.
[01:37] Let's go ahead and create another method to called selectCategory, that's going to accept a single category. It's going to, from there, return an action item that calls getCurrentCategory, and passes in the category as the payload.
[01:59] Within this factory method here, let's go ahead and return the getCategories method and selectCategory method as well.
[02:17] Now that we have our categories actions created, we need to make this available to our application. Let's go ahead and clean up this import statement. We're just going to import categories actions. We're going to hop down to the bottom of our module definition, and we're going to use the factory method to create a categories actions service that we can then inject into our categories controller.
[02:47] From here, we'll just go this.categoriesActions equals categoriesActions. We can delete this action item, and instead just call categoriesActions.getCategories. In this case, we do not need to send in a payload, so we'll just leave that empty.
[03:05] From here, let's replace this action item with a call to getCategories, but we're going to pass in this categories array here. We'll do same thing in the second method call here. We'll delete this action item, paste this in, update our constant to reference categories.
[03:26] Let's go ahead and do the on category selected one, as well. We'll call categoriesActions.selectCategory, and we're just going to pass in the current category parameter into our action creator.
[03:40] Let's hop into our browser, and you can see that everything is still working. We can even select our category, and it will keep track of that within the categories component.
[03:57] Let's do a quick review. We created essentially a categories actions factory that has two methods, getCategories and selectCategory that returns those within the revealing module pattern. Within our categories component here, we imported the categories action, added it to our Angular app via the factory method.
[04:24] We then injected it into our constructor. From there, we went through and replaced all of the times we were creating an action item with a call to categories actions service.
[04:37] This is just a handy way to simplify our code by using an action creator within our Angular application.