Introduction to Redux

What is Redux?

Redux is a library for managing the application state. It offers a predictable way to manage the different states of an application. It was originally designed as part of the React framework, but it’s not limited to just that anymore. The library has been praised for its power and ease of use when dealing with complex applications that have a lot of variables.

The importance of learning Redux before NgRx

NgRx is an extension of Redux that adds more advanced features such as selectors, Observables, and the Effects model. NgRx provides some additional tools to optimize your application by handling side effects such as fetching data from an API or updating the user interface on every action. Therefore, we should learn Redux before NgRx because Redux is easier to understand than NgRx.

What is Flux?

Redux is built on the Flux architecture. Flux is an architectural pattern for building front-end applications. Facebook introduced this concept at the F8 conference in 2014.

Why do we need Flux?

The traditional MVCModel-View-Controller (MVC) is a software architectural pattern for implementing user interfaces on computers. The pattern splits the interface into three parts: the Model, which handles the data, the View, which displays data to the user, and the Controller, which handles input from the user., MVVMMVVM (Model-View-View-Model) is a design pattern that is used in software development to create a clean separation between the view and the Model. The View is responsible for displaying the data and handling user input, while the Model is responsible for managing the data and logic., and two-way data bindingTwo-way data binding is a process where the View and the Model are bound together. The View and the Model are synchronized in a way that ensures any changes made to one will be automatically reflected in the other. patterns cause cascading updates, in which one user interface change causes another user interface (UI) to update automatically. This is highly inefficient in regard to the app’s performance. To understand the concept of cascading updates better, let’s take the following scenario as an example.

In our app, multiple components may require the same piece of data. If one component modifies the data, we should update the other components for consistency. In a large application, we may have to perform prop-lifting and prop-drilling to update all the desired components.

• Prop-lifting: Used to pass the updated data to the parent components until we reach the target component or the root component.

• Prop-drilling: Used to pass the data to the child components until we reach the target component.

Let’s visualize the concepts in the following slides:

It’s important to understand that without a proper state-management strategy, it’s very inefficient to update all the components in an application. To resolve this issue, the Facebook developers suggested a unidirectional data-flow pattern that ensures the UI changes don’t cascade.

Flux architecture

In a Flux application, data flows in a single direction, as shown in the illustration “Unidirectional dataflow in Flux” below. This is one of the main features of the Flux architecture.

Action

An action is a simple JavaScript object. It contains the updated data and the type of operation that needs to be performed to mutate the store. The action forwards this information to the dispatcher.

Dispatcher

In a Flux application, all data flows through a single dispatcher function. A Flux application cannot have multiple dispatchers. Its primary role is to dispatch the appropriate callback functions that the store registers. It also maintains the dependency between multiple stores in the application.

Store

We keep our entire app’s state in the store. In the Flux application, we can have multiple stores. The store contains all the logic used to mutate the state. After mutating the state, it emits a change event.

View

The views/components subscribe to the required change events. When the store emits the desired events, the views update themselves with the new data. Views can also trigger actions through user interactions.

Creation of Redux

After Flux’s announcement at the F8 conference in 2014, developers around the world open-sourced their implementation. Because of this, many different npm libraries have formed around this pattern.

The most popular among all these libraries is Redux. Dan Abramov introduced Redux at the ReactEurope conference in 2015.

Flux vs. Redux

Though Redux is based on Flux, they have some differences.

• Redux uses a single store to manage data for all components in an app, which helps keep everything in sync. This makes it simpler than Flux, which allows multiple stores.

• In Flux, a centralized dispatcher is used to distribute all actions to all registered stores. However, in Redux, there’s no need for a dispatcher because the store can dispatch actions directly. This allows for greater flexibility and scalability as well as simpler code organization.

• Flux stores can mutate the state, but Redux stores cannot. In Redux, we use reducers to mutate the state.