Inspecting Redux Stores in Production, without the Redux Devtools

Checking out the Redux Store of Soundcloud Redux

Back in the day I learnt a lot by hitting CTRL+U (View Source) on websites. Nowadays I still check the source code of some apps, yet it’s become a tad more difficult for some specific things.

When it comes to React apps that use Redux I like to see how they’ve set up their store. If the developer has enabled integration with the Redux Devtools I can use just that. When they haven’t (because: production) I manually look up the store and then retrieve it’s state.

To look up the store, use the React DevTools. Traverse the Component Tree until you stumble upon the element with a store prop. This usually is high up the tree.

💁‍♂️ The regular DevTools provide you the $0 command in the console to get the most recently selected element or JavaScript object, the React DevTools provide the $r command to get the most recently selected React Component.

With the correct component selected, getting the contents of the store is very easy thanks to the $r command:


Dispatching actions also is a breeze:

    type: '…',
    payload: {

Happy inspecting 🙂

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Published by Bramus!

Bramus is a frontend web developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.