React Context API: how to connect to redux devTools

Erwan Datin
Oct 14, 2018 · 3 min read

You may already have at least an experience of redux based state application development.

The new React Context API can now replace your redux state even in a huge complicated application.

Is it worth? It all depends on your judgment since this is specific to each application and developers working on it. Redux still rocks.

Using Context API

Context API offers more freedom. But freedom comes with more responsibilities.

Redux did a lot of things for you under the hood. But you didn’t have the choice of doing it an other way (surely 99.9% of the time you did not even need after all?!).

From personal taste and experience, I prefer using the Higher Order Components (HOC for the intimes) when implementing and using Context. Why:

  • it does not melt logic code and render code in jsx (I’m clearly not fan of rendering functions in jsx— except in rare cases where it makes sense like react-motion — )
  • your component is free to use context in its lifecycle events (you would not be able to when using consumer in jsx: I’m french, I love freedom 😉)

If you are not aware of the way to use Context API in HOC have a look in this article or this one.

The tradeoff of giving up redux in your development experience

Nearly everything you did in a redux based state application, is doable with Context API. The tradeoff is that you have more manual decisions to make than in redux.

But until recently I felt nearly like in despair to loose the most beautiful and lightning productive advantage: development experience with devTools!

If you used redux, great chance you used redux devTools extension in your browser to track and debug your state at ease.

Now with Context API no more devTools… 😭

Wait no more automatic devTools but this is not illegal to use it in non redux based application ✌️

Until the end of this week I was waiting for an article or a magic solution to give me back devTools even if I drop redux for Context API. But I dislike waiting…

So I found that it was dump easy (tradeoff is a bit of code) to use devTools in a non redux-based application. And this works even for a react or a react-native application!

What did (“automatically”) devTools for you?

devTools have an internal state that is a copy of your application state.

Its tracks actions and apply them the same way as your application does in its redux state. This way is simply “applying a reducer” over the state.

This is a really fast summarization of devTools (sorry to the author of devTools and maintainers if I’m too basic or even wrong in my explanations).

Help devTools to have a synchronized mirror state of all your contexts

Using Context API, you may “no more have a single source of truth” (= state) as in redux but “n contexts” so “n states” (lets call them substates being part of a “conceptually” single state).

1 First thing is to create a local unique state that will have a realtime synchronized snapshot of all your context states in the same place. This will be devTools state for you context API based application.

2 Create a reducer to explain devTools what actions and how to update the unique state. A reducer is just a function that uses Array.reduce over state and actions (like you see in redux).

3 Manually dispatch actions (no more redux based automatic dispatch to devTools) to devTools state (to keep it in sync with your application super state = merge of all your contexts state)

4 Init devTools at your application top level component component did mount

5 Disconnect devTools on component will unmount at your application top level component

See it in action:

A pure Context API state based application (from my personal boilerplate):

Erwan Datin

Written by

One foot in the present, the other in the future.

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