Monitor Redux store on production

With redux devtools disabled on production it’s problematic but possible to monitor dispatched actions and state changes. Here’s how it can be done.

Step 1

You need to find this code in your Sources.

Even if they are minified, you can search for text 'Reducers may not dispatch actions.' which is close to the code we are interested in. Here is how it look in my case.

Step 2

Now you only need to add logpoint(s) to display action and state.

STATE BEFORE

{
  actionType: e.action.type, 
  action: e.action, 
  stateBeforeAction: s.computedStates[s.computedStates.length - 1].state
}

STATE AFTER

{
  actionType: e.action.type,
  action: e.action, 
  stateAfterAction: s.computedStates[s.computedStates.length - 1].state
}

IMPORTANT

In your case the code might be minified differently so you might have different letters instead of “e” and “s”.

Now then you click through the app (or reload the page) you should see in the console the feed of actions and state.

Tweet