Ever since Dan Abramov showed a prototype of Redux at React Europe in 2015, I’ve been fascinated with discussions around how to better manage state in a complex web application. Shameless plug: I even open sourced Redux Bug Reporter, a drop in React component and Redux enhancer that allows for filing bugs with enough serialized state and actions to allow for complete replay of the bug. But while there are plenty of excellent discussions and posts online about Redux best practices, I’ve seen less information from how large companies are actually using Redux at scale.

About a month ago, I came across Ryan Johnson’s excellent post “Dissecting Twitter’s Redux Store”. In it, he walked through using the React Developer Tools to output the redux state of the Twitter mobile website, and broke down some of the design decisions evident from the results, mostly notably the normalized data structure.

When looking at the tweet data, he noted that in the fetchStatus data, each tweet id had a status of "loaded" . Ryan stated:

I can only guess at what the other statuses are as I was never able to get a breakpoint in that let me see the status in a non-loaded state.

This made me think immediately of the excellent Redux DevTools Extension, which allows you to see all redux actions and the related state changes over time. If I could get this extension enabled on the twitter mobile site, I could see all changes to the redux store over time, and how the data responded to each action.

The process to use the Redux DevTools Extension on your own code is relatively simple, and documented very well in the project’s docs. The basic pattern is calling out to a global variable when creating a store, like so:

const store = createStore(

reducer, /* preloadedState, */

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

);

If window.__REDUX_DEVTOOLS_EXTENSION__ exists, the store automatically hooks into the extension to provide the debugging capabilities we’d like.

The mobile twitter website isn’t a project I have the source code to, however. I wondered if it was reasonably possible to attach the extension in production, with twitter’s minified code. It turns out that it’s actually not too difficult 🙌.