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

Getting Started with Redux Dev Tools

Getting Started with Redux Dev Tools

6:04
The Redux DevTools let us wire up our Redux app to a time-traveling debugger. This can help us debug, test, and review the state of our application in a simple history that can be "bookmarked" and scrubbed through. In this lesson, we wire up the Redux DevTools into our app, and walk through the different "monitors" and options available. More information can be found on the official Redux DevTools GitHub page: https://github.com/gaearon/redux-devtools
Watch this lesson now
Avatar
egghead.io

The Redux DevTools let us wire up our Redux app to a time-traveling debugger. This can help us debug, test, and review the state of our application in a simple history that can be "bookmarked" and scrubbed through. In this lesson, we wire up the Redux DevTools into our app, and walk through the different "monitors" and options available.

More information can be found on the official Redux DevTools GitHub page: https://github.com/gaearon/redux-devtools

Avatar
Gil

Hi Trevor,
I saw your video of Redux Dev Tools and I have two questions:
1. We are using Rxjs and React and we have a combined store - how can I connect to these great devtools ?
2. What is your Vim color scheme - its beautiful!

Thanks upfront,
Gil.

In reply to egghead.io
Avatar
Trevor

Hi Gil,

I use the Base16 ocean color scheme in Vim: https://github.com/chriskempson/base16-vim/blob/master/colors/base16-ocean.vim

As for the using a combined store with RxJS and Redux - I have no idea! I don't use RxJS. However, we have some very talented RxJS instructors on the Egghead team; I'll see if they can respond to this question.

In reply to Gil
Avatar
Daniel

Hi - easy useful tutorial!

Firstly a little tip for anyone trying isomorphic apps an extra check for window prevents it from crashing when trying to run the code server side:

(typeof window !== 'undefined') && window.devToolsExtension ? window.devToolsExtension() : f => f

Second a question - is there a good way of modifying the state tree? i.e. I want to modify the value of a certain key in the appState. As you can imagine, this is particularly useful when debugging or writing edge cases e.g. invalid/expired access token in the app state

In reply to egghead.io
Avatar
Trevor

Daniel,

Good tip, thanks. As for manually modifying the state tree - I am not aware of a way to do this with Redux Dev Tools. In the past, I have manually set up an initial state object in my code as well as unit tests to test specific state edge cases. You can see an example using unit tests in this way in the "React Testing: The Redux Store - Multiple Actions" Egghead lesson: https://egghead.io/lessons/react-testing-the-redux-store-multiple-actions

These lessons might be of interest as well:
- https://egghead.io/lessons/react-testing-the-redux-store-initial-state
- https://egghead.io/lessons/react-testing-redux-reducers

It would be cool to be able to modify the state tree manually in Redux Dev Tools though!

In reply to Daniel
Avatar
J

How do you use this with applyMiddleware and redux?

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?