Angular 1.x Redux: Introduction

Angular 1.x Redux: Handle State Mutations with Reducers

Angular 1.x Redux: Persist State with an Application Store

Angular 1.x Redux: Subscribe to the Application Store

Angular 1.x Redux: Create Reusable Actions with Action Creators

Angular 1.x Redux: Integrate ngRedux

Angular 1.x Redux: Handle Multiple Models by Combining Reducers

Angular 1.x Redux: Put It All Together

Angular 1.x Redux: Avoid State Mutation with Immutable Operations

Angular 1.x Redux: Map State and Dispatchers to Redux

Angular 1.x Redux: Handle Asynchronous Operations with Middleware

Angular 1.x Redux: Test Reducers

Angular 1.x Redux: Integrate Redux Devtools

Build Angular 1.x Apps with Redux

In this lesson, we are going are going to apply everything that we have learned by building out our bookmarks component to be powered by Redux. This will help reinforce all the techniques we have covered by seeing them built out  in a single, contiguous lesson.

We will walk through the steps necessary to phase out the bookmarks model with a Redux implementation that includes building and integrating the equivalent reducers and action creators to integrate into our application.

[00:00] In this lesson, we are going to take a few minutes to review what we have covered up to this point by taking everything that we've learned, and applying it to the bookmarks component.

[00:11] We are not going to be introducing any new concepts, but rather reinforcing what we've already covered, while allowing us to build out our application incrementally, while avoiding any major leaps in the narrative arc.

[00:25] Let's get started by creating our bookmark.state file. The first thing we're going to do is create our bookmarks reducer. We're going to give it an initial state of initial bookmarks, and we'll start with an initial action type of get bookmarks.

[00:50] Let's go ahead and build out the initial bookmarks collection. We're just going to pull this from the bookmarks model. We'll copy that, paste it in. From here, let's go ahead and define our constant for get bookmarks.

[01:08] We'll just break this code up with a few comment blocks real quick. From here, export constant get bookmarks. Now that we have our reducer created, let's go ahead and add it to our application. We're going to import the bookmarks reducer.

[01:36] We'll add it to our combined reducers call so that it is available to the store. Let's hop into the bookmarks file. We are going to get rid of this call to the model because we no longer need that. We'll update our subscribe function to include a get state call to grab the bookmarks. We'll assign that to this.bookmarks.

[02:02] From here, let's go ahead and call dispatch on the store to get our bookmarks. We'll go type, and we'll just do this as a string for now. We'll replace it with a call to the action creator in just a moment. Let's refresh the page.

[02:19] You can see that we are still getting our bookmarks. Let's hop into our state file, and let's build out our action creator. We're going to call this bookmark actions. We want to start with a get bookmarks function.

[02:45] That's going to accept a bookmarks parameter. From here, we are going to return an action of type get bookmarks with the payload of the bookmarks that we are sending in. Because this is using the revealing module pattern, we're just going to return the get bookmarks method in our return object.

[03:08] From here, we're going to import it into our bookmarks file. We're going to go down to our module definition, and we're going to add this using the factory method. Now that it is available to our Angular application, let's go ahead and inject it into the bookmarks controller.

[03:33] This.bookmarks action equals this.bookmarks actions. We can replace this handcrafted action item with a call to the action creator, in this case this.bookmarksactions.getbookmarks. Let's refresh the page, and everything is still working.

[03:56] Now we've created a reducer and an action creator to handle the bookmarks collection. Now we need to create a reducer to handle the individual bookmark that we have selected. We'll start by creating a bookmark reducer with an initial state of initial bookmark.

[04:15] We'll start with an initial action type of get selected bookmark. Let's go ahead and define our initial bookmark. This is just going to be, for the most part, just a blank bookmark. ID of null, name is an empty string, URL is an empty string, and category is null.

[04:40] From here, let's go up and define our action constant. Let's go ahead and create one more, since we're here. We're going to call this action constant reset selected bookmark. What this is going to be for is if we want to just clear the decks, and start with this blank bookmark.

[05:05] We're just going to return initial bookmark when this action comes through the reducer. Now we need to expose these via our actions creator. We'll start with reset selected bookmark. All this is going to do is just return an action with type reset selected bookmark. This is fairly simple.

[05:28] Let's go ahead and add it to our return object. Let's build out the select bookmark method. We need to do a couple things here for this to work. The first thing we need to do is inject into Redux so that we can pull the category off of the store.

[05:52] We'll do NG inject so that gets injected properly. Then we'll define our select bookmark method that takes a bookmark parameter. We're going to return a type of get selected bookmark, and a payload object.

[06:13] Using destructuring, we're going to pull the category off of the return object from get state. This is just a handy shortcut for doing that. In our payload object, we're going to check and see are we working with a new bookmark, or an existing bookmark?

