What is Redux?

If you have or have not any experience of Redux, this will be robust guidance about Redux to improve your knowledge and skills in developing life.

Before Redux was made, the way managing data flow in the front-end was MVC(Model-View-Controller) pattern.

Here is a simple explanation of MVC;

• Model: It includes all the data and its related logic
• View: Present data to the user or handles user interaction
• Controller: An interface between Model and View components

One of the most dominant characteristics of MVC is ‘Two-way data binding’. ‘Two-way data binding’ is really simple to construct and easy to code. However, imagine we have a tremendous app that contains hundreds of models and thousands of vies. To us, developers, this sounds very terrifying.

Unlike any other apps, ‘Facebook’ demands lots of views and models and also interactions between clients. Therefore, tons of bugs occurred and had difficulties with debugging because of the ‘Two-way data binding’ pattern.

In 2014, to solve these problems, ‘Facebook’ established a new architecture pattern called ‘Flux’. Flux aimed to improve the complex situation encountered in the MVC pattern and applied ‘One-way data flow’ as a method. Unlike the MVC pattern, ‘view’ delivers ‘action’ without changing data. Action must pass through ‘dispatcher’, data change occurs through ‘dispatcher’, and ‘view’ receives changed data through ‘store’.

And in 2015 ‘Dan Abramov’ created ‘Redux’.

For more information about Flux: https://facebook.github.io/flux/

Three Principles of Redux

• Single source of truth:
  The state of your whole application is stored in an object tree inside a single-store.
  The data modification must be done by ‘reducer’ and the data saves in ‘store’. In React, the parent-component passes the data or the state to the child-component but this data will always be stored. You may create ‘store’ more than one in any circumstances or needs but be aware of creating lots of ‘stores’. Then there’s no merit using Redux.
• State is read-only:
  The only way to mutate the state is to emit an action, an object describing what happened.
  Since ‘state’ is read-only, individuals may not be able to modify any ‘state’ that’s happening through ‘view’. Data modification has to be done only by ‘reducer’.
• Mutations are written as pure functions:

To specify how the state tree is transformed by actions, you write pure reducers.

what is a pure function? A pure function is a function where the return value is only determined by its input values, without observable side effects.

A function that controls an action object is called ‘reducer’. When ‘reducer’ receives the data, it defines how to update the data on the ‘state’. Once again, ‘reducer’ must be written in pure function.

I am not saying all the developers must use Redux. While using React, having prop drilling(a process by which you pass data from one part of the React Component tree to another by going through other parts that do not need the data but only help in passing it around) and difficulties on debugging because of prop drilling, I recommend using Redux. It’s an open-source library and very useful so why not try?