Angular 1.x Redux: Integrate ngRedux
Up to this point, we have created an effective, yet rudimentary, implementation of Redux by manually creating an application store, reducers and action creators. We have already made significant progress in simplifying state management within our application, but we have in fact only touched the surface of what Redux has to offer.
In this lesson, we are going to introduce ngRedux into our application and let it handle the rest of the heavy lifting as we work through this series. ngRedux is a project that provides angular bindings to redux to streamline integrating it into our application.
[00:00] Up to this point, we have created a rudimentary implementation of Redux by manually creating an application store, our reducers, and our action creators. We've already made significant progress in simplifying state management within our application, but we have, in fact, only touched the surface of what Redux has to offer.
[00:23] In this lesson, we are going to introduce ngRedux into our application and let it handle the rest of the heavy lifting as we work through series. NgRedux is essentially Angular bindings for Redux, and it allows us to streamline integrating Redux into our application.
[00:45] To get this working, the first thing we need to do is install some packages. We're going to go npm I for install -S for save, and then we're going to install Redux and ngRedux. Now that this is installed, we need to add this to our Angular application.
[01:08] The first thing that we need to do is to import this into our application. We'll delete store, and we're just going to import ngRedux from ng-redux. Then, we'll go down and add this as a dependency into our top-level module. Let's delete our version of the store. Instead, we're going to create a configuration block that we're going to initialize our store within ngRedux.
[01:46] We're going to create our configuration function, and we're going to pass in ngRedux provider, ngInject so that we have safe dependency injection.
[01:57] Then, we're going to call the createStoreWith method off of the ngRedux provider. We're going to send in our categories reducer, no middleware yet, no store enhancers, but we are going to pass in our initial state of initial categories.
[02:15] Now that we have our config block defined, let's go ahead and delete our store. We'll replace this with a config call on the module and pass in our config function.
[02:30] Now, let's hop into our categories controller and see what we need to do to swap out our store with the ngRedux store. The first thing we need to do is inject ngRedux. What else? We simply need to change our reference from our store to ngRedux, and that is it.
[02:55] Because we have a subscribe method, a dispatch method, and a getState method, we do not have to make any more changes in our code to make this work. It just works.
[03:06] We were able to write our store by hand and then, when the time was right, we just swapped it out with the ngRedux store, and everything works as we would expect without having to do any additional changes. Again, we're just injecting ngRedux. Because we've adhered to the store interface, if you will, then we have access to dispatch, getState, and subscribe.
[03:36] All of our actions and all of our reducers are going to work as expected because our action types have a type and a payload which is what Redux expects.
[03:48] Let's just do a quick review. We installed Redux and ngRedux. From there, we imported it into our main app file. Then we added it as a dependency into our application. Then we, using the ngRedux provider in a config block, created a new store, passing in our categories reducer and our initial categories as the initial state.
[04:19] From here, we then added this to a config block, and we were able to hop into our categories controller, inject ngRedux, and just swap out our store reference from our store to the ngRedux store.
[04:35] This is how you integrate ngRedux into your Angular application.