To manage the entire state in React, we cannot use a single (global)
variable for that. But, Redux gives us a certain Flow (way) of Managing
Data that we can integrate easily into another component/react-app so
React can properly react to the changes of the data. The way Redux Stores
& Manages Data is directly related to a Central Store of
every component in one place. Redux is a third-party library which works
independent of React. Redux is most often seen in conjunction with React,
but theoretically, we can use Redux for State Management with any
framework.
The Central Store in Redux stores the entire application
state. We can think about the Central Store in Redux, as a
giant JavaScript Object. In a React Application, we've
Components, which sometimes, manipulate/get the current
application state depending on the component. The Components don't
directly manipulate the state, because that wouldn't be picked up by the
React's reactivity system, and also, it would make our store extremely
unpredictable.
So, we need to have a clear predictable process of updating the
application state on which we can rely on, and which is the only process
that can change our state. This is actually what Redux is all about
— having a clear, well-defined process of how our application state
may change.
The first building block besides the Central Store, is known
as Action, which is Dispatched from our JS code
(In a React App, the Actions are dispatched from within our components).
An Action is just an information package of
some type (eg, addIngredient(), removeIngredient(), etc), which also holds
a Payload (eg, to addIngredient(), we've to also send the
payload about, which ingredient to add?).
The Action doesn't directly reach the
Central Store, it is simply a messenger that doesn't contain
any logic on how to update the store. The thing that manipulates the
application state which is the Central Store here, is known
as the Reducer. The Action always reaches the
Reducer, using the type of the action (viz. addIngredient(),
removeIngredient(), etc), and then, the Reducer finds the
code for that kind of Action.
The Reducer is a pure-function, which receives the
Action and the old state as input, it processes & then spits
out an updated state. The important thing is, the Reducer has
to execute synchronous code only (shouldn't execute asynchronous code
which induces side-effects into the app). The updated state spitted out by
the Reducer is then stored and it replaces the old state in
the Central Store, which is done in an immutable way.
Now that the Central Store is updated, how can we get the
updated application state from the Central Store, into our
component?
For that, we use an automatic Subscription model, which
Triggers all the Subscriptions, whenever the
state inside the Central Store changes. And ofcourse, our
Components can subscribe to
Central Store updates, and it then receives that update
automatically.
The entire process explained above, is known as
Redux Flow, and this is how Redux works.