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:

$r.store.getState();

Dispatching actions also is a breeze:

$r.store.dispatch({
    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, working as a Chrome Developer Relations Engineer at Google. 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 …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Leave a comment

Your email address will not be published.

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