Member-only story
How to Debug a React Context API App
Using the Redux DevTools extension
For non-members, please click here to continue reading.
Some time ago, I shared how I dropped Redux for the Context API when I’m creating a React application. The article got some great feedback, but I also had some people saying that it’s pretty hard to debug compared to the Redux DevTools and asking me if there is an easy method to do it.
The answer is yes. Actually, if there is something awesome about Redux, it’s the DevTools. The great part is we can link them easily with our Redux-free app — and with everything we like, really.
Let’s now see how it works!
Redux DevTools API
When we have Redux DevTools installed, the extension automatically injects a special object (__REDUX_DEVTOOLS_EXTENSION__) in the window. A weird name for sure, but it prevents any conflicts with your existing code.
And that’s where everything starts: This object gives us everything we need — connect and disconnect methods that link our code with the Redux DevTools.
However, if you just try to run these functions, you will still see nothing in the DevTools because we first need to initiate the session.
To do so, we take advantage of the object that returns the connect method. It possesses an init method that launches the DevTools session.
Basically, it looks like this:
Even if this works, you will still see nothing in the DevTools because the session is closed as soon as we create it.
A DevTools Provider
To make the session permanent when you are developing your app, you will need a Provider, which looks like this:
