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.
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.
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.
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.
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.
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.
After explaining the components, let's proceed to see an example about the interaction between them and the sequence that originates:
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