How to Debug a React Context API App

Using the Redux DevTools extension

Bruno Sabot
Mar 17 · 3 min read
Photo by Barn Images on Unsplash.

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

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:

Simple Redux DevTools connection.

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

A basic Redux DevTools Provider.

If you add this piece of code at the very top of your application, you will see the startup session in the Redux DevTools that you can identify with the @@INIT event that pops in.

The INIT event that pops in.

Sending Events to the DevTools

Basically, it looks like this:

Simple Redux DevTools connection with a sent event.

Putting Everything Together

  • A hook to allow simple event sending to the DevTools session.
  • A Context API so the DevTools can be available in the whole project.
  • A simple sending method with default name values.

The usage is now pretty simple in the application. We need to call the useReduxDevtools hook we created in the Provider file to wrap the initial method into a high-order function that handles the debug session:

Look how useReduxDevtools is called on line 10.
And voilà, our Context API inside Redux DevTools!

Now when we are calling the setTheme method, it pops in the DevTools so you can inspect what is going on!


Conclusion

Also, let’s revisit something I said in my previous article about the Context API: It’s an easy API to use and can replace Redux in many cases, but keep in mind that Redux is much larger than the Context API. Choose wisely if you need to make the switch.

Better Programming

Advice for programmers.

Thanks to Zack Shapiro

Bruno Sabot

Written by

🚀Front Developer, React, VueJs, HTML, CSS, Performance, UX. 🏡 @ZenikaIT & @bdxio & @GDGBordeaux & brunosabot.dev

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade