The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Angular 1.x Redux: Integrate Redux Devtools

Angular 1.x Redux: Integrate Redux Devtools

8:52
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.
Watch this lesson now
Avatar
egghead.io

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.

Avatar
Redian

Nice Work Lucas.

Probably worth mentioning that on min 1.40 when you add react to the

{
  "presets": ["es2015", "react"]
}

presets parameters on the .babelrc file, there is need to run :
npm install --save-dev babel-preset-react in order for the build to work.

I know you have added that as a dependency on the package.json file in branch 12-redux-devtools but someone like me who just followed the tutorial and tried to keep up could get confused a little.

Thanks for the video, great work.
R

In reply to egghead.io
Avatar
Lukas

Thanks for pointing that out! Do what Redian says :D

In reply to Redian
Avatar
Marcin

It sounds a bit hacky and bad practice to add whole React stack to your production build.
It would be nice to mention how to add the DevTools and whole stack conditionally only on DEV environment.

In reply to Lukas
Avatar
Matti LeBlanc

I was following the tutorial (really enjoyed it!!) in my own webpack Angular-gulp starter kit (fountainJs) using Typescript and I was able to implement all code fine until I hit the react integration for the devtools.
My compiler was having some trouble and I figured I had to create a tsx file instead of a ts file for the component having the jsx code.
But I am not sure if you can mix TS and TSX files in one project. Probably not.
Any thoughts?

In reply to Redian
Avatar
Lukas

Hi Matti,
Glad you're enjoying the tutorial! You should be able to use regular TS files alongside TSX files. Take a look at this simple react example: https://github.com/Quramy/tsc-react-example. Of particular interest is the tsconfig.json file, which sets the jsx compiler option to true. This should be the ticket for TS and TSX files co-existing.

In reply to Matti LeBlanc
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?