1- What is Redux?
Facebook said that the
Google was slow and heavy, therefore, in that year, they introduced
ReactJS to the developer community. But the
ReactJS was only a library to create
components and render these
components onto the interface. The
ReactJS did not have the ability to manage the state of applications. Soon afterward, the
Facebook introduced a
Flux helping to manage the state of applications, and it is the library created to support the
In that time,
Dan Abramov researched the
ELM language. He was influenced by the
ELM architecture, and found the complexity of the
Flux. In May 2015
Dan Abramov announced a new library called
Redux, which was based on the
ELM architecture and eliminates the complexity of
ELM is a Functional Programming Language, affected very much from
Haskell, and compiled directly into the
Haskell, the most prominence of the
ELM is its architecture (
ELM Architecture), which helps to develop Web applications in language with the
FPL type (
Functional Programming Language) more easily.
After its birth, the
Redux caused a great resound and immediately attracted the attention of the
React community and even
Facebook also invited
Dan Abramov to work. At present both the
Flux exist in parallel, but the
Redux is popular and more widely used.
Flux vs Redux:
In the term of endusers, when they interact on the interface of application, they are only interested in the result of such act. But in fact, very many processes occur. OK, now, we will analyze the architecture of
Redux to understand these processes more.
2- Architecture of Flux
Flux's architecture was introduced for the first time at the
Facebook F8 conference in 2014 by
Bill Fisher and
Jing Chen. The idea re-defined the
Model View - View Model) model widely used previously with the
"unidirectional data flow" concept.
Actions and events in the
Flux will pass a
"closed circuit" with the following form:
- USER INTERFACE — action —> DISPATCHER — action —> STORES — notify changes —> USER INTERFACE
Below is the illustration of the general architectures of the
// Action object example:
title: 'Do something.',
The parts in the architecture of the
VIEW: a hierarchical composition of
ACTION is a pure object created to store information related to a user's event (click on the interface). It includes the information such as: type of action, time of occurence, location of occurence, its coordinates and which
state it aims to change.
DISPATCHER: The only point of the application to receive
Action objects to be handled.
Store listens to
Actions, manages data and the status of application. The
Stores bases on the
action objects to respond to the corresponding
3- Architecture of Redux
studies the architecture of
but it omits unnecessary complexity.
- Redux doesn't have DISPATCHER concept.
- Redux has a only STORE instead of a lot of STOREs like the Flux.
- The Action objects will be received and handled directly by STORE.
Below is the illustration of
The parts in the
VIEW PROVIDER: represents for a
View Framework to register with
STORE, of which, the
View Framework can be
ACTION: a pure object created to store the information related to a user's event (click on the interface,...). It includes the information such as: type of action, time of occurence, location of occurence, its coordinates and which
state it aims to change.
STORE: Manages the status of application and has
MIDDLEWARE: Provides a way to interact with
Action objects sent to
STORE before they are sent to
Middleware, you can perform the duties such as writing logs, reporting errors, creating asynchronous requests, or dispatching new
REDUCER: A pure function to return a new state from the initial state. Note:
REDUCUER does not change the state of the application.Instead, it will create a copy of the original state, and amend it to have a new state.