How to get the Redux State from a production build via the browser's console

Written in February 20, 2022 - 🕒 1 min. read

Sometimes you want to debug the Redux State from your application on production, but you don’t have redux-devtools enabled for production, so what can you do?

redux state on instagram


Run this on the browser’s console.

const internalRoot = Array.from(document.querySelectorAll("*[id]")).find((el) => el?._reactRootContainer?._internalRoot?.current)?._reactRootContainer?._internalRoot?.current;
const state = (internalRoot?.pendingProps?.store || internalRoot?.stateNode?.store || internalRoot?.memoizedState?.element?.props?.store)?.getState?.();

The long version

Recently I had to debug a problem in production which I needed to access the Redux State, so I came across this solution, which needed React DevTools to be installed in the browser, and that worked for me, but then I wondered how that could be done without the use of any extensions.

After a bit of researching I found this solution on Stack Overflow, which lead me to create the following script:

// Traverse a dom element
const stores = new Set();
const traverse = (element) => {
  let store =
    || internalRoot?.pendingProps?.store
    || internalRoot?.stateNode?.store;

  if (store) {

  if (element.child) {

// Find the root element for React
const reactRoot = Array.from(document.querySelectorAll("*[id]")).find((el) => el?._reactRootContainer?._internalRoot?.current);

const internalRoot = reactRoot._reactRootContainer._internalRoot.current;

// Traverse the root react element to find all Redux States in the app

After running this script, all Redux States will be available inside the variable stores, and you can access them via stores.forEach((store) => store.getState()).

See you in the next one!


Post a comment


No comments yet.