Redux

Redux is an open-source JavaScript library used to manage the state of the application. It is one of libraries most commonly used with React or Angular to build user interfaces. It was created by Dan Abramov and Andrew Clark and was inspired by the Flux architecture of Facebook.

It is very often used along with React but is compatible with many similar frameworks such as Preact or Inferno as well as Angular or pure JavaScript. The main concept of Redux is that the entire application state is stored in one central location. Each application component can have direct access to the application state without having to send props to subsidiaries or use callback functions to send data to parent components.

Description

Redux is a small library with a simple limited API which is designed to be a predictable container for application status. It works similar to the reduction function in the functional programming concept. The development was influenced by the programming language built on the paradigm of the Elm functional programming.

Redux’s pros

• Predictability and simplicity
• One-way data flow and non-mutability
• Separation data from the presentation
• Extensibility
• Popularity and community
• Tools support

Redux’s cons

• The absence of an appropriate tool to deal with side effects. Similar tools are only available as a middleware such as redux-think or redux-saga.
• Actions are separated from their consequences

When use

If this is a progressive application that has ambitions to become a medium or large application, it is likely to apply Redux. With smaller applications, you may deal with several problems:

• There are only few family relationships
• The data sharing between different components isn’t too widespread.

Therefore, the use of the local state is completely problem-free.

However, when it comes to greater application, a similar structure would bear the following disadvantages:

• If two components require common data, this data must be moved to the nearest parent element. This may lead to undesirable data in unrelated components.
• In some cases, the parent element may occur only because of the data transfer and the relationship in the application structure is impaired at that time.
• It is difficult to correct errors.

What else has to be considered?

If you choose to use Redux for your application, you may feel that you should store all application data in Redux which is not exactly true. In some cases it is even more appropriate to use a local variable. Generally, if data are less important or are not needed for more than one component, it is more practical to store them locally.