ReduxJS in 30 seconds

ross profile image Ross Creighton ・1 min read

Redux is a JavaScript library that aims to simplify how we manage stateful data. Redux keeps all of our data in a single JS object called the Store. A single function, the reducer, is responsible for making modifications to the Store. We trigger the reducer by 'dispatching' an action - a JS object that describes how our data should change. The reducer function receives the action as an argument and makes changes accordingly. Other parts of the code (usually React Components) can subscribe to data in the Store. When data changes, Redux notifies subscribers of the change.


markdown guide

I'm learning react and everyone talks about redux, but I still don't get it. It's like the model in MVC? Works with databases? It's just to manage objects data? Now I'm searching for real life examples but I don't understand the purpose


It's not so much a "model" as a paradigm for data flow in your application.

Think of how data and actions occur in your application: A user clicks on a button, say to increase a quantity in a shopping cart. With redux, you have a single source of data for your application (the "store" mentioned in the post). When the user clicks the button, it triggers an action (for example {"INCREASE_QTY", value:1}). The reducer catches that action and its value and modifies the overall state of data in your application. Your application - say, a React component, now receives updated data down from the store and modifies its display state.

Data flows one direction in your application, rather than climbing back up the tree. Overall, I find, it creates less headaches.

Here's an image of what I'm trying to get at: devangelist.de/wp-content/uploads/...


ohh thanks! That's explain what I need and the image describes the point perfectly. I'm sure that I need more practice to realize redux potential.

Np. It takes a minute to wrap your head around when it’s new, but once you get it, it’s incredible! All the best on your learning!


I wrote an article that attempts to answer this question. dev.to/ross/why-react-needs-redux-b09


Hows about:
ReduxJS is how you can have globals in javascript without losing the plot.


Very helpful bee-line through the BS!


THIS IS IT : simple and accurate , thanks for the effort Ross


If only it was that easy in practice.


Request : Node, Polymer, Angular 4