Digging redux-state of every React-Redux-powered web apps
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.
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
Second, Navigate to web apps that you want to examine to, in this example, i used instagram.
Next step, examine the react components until you found the store and highlight it.
Then, move to the console and type
$r.store.getState()
Expand the Object and you get the redux-state of Instagram.
That’s it! thanks for reading!
