What is Redux?

Redux is an open source JavaScript library for managing the status of an application. It is commonly used with other libraries such as React or Angular for the construction of User Interfaces. Dan Abramov and Andrew Clark were inspired by another Facebook library, Flux 1 to create Redux.

What is state management?

In programming, “state” could be defined as the set of all values ​​stored by the application via properties or variables at any time of execution.

On the frontend, the state can include server responses and cached information, as well as data generated directly locally that has not been saved to the server. To this we must add the state of the interface: active routes, selected tabs, spinners, pagination controls…

State management consists of ensuring that the UI correctly displays the current state of the application and is a fundamental pillar in the frontend.

Simple apps don’t need to put a lot of thought into managing state. Its state can be stored directly in component properties, for example.

The problem of state management appears when the application begins to grow. Especially when the values ​​of one component can affect the values ​​of other components: You can get into a loop of state (and interface) updates that makes it hard to keep track of why you’ve reached a particular state.

What does Redux contribute to state management?

In the modern frontend, you have to couple the continuous variation of data (mutability), with the uncertainty of when it occurs (asynchrony), and that’s a dangerous combination.

For small apps this is not a problem, all modern frameworks (Angular, React, Vue) provide their own mechanisms for storing state, apart from Redux.

When am I interested in Redux then? Well, a clear sign that you need help with state management is when you have an app so big that at a given moment you lose control of the when, how and why of your state.

The purpose of Redux is to make state changes predictable by imposing certain restrictions on how and when updates can occur. Redux makes your state management transparent and deterministic, which among other things provides…

Better understanding of the evolution of the state at a given time:

  • Ease of incorporating new features into the app
  • A new range of debugging tools (such as time travelling)
  • Ability to reproduce a bug
  • Improvements in the development process, being able to restart execution from a specific state.