Digging redux-state of every React-Redux-powered web apps

Deni Putra Perdana
Published in
2 min readApr 3, 2017


Last year, redux topped state management library category on StateofJS. Redux is clearly the most popular and most loved by developers that using it as the state management library.

Developers Interest and Satisfaction about every popular javascript state management library. source

But first, What is a state management?

State management refers to the management of the state of one or more user interface controls such as text fields, OK buttons, radio buttons, etc. in a graphical user interface. In this user interface programming technique, the state of one UI control depends on the state of other UI controls.

taken from wikipedia

explain it simply, with human language

Think of it like a control center that controls every actions and data flow, that’s it.

And, what is redux?

Redux is a predictable state container for JavaScript apps.

taken from redux.js.org

For me, Redux is the one source of truth of the web apps state.

If you really want to know about redux and why you should or should not use it on your projects, you can read it here. NOT every project needs redux, but if you on a complicated one maybe you should consider it.

Ok, back to business

In this section, you already know what redux is and want to know about other web apps redux state architecture for research purposes.

First, use Google Chrome and install React Developer Tools on Chrome Web Store

React Developer Tools on Chrome Web Store

Second, Navigate to web apps that you want to examine to, in this example, i used instagram.

Medium’s Instagram with React Developer Tools open

Next step, examine the react components until you found the store and highlight it.

highlight the store

Then, move to the console and type

note: $r is for React Developer Tools

Expand the Object and you get the redux-state of Instagram.

That’s it! thanks for reading!