What are options to debug a React Native + Redux app?

Question

I have been researching options to debug a React Native + Redux app. Especially the redux part. What is your preferred way to do this? Hope to know!

Answer 1

I use React Native Debugger as stand-alone-version for this. It is able to show the full history of redux-state changes and give you some handy tools like Raw-View, Chart-View or Diff-View. And you don't have to add anything in your App-Code (like for Reactotron).

It looks like this:

To activate the Redux-Panel, you only do a right-click at the Debugger window and choose Toggle redux devtools.

Answer 2

Thank you all for the recommendations, I tried out the four options! I even wrote a medium article on this topic.

My conclusion, Use React Native Debugger. (Guide to setup)

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.

Answer 3

I normally use DevTools, but that's a Chrome extension and not for Simulator. Perhaps you can look into remote monitoring with it: https://github.com/zalmoxisus/remote-redux-devtools I believe you would be able to set this up to monitor Store interactions in Simulator remotely.

Edit: Yes it actually is meant for React Native after reading more of the README. I would use this for sure.

Answer 4

There are multiple tools are beneficial for developers when dealing with redux, and out of all of em, I highly recommend using both below

Reactotron:

- view your application state
- show API requests & responses
- perform quick performance benchmarks
- subscribe to parts of your application state
- display messages similar to console.log
- track global errors with source-mapped stack traces including saga stack - traces!
- dispatch actions like a government-run mind control experiment
- hot swap your app's state using Redux or mobx-state-tree
- track your sagas
- show image overlay in React Native
- track your Async Storage in React Native

Redux-logger:

It helps to show you the previous state, current action payload and next state whenever we dispatch a redux action, which you should see how it's benefiting us