DEV Community

Ross Creighton
Ross Creighton

Posted on

ReduxJS in 30 seconds

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.

Top comments (15)

Collapse
 
amandabenhamoo profile image
Amanda Benhamou

YESSSSS!!!!! THANK YOU!

Collapse
 
gregorgonzalez profile image
Gregor Gonzalez

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

Collapse
 
whozzawuzza profile image
'''⌐(ಠ۾ಠ)¬'''

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/...

Collapse
 
gregorgonzalez profile image
Gregor Gonzalez

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.

Thread Thread
 
whozzawuzza profile image
'''⌐(ಠ۾ಠ)¬'''

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!

Collapse
 
ross profile image
Ross Creighton

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

Collapse
 
lukfcsl profile image
Lucas Farias

an undervalued library

Collapse
 
ufmemo profile image
ufmemo

This guy's video was very helpful for me.... youtube.com/watch?v=1w-oQ-i1XB8

Collapse
 
pwhipp profile image
Paul Whipp

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

Collapse
 
katzy687 profile image
Natti Katz

Very helpful bee-line through the BS!

Collapse
 
belhassen07 profile image
Belhassen Chelbi

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

Collapse
 
saadaouad profile image
Saad Aouad

Perfect!

Collapse
 
davidmadi profile image
David Madi

This post shows it in the second part.
medium.com/p/9b2f2eabe9ab?source=l...

Collapse
 
agorovyi profile image
anatolii gorovyi

If only it was that easy in practice.

Collapse
 
sanjay555 profile image
Sanjayshr

Request : Node, Polymer, Angular 4