Comparing 4 Ways to Debug Redux in an Expo app
What is the best way to debug redux functionality in an Expo app?
Today I will compare 4 options and present my pick.
Conclusion first,
Redux-logger is a logger middleware that console.logs what actions were fired and how the state changed with it.
There are no specific setup quirks for Expo. It just works as you may have used in React web.
The downside is, it is read only and you don’t get the full-blown functionality that you get from redux devtools extension.
Also, you need to npm i the redux-logger package per project.
Remote Redux DevTools is a desktop app version of the good old redux devtools extension that can be used with React Native.
The setup code is simple and it should be familiar if you come from the web.
However, it is not identical to the common web setup so read the docs.
Also, you need to npm i the package per project.
Most importantly, there exists a solution that covers this redux functionality and provides much more. Enter, React Native Debugger.
React Native Debugger is the holy grail of debugging React Native applications as it combines Chrome Devtools, React Devtools, and Redux Devtools all in one window.
Moreover, once you install the desktop app, you do not need any additional npm i, and setup code is completely identical to the web. It just works.
The biggest caveat is that its’ docs are bit confusing and you may encounter some issues in integrating it with Expo. My guide for setup aims to solve this.
4. Reactotron
Now the final option. Reactotron is a destktop app for inspecting React Native apps. Yes, it can be used not just for redux debugging but for many many more as presented here on the homepage.
However, our focus here is on debugging redux with ease, and in that specific aspect, I found some downsides.
First, the interface is different from the redux devtools and react devtools that we have all known and liked. So, there is a learning curve.
Second, not only the desktop app, but you also need to npm i multiple packages per project.
npm install — save-dev reactotron-react-native reactotron-redux reactotron-redux-saga
Thirdly, you need to write some amount of code for setup.
So, to conclude, my pick is, React Native Debugger. Since,
v.s. redux-logger: lacks functionality, additional dependency per project
v.s. Remote Redux Devtools: lacks functionality, additional dependency per project, additional code.
v.s. Reactotron: Unfamiliar interface, additional dependencies per project, additional code.
React Native Debugger provides the web folks familiar three stacks (Chorme, React, Redux devtools) with no additional dependency per project and minimum setup code. Use guide here.
Hoped you liked it! Connect with me on GitHub!
