We show you how to use Redux in an Angular application

Redux is defined as an open-source JavaScript library that works to manage and centralize the state of an application. When combined with Angular and React, it is done with the intention of building user interfaces, similar to Facebook's Flux architecture.

Now, let's see a bit how Redux works with Angular. To achieve this, the Ngrx library must be used, it provides the necessary components to successfully implement this pattern and state management.

Elements of the Redux implementation with Angular

Component

The components in Angular are the elements that prepare the data for a certain view in the application that is being developed. This is the way Angular structures a project, it consists of a Typescript file that acts as a controller and an HTML view. The Model-View-Controller (MVC) pattern is followed.

State

It is where the application data is stored. In general, the state has been modularized in several models, such as the User model or a Role model, reflecting different data models that the application will need. In short, it is the information that will be shown to the user of the application but organized in the Store.

Action

To do anything, a component will trigger an action, such as when requesting a list of users or modifying a record, the component will notify the Store that it wants to carry out that action by dispatching this Action, and then the Store will take care of the operations necessary to carry it out.

Reducer

It must be remembered that the application has an immutable state, this implies that when you change some data, what you do is replace the state with a new one that incorporates the changes. Because of this, there are Reducers, which are functions to replace the application state with a new one.

Effect

When we talk about the Effect we refer to a function associated with an Action that will help us to carry out the auxiliary tasks that we need. This is an element that gives the developer flexibility when it comes to managing the flow of data.

How to get the data with Redux

After explaining the components, let's proceed to see an example about the interaction between them and the sequence that originates:

• The ngOnInit function of our component will dispatch an action, for example, getUserList ().
• The Action getUserList cannot change the store by itself. This first action requests the information from the corresponding API and will not have a reducer associated with it but an effect.
• This effect will ask the communication service for the information that corresponds to the API that contains it and then waits for a response.
• While all this process occurs, the view will have values ​​for these users in the store, either the last users or a series of default values.
• Back to the effect, when it receives the information from the server, two scenarios can occur: receiving users correctly or receiving an error from the server. Depending on the response you receive, one action or another will be dispatched within the effect.
• When this point is reached, all actions, depending on the response, will have a reducer associated with it that can modify the store in various ways.
• This results in the change in the application state since the reducer created a new state replacing the previous one.
• The view, subscribed to the state through an observable, will receive the changes in the store in real-time.

It is worth remembering that Redux does not speed up data collection, but it allows you to control, organize and maintain the data that the application uses in a very efficient way.

We recommend you on video