Angular 1.x Redux: Handle State Mutations with Reducers

[00:00] In this lesson, we are going to learn how to abstract out state mutations into a reducer. In our current Angular application, all of our category state and business logic is handled within the category's model. We are going to refactor our code to entirely eliminate the need for our categories model by building out a couple reducers, and seeing how we can interact with them directly.

[00:21] The one thing that I want us to notice as we build out our reducers is that a reducer itself is completely stateless because it receives current state every single time it needs to calculate and return new state. With this clearly defined contract of inputs and outputs, this makes testing reducers really easy, which is one of the huge benefits of using this approach.

[00:44] To get started, let's create a categories.state file that's going to hold our initial reducer that we're going to build out. Let's start with a categories reducer. We'll give it an initial state of an empty array, and an initial category or action type of get categories.

[01:06] We're going to just copy this, and we'll export this as a constant so that we can reference this action type in other places within the application. Let's just create a few comment blocks to separate our code, making it easier to read.

[01:23] Once we have this in place, let's step through our reducer, and see what's going on. Within our categories reducer, it takes two parameters, as all reducers do. It takes the current state as the first parameter, and then an action object as the second parameter that has a type that we use a switch statement to then determine what is the next action we want to take, based on the action type.

[01:54] In this case, with get categories, we're just going to return whatever we pass in. If we do not pass anything in, we just return state, just as we'll return state if there's an action type it doesn't recognize. Let's go ahead and use this.

[02:09] By hopping into our categories.js file, we're going to import our categories reducer as well as our get categories action constant. Once we have these imported, we can hop down to our on init method, and remove this call to the categories model.

[02:29] We're going to replace this with a call to the categories reducer. The first thing we're going to do to set this up is define an initial categories collection. We'll give it a single category of hello reducer. From here, we're going to set this.categories by calling the categories reducer, and passing in the state of initial categories.

[02:57] We'll send in an action object with a type of get categories, without a payload.

[03:07] Let's hop into the browser, and see what happens when this loads. You can see that we have this hello reducer category item as our only item within our categories collection that we're binded to.

[03:21] Let's go ahead and abstract out this initial categories collection, and move it closer to the reducer. We'll just export this. Let's replace this single categories object here with a collection that is closer to what we're used to working with.

[03:41] We'll set our initial to initial categories. From here, we can delete this, and just put in undefined. Let's go back to the browser, and you can see now that it is loading our initial categories, which is development, design, exercise, and humor.

[04:04] Let's make a few more calls to our categories reducer. To make this a little easier to visualize, we're going to import the timeout service. We'll assign this to a local timeout property. From here, let's make a call to the timeout service.

[04:25] We'll pass in the initial function, and we're going to define a payload object with a new collection of categories. We'll give the first one a name of redux, and then let's create another category item. We'll give it a name of angular.

[04:45] From here, let's go ahead and update the categories collection by calling the categories reducer. We're going to pass in the current state of this.categories. We'll create an action type of get categories, and we're just going to pass in the payload object. We'll set this to fire in three seconds.

[05:06] Back to the browser. Let's refresh the page. One, two, three, there we go. We've updated our categories collection by calling the categories reducer. Now you'll notice here that when we call categories, we're passing in a payload, which then it just returns the payload because we have defined it.

[05:28] If we define an action type that it doesn't understand, it's just going to return state, basically performing a no operation, if you will. Let's just copy this block of code here, and we'll simulate what happens when we do that.

[05:48] Let's create or update our payload collection to just have a single category of uh-oh. We'll create an action type that it's not going to recognize, which is get categories! We'll set this to fire at six seconds.

[06:05] Refresh the page, one, two, three. One, two, wait for it, and nothing happens. Let's hop back into our code. Let's update the action type one more time. Back to the browser, and one, two, three. One, two, three, and there we have it.

[06:30] What we want to do is replace this call to the get current category on the categories model with another reducer. We're going to create a reducer called category, give it an initial state of an empty object, and an initial type of get current category.

[06:48] We'll copy this. We will define another action type constant. If we look at our reducer, it's very similar to the one above. It just returns the payload if it exists, or the initial state if it does not. Let's go ahead and import the category reducer, as well as our action constant.

[07:13] We'll go down to, on category selected. Because it's a category reducer, we're going to update this parameter so it doesn't collide. We're now going to set this current category equals the call to the category reducer sending in this.currentcategory, which initially, it'll be undefined.

[07:35] We'll give it an action type of get current category, and a payload of current category. Because we're setting this directly in the categories controller, we can just get rid of this call here, as well as this call.

[07:55] We can get rid of the categories model entirely, so mission accomplished here. Let's comment this out, so it's a little easier to visualize as selecting the category. As we click through here, we can see that, within the component itself, we are keeping track of the current category.

[08:22] Let's hop back into our code. We will uncomment this, and let's do a quick review of the reducers that we have created. We have our categories reducer, with a state of initial categories to start out with. We are passing in an action object that has a type and a payload property.

[08:46] Based on the type, then we use that to determine what action we're going to take. We have the same thing with our category reducer. We've defined our action constants here, so we're not dealing directly with strings.

[09:00] That allows us to import not only our reducers, but our action constants that we are then using to set this.categories within our categories controller. We're calling this.categories equals the result of whatever the categories reducer is.

[09:22] The method for that every single time is we're passing in a state and an action item that may or may not have a payload object on it. We did the same thing with current category by calling the category reducer, and sending in the current category state, and a get current category action item, with a payload of current category.

[09:43] This is how we use a reducer to manage state within an Angular application.