Angular 1.x Redux: Integrate Redux Devtools
In this lesson, we are going to learn how to integrate Redux Devtools into our Angular application.
Redux Devtools is a live-editing time travel environment for Redux. Devtools boasts a list of awesome features but my two favorite ones are that we can inspect every state and action as it happens and we can go back in time by “cancelling” actions.
This is going to be an interesting lesson because, in order for this to work, we are going to need to make something that was written for React work in Angular. For the most part, everything will play side by side with one small trick that we will pull off at the end to force an Angular digest cycle when React manipulates the application store.
[00:00] In this lesson, we are going to learn how to integrate Redux DevTools into our Angular application. Redux DevTools is a live editing time travel environment for Redux.
[00:13] There are a list of really awesome features with this library, but my two favorite ones are the ability to inspect every state and action payload as it comes through our reducers, as well as we have the ability to go back in time by canceling actions.
[00:32] This is going to be an interesting lesson, because in order for this to work we are going to need to make something that was written for React work in Angular. For the most part, everything will play side-by-side, with one small trick that we'll pull off at the end to force an Angular digest cycle when React manipulates the application store.
[00:53] The first thing that we need to do to enable our integration is to install some MPM packages. Let's open up the terminal and we're going to go MPM install, save, and we're going to install React, React DOM, Redux DevTools. Let's break this to a new line because this is a little bit lengthy, Redux DevTools dock monitor and then we're going to do Redux DevTools log monitor.
[01:24] We'll go ahead and install these packages. Now that these are installed, let's hop onto our Neville RC file real quick. We're going to update this to not only use ES2015 but React so that it can compile properly. Let's go ahead and import our packages, so we're going to import React and Component from React.
[01:55] Let's import React DOM from React DOM. We'll go ahead and do create DevTools from Redux DevTools. From here we're going to import the log monitor and the dock monitor. The log monitor is what we actually will use to visualize the state moving through our reducers, and the dock monitor is the component that we used to actually pull this into our application so that we can see it.
[02:37] We need to initialize or create our DevTool component. We're going to call create DevTools, and we're going to start out by defining our dock monitor with a toggle visibility key. In this case, let's go with control-H. We'll also set our change position key.
[03:00] This is the component that we'll use to visualize the DevTools in our view once we spin this up. We're going to set this default is visible to false. Within here, we will go ahead and add in the log monitor with a theme of tomorrow. Using this dock monitor, log monitor combination is the officially recommended base configuration. Let's go ahead and clean this up.
[03:36] From here, let's create a run block. We need to render our DevTools component within our Angular application. We'll do this within the run block. We're going to inject ng-redux. From here we're going to use React DOM to render our DevTools component. We're going to pass in ng-redux as our store.
[04:07] From here we're going to set our container to document get element by ID, and we're going to set this to DevTools. We'll create this element in a moment. One other thing we need to do is add in a store enhancer to our create store with method call. We're going to call the instrument method on our DevTools. What this does is it basically enhances our application store to work with DevTools.
[04:41] We're going to add in our run block using the run method.
[04:45] Let's create a DIV with an ID of DevTools. This is going to allow us to drop in our DevTools component. From here let's hop into the browser and make sure that everything is working.
[04:59] We'll refresh. Control H. You can see here that the DevTools are showing up, but when we select a particular action, nothing works until we select something else in the Angular application. The reason being is that our React component is changing the store and Angular doesn't know what to do.
[05:20] What we're going to do is we're going to monkey-patch this component did-update-method on our DevTools component or rather our dock monitor component. What we're going to do is store a reference to the original dock monitor component did-update-method that we're going to need in just a moment.
[05:45] From here we're going to overwrite it with a new method. I apologize to all my React friends that we may get into a fist fight later for doing this, but what we're doing is assigning this a new function that every time this is called, we are forcing a digest cycle by calling it rootScope.evalAsync. We're also adding this into our parameter so that it gets injected.
[06:12] We're checking to make sure that we do have a component did-update-method. Then from there we're calling apply this and passing it arguments. We're calling this as if we would have we not put this little monkey-patch in there.
[06:28] Let's hop onto the browser and see what our new and improved component did-update-method is going to do for us. We'll refresh. Control H. You'll notice here when we select get bookmarks, that it cancels out that action and get categories as well.
[06:47] We can step backwards and forwards by enabling these actions that we've dispatched as well as we select categories. We can go down. We can see these being handled and displayed in our log monitor. We can actually step back in time and undo these actions. This is really handy for stepping through a set of actions forwards and backwards.
[07:14] Let's also create a bookmark, and so we'll create a new bookmark. You can see there is the action coming through and we can undo it or redo it as if it never happened, or if we want to replay it. This is what we mean by time travel. It allows us to dispatch an action, and because our reducers are stateless, it's really easy to undo them with new actions.
[07:38] Let's do a review. We installed these MPM packages. From there, we imported them into our main application files, so React, React DOM, create DevTools, which we then used to create our DevTools component, which we used our log monitor and the dock monitor, which is the recommended default configuration.
[08:03] From there we created a run block to render our DevTools component, and we overwrote the component did-update-method. We instantiated that into our DevTools DIV on our main application file, and we enhanced our store with DevTools.instrument, and then tied everything together with the run block.
[08:28] The main piece that I want to call out here is because we have a React component and an Angular component. We slightly modified the component did-update-method so that when we do something within our DevTools, that Angular kicks off a digest cycle and knows about it. This is how you integrate React DevTools into an Angular application.