[06:40] We see is there an ID? If there is, just return the bookmark. If not, we're going to create a new object that's going to take the bookmark that we have, and we're going to go ahead and pre-fill the category property with the currently selected category from the store.

[07:01] We're also going to set the bookmark to have initial type of initial bookmark if we do not pass anything in. This is the default value if we do not pass this in. Let's add this to our return object here. Let's go ahead and add in the bookmark reducer, and make this available to our store. We'll add this into our combined reducers call.

[07:35] Now we can hop into our bookmarks, and let's get rid of the bookmarks model. We no longer need that, so we can delete this line here. We'll delete this line here, and let's mark sure to subscribe to the bookmark object on the store. This.currentbookmark equals this.store.getstatebookmark.

[07:57] You'll notice here the create bookmark, edit bookmark methods really deal with bookmark selection, which we no longer need. Let's delete these three methods here. They're being handled by our reducer and our action creator.

[08:17] We're just going to make this an empty method for now. We're going to also define a delete bookmark method. We'll leave this empty as well. We'll get to that in another lesson. From here, let's build out our select bookmark method.

[08:31] Select bookmark, it takes a bookmark, and all it's going to do is dispatch an action to be picked up by the reducer. This store.dispatch, bookmark actions, select bookmark. We're going to pass in the bookmark parameter.

[08:55] Let's go ahead and also build out our reset selected bookmark method. All this is going to do is call this.store.dispatch, and this.bookmarks reset selected bookmark.

[09:18] Now that we have defined reset selected bookmark, let's update this call here. We can also delete the method below. We've just defined a select bookmark method that calls select bookmark on our bookmarks actions, and then a reset selected bookmark that calls reset selected bookmark on our actions as well.

[09:39] Essentially what we've done is just updated the way that we are selecting a bookmark in our application, but we need to update our template. When we want to edit a bookmark, we just select that bookmark, and send it into our action creator to be handled.

[09:58] As well as when we want to create a bookmark, we're going to also call select bookmark, but we're not going to call anything. Because there's always some form of a bookmark, we need to update these conditions here to actually check to see if there is a category on that object.

[10:15] We'll also update our call to the reset selected bookmark. Let's hop into our browser, and see if everything is working. Refresh the page, and you can see that we can select a category. From here, we can select a bookmark for editing. We can cancel as well as select a new bookmark to create.

[10:45] Let's hop back into the code, and do a quick review over what we've built out thus far. We have created a bookmarks reducer that sets the initial state to this initial bookmarks collection.

[11:01] We're accessing it via an action type of get bookmarks. We've also created a bookmark reducer that takes an initial bookmark for its initial state that we are accessing via get selected bookmark. We're also enabling the user to reset the selected bookmark using the action type reset selected bookmark.

[11:27] From here, we created our bookmarks actions, which just streamlines the creation of our action items. Get bookmarks takes a bookmarks parameter, and then returns an action object with a type of get bookmarks and the payload of bookmarks.

[11:41] Reset selected bookmark just returns an action object with a type of reset selected bookmark. More importantly, select bookmark allows us to send in a bookmark, and from there, we determine does it have an ID or not?

[11:58] If it does have an ID, it's an existing bookmark that we want to edit. If not, we need to essentially assume that it is a blank bookmark or an initial bookmark, but we're going to pre-populate the category property by getting the category object off of the application store.

[12:20] We imported the bookmarks and bookmark reducer into our main application file, and then added them to the application store by adding them as parameters to our combined reducers method call. Within the bookmarks file itself, in the controller, we got rid of bookmarks model.

[12:41] We replaced that with bookmarks action. We updated our subscribe method to not only pull in current category, but the bookmarks, and the current bookmark. Then we are getting all of our bookmarks by calling this store.dispatch and bookmarkactions.getbookmarks.

[12:57] We just stubbed out save bookmark and delete bookmark, which we'll fill in in another lesson. From select bookmark, we are just passing that into the actions creator. Reset selected bookmark, same thing.

[13:11] We updated our on save method to call reset selected bookmark. From here, because of how we are handling selection now, we needed to update the template so that when we want to edit a bookmark, we're just calling select bookmark, and we're handing it off to the action creator for processing.

[13:34] We're doing the same thing when we want to create a bookmark. We're just calling select bookmark, but then we are using that initial bookmark default parameter to set that. Because there's always some form of a current bookmark, we need to not just check if the bookmark exists, but does it have a category name?

[13:53] This is a review over everything we've covered up to this point, as applied to the bookmarks component, in terms of the bookmarks and bookmark reducers, the actions creator, and how we integrate it into our Angular application.

Course

Build Angular 1.x Apps with Redux

Angular 1.x Redux: Put It All Together

Share this video with your friends