What are options to debug a React Native + Redux app?What is the difference between using constructor vs getInitialState in React / React Native?What's the '@' (at symbol) in the Redux @connect decorator?What is the difference between React Native and React?How to show a loading indicator in React Redux app while fetching the data?What is the difference between redux-thunk and redux-promise?How to use react j s components in react native app?Understanding React-Redux and mapStateToProps()React Native + ReduxWhat is the difference between Hot Reloading and Live Reloading in React Native?Adding Redux to React-Native App?

Why is an old chain unsafe?

Banach space and Hilbert space topology

whey we use polarized capacitor?

How to type dʒ symbol (IPA) on Mac?

How to report a triplet of septets in NMR tabulation?

Concept of linear mappings are confusing me

Why doesn't Newton's third law mean a person bounces back to where they started when they hit the ground?

Do airline pilots ever risk not hearing communication directed to them specifically, from traffic controllers?

Accidentally leaked the solution to an assignment, what to do now? (I'm the prof)

Should I join an office cleaning event for free?

New order #4: World

Why is "Reports" in sentence down without "The"

Schwarzchild Radius of the Universe

Could a US political party gain complete control over the government by removing checks & balances?

The use of multiple foreign keys on same column in SQL Server

A function which translates a sentence to title-case

Why CLRS example on residual networks does not follows its formula?

Why is this code 6.5x slower with optimizations enabled?

How is this relation reflexive?

How can the DM most effectively choose 1 out of an odd number of players to be targeted by an attack or effect?

Download, install and reboot computer at night if needed

How to make payment on the internet without leaving a money trail?

How do we improve the relationship with a client software team that performs poorly and is becoming less collaborative?

Email Account under attack (really) - anything I can do?



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


What is the difference between using constructor vs getInitialState in React / React Native?What's the '@' (at symbol) in the Redux @connect decorator?What is the difference between React Native and React?How to show a loading indicator in React Redux app while fetching the data?What is the difference between redux-thunk and redux-promise?How to use react j s components in react native app?Understanding React-Redux and mapStateToProps()React Native + ReduxWhat is the difference between Hot Reloading and Live Reloading in React Native?Adding Redux to React-Native App?






.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;








3















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!










share|improve this question




























    3















    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!










    share|improve this question
























      3












      3








      3








      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!










      share|improve this 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!







      reactjs react-native redux






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Mar 22 at 1:00









      Tetsuya3850Tetsuya3850

      399210




      399210






















          4 Answers
          4






          active

          oldest

          votes


















          4














          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:



          enter image description here



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






          share|improve this answer

























          • Agree! I wrote a guide to setup React Native Debugger! medium.com/@tetsuyahasegawa/…

            – Tetsuya3850
            Mar 24 at 1:03


















          2














          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.






          share|improve this answer























          • For on the spot solution Remote Redux devtools was indeed a good option! Thanks.

            – Tetsuya3850
            Mar 24 at 0:56



















          2














          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






          share|improve this answer























          • Reactotron did have many cool funcs! I loved how lightweight redux-logger solution is. Thank you!

            – Tetsuya3850
            Mar 24 at 0:58


















          1














          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.






          share|improve this answer























            Your Answer






            StackExchange.ifUsing("editor", function ()
            StackExchange.using("externalEditor", function ()
            StackExchange.using("snippets", function ()
            StackExchange.snippets.init();
            );
            );
            , "code-snippets");

            StackExchange.ready(function()
            var channelOptions =
            tags: "".split(" "),
            id: "1"
            ;
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function()
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled)
            StackExchange.using("snippets", function()
            createEditor();
            );

            else
            createEditor();

            );

            function createEditor()
            StackExchange.prepareEditor(
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader:
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            ,
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            );



            );













            draft saved

            draft discarded


















            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55291412%2fwhat-are-options-to-debug-a-react-native-redux-app%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown

























            4 Answers
            4






            active

            oldest

            votes








            4 Answers
            4






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            4














            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:



            enter image description here



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






            share|improve this answer

























            • Agree! I wrote a guide to setup React Native Debugger! medium.com/@tetsuyahasegawa/…

              – Tetsuya3850
              Mar 24 at 1:03















            4














            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:



            enter image description here



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






            share|improve this answer

























            • Agree! I wrote a guide to setup React Native Debugger! medium.com/@tetsuyahasegawa/…

              – Tetsuya3850
              Mar 24 at 1:03













            4












            4








            4







            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:



            enter image description here



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






            share|improve this answer















            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:



            enter image description here



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







            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited Mar 23 at 12:12

























            answered Mar 22 at 5:15









            suthersuther

            3,68812352




            3,68812352












            • Agree! I wrote a guide to setup React Native Debugger! medium.com/@tetsuyahasegawa/…

              – Tetsuya3850
              Mar 24 at 1:03

















            • Agree! I wrote a guide to setup React Native Debugger! medium.com/@tetsuyahasegawa/…

              – Tetsuya3850
              Mar 24 at 1:03
















            Agree! I wrote a guide to setup React Native Debugger! medium.com/@tetsuyahasegawa/…

            – Tetsuya3850
            Mar 24 at 1:03





            Agree! I wrote a guide to setup React Native Debugger! medium.com/@tetsuyahasegawa/…

            – Tetsuya3850
            Mar 24 at 1:03













            2














            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.






            share|improve this answer























            • For on the spot solution Remote Redux devtools was indeed a good option! Thanks.

              – Tetsuya3850
              Mar 24 at 0:56
















            2














            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.






            share|improve this answer























            • For on the spot solution Remote Redux devtools was indeed a good option! Thanks.

              – Tetsuya3850
              Mar 24 at 0:56














            2












            2








            2







            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.






            share|improve this answer













            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.







            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Mar 22 at 1:36









            xiiishaneiiixxiiishaneiiix

            416211




            416211












            • For on the spot solution Remote Redux devtools was indeed a good option! Thanks.

              – Tetsuya3850
              Mar 24 at 0:56


















            • For on the spot solution Remote Redux devtools was indeed a good option! Thanks.

              – Tetsuya3850
              Mar 24 at 0:56

















            For on the spot solution Remote Redux devtools was indeed a good option! Thanks.

            – Tetsuya3850
            Mar 24 at 0:56






            For on the spot solution Remote Redux devtools was indeed a good option! Thanks.

            – Tetsuya3850
            Mar 24 at 0:56












            2














            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






            share|improve this answer























            • Reactotron did have many cool funcs! I loved how lightweight redux-logger solution is. Thank you!

              – Tetsuya3850
              Mar 24 at 0:58















            2














            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






            share|improve this answer























            • Reactotron did have many cool funcs! I loved how lightweight redux-logger solution is. Thank you!

              – Tetsuya3850
              Mar 24 at 0:58













            2












            2








            2







            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






            share|improve this answer













            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







            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Mar 22 at 1:45









            IsaacIsaac

            3,7672830




            3,7672830












            • Reactotron did have many cool funcs! I loved how lightweight redux-logger solution is. Thank you!

              – Tetsuya3850
              Mar 24 at 0:58

















            • Reactotron did have many cool funcs! I loved how lightweight redux-logger solution is. Thank you!

              – Tetsuya3850
              Mar 24 at 0:58
















            Reactotron did have many cool funcs! I loved how lightweight redux-logger solution is. Thank you!

            – Tetsuya3850
            Mar 24 at 0:58





            Reactotron did have many cool funcs! I loved how lightweight redux-logger solution is. Thank you!

            – Tetsuya3850
            Mar 24 at 0:58











            1














            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.






            share|improve this answer



























              1














              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.






              share|improve this answer

























                1












                1








                1







                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.






                share|improve this answer













                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.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Mar 24 at 0:55









                Tetsuya3850Tetsuya3850

                399210




                399210



























                    draft saved

                    draft discarded
















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid


                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.

                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55291412%2fwhat-are-options-to-debug-a-react-native-redux-app%23new-answer', 'question_page');

                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Kamusi Yaliyomo Aina za kamusi | Muundo wa kamusi | Faida za kamusi | Dhima ya picha katika kamusi | Marejeo | Tazama pia | Viungo vya nje | UrambazajiKuhusu kamusiGo-SwahiliWiki-KamusiKamusi ya Kiswahili na Kiingerezakuihariri na kuongeza habari

                    Swift 4 - func physicsWorld not invoked on collision? The Next CEO of Stack OverflowHow to call Objective-C code from Swift#ifdef replacement in the Swift language@selector() in Swift?#pragma mark in Swift?Swift for loop: for index, element in array?dispatch_after - GCD in Swift?Swift Beta performance: sorting arraysSplit a String into an array in Swift?The use of Swift 3 @objc inference in Swift 4 mode is deprecated?How to optimize UITableViewCell, because my UITableView lags

                    Access current req object everywhere in Node.js ExpressWhy are global variables considered bad practice? (node.js)Using req & res across functionsHow do I get the path to the current script with Node.js?What is Node.js' Connect, Express and “middleware”?Node.js w/ express error handling in callbackHow to access the GET parameters after “?” in Express?Modify Node.js req object parametersAccess “app” variable inside of ExpressJS/ConnectJS middleware?Node.js Express app - request objectAngular Http Module considered middleware?Session variables in ExpressJSAdd properties to the req object in expressjs with Typescript