Debugging flux applications for web and React Native

“ Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it. ” — Brian Kernighan

Flux architectures impose your data to flow in one direction, that makes your app state predictable, and easy to debug with time travelling and reproducing the exact state. Here we’ll analyze practical tools to accomplish that.

Redux DevTools

Dan Abramov’s Redux DevTools together with composable monitors let you ship your app together with fantastic tools for debugging. You may toggle actions in your history tree, deeply browse your states, slide between different recorded actions, visualize the app store in real time, filter actions. And it’s extremely easy to create your custom monitors.

Redux DevTools Extension

Even though it’s great to ship a React app with DevTools included, I built Chrome Redux DevTools Extension, which turns out to be handy enough for a lot of cases, you strip a lot of boilerplate, replacing with only 1 line of code, and it can be used even in production without any drawbacks.

I’ve implemented monitoring views for any taste and requirement:

The extension is deeply configurable:

It notifies when an error occurs. If it comes from a reducer, it shows which action caused that:

Also there are lots of features coming in 1.0.

Remote Redux DevTools

OK! So what about React Native?

It would be quite cumbersome to include the monitor directly in a React Native or even hybrid application, at least because we’ll have to switch between views. The solution is Remote Redux DevTools.

A signifiant feature I’ve implemented there is that the monitor can stick an instance or synchronize all other instances according to the actions in the selected one (like in the demo above). So you can monitor states changes simultaneously on all devices and emulators.

You can open the monitor in the browser, as a chrome app or install the electron app. The source code of the app is also open-sourced.

In order to make it simple to implement, by default, it uses remotedev.io as a bridge between your app and the monitor. Use remotedev-server cli to run it locally in order to make the connection faster and not to require an internet connection.

Stop! You said flux! I see Redux only…

I’ve just released a solution for any flux architecture — RemoteDev.

See the examples for different flux implementation.

It intends to be used with any flux architecture for web, React Native, hybrid, desktop, server side and universal apps. I use the same Redux DevTools app and the bridge as in the implementation above, but as it tends to be universal and efficient for being included in production, it has only time travelling.

To be continued…