Angular Redux

Redux is a reactive state management library which is developed by Facebook and used in the React library. It is based on the Flux pattern. The difference between Flux and Redux is how they handle tasks; In the case of Flux, we have multiple stores and one dispatcher, whereas, in Redux, there is only one Store, which means there is no need for a dispatcher.

We can use the NgRx library to use Redux in the Angular framework. It is a reactive state management library. With NGRX, we can get all the events (data) from the Angular app and keep them all in one place.

When we want to use the stored data, we have to receive (dispatch) it from the Store using the RxJS library. Reactive Extensions for JavaScript is a library based on the Observable pattern used in Angular to process asynchronous operations.

We use a service to share data between components (make sure to unsubscribe the observable each time; otherwise, you risk running the observable in the background unnecessarily, which consumes resources is), or we can use input/output data flow (make sure components have parent/child relationship).

We can use ViewChild for nested components. But in the case of a large project, these solutions increase the complexity of the project. If we have multiple components, we risk losing control over the data flow within one component.

It uses Redux in Angular: Store and unidirectional data flow to reduce the complexity of the application. The flow is clear and easy to understand for new team members.

2. Project Setup

This article will show how easy it is to create a simple Todo application using Redux and the NgRx libraries. But before starting the development, we have to make sure that we have installed angular-cli on our computer. To check it, open a command prompt or terminal and type ng --version. Now everything is set up, we are ready to

Check if Angular CLI is installed.

The first step is to generate a new Angular CLI application using the below command in the terminal:

ng new ngrx-todo.

Generate a new project.

The article will show how easy it is to build a simple Todo application using the Redux and NgRx libraries. But before starting the development, we have to make sure that we have installed angular-cli on our computer. To check this, open a command prompt or terminal and type ng --version. Now that everything is set up, we are ready to start our Todo app.

To save the data of the ToDo app, we will use REST API as we want to perform some CRUD operations. We will use JSON Server to save ToDo in JSON file to access this file using HttpClient from Angular.

3. Implementation

Once the project is set up, we start implementing our Todo app. The first step is to create a new module for our app (we need to do this because we will be treating the app module as the main module of the entire application).

To do this, we run the ng g module to-do in the terminal, and then; We import this module into the app.module.ts file, as can be seen below:

Figure 3. app.module.ts file.

Below is the folder structure of the TodosModule that we will use for the components and the common files (services, headers, models, etc.):

Project file structure.

After we done with application structure, we can start to code. The first step is to import the modules that we need to use in our todos.module.ts:

todos.module.ts file, imports array.

By adding the StoreModule, our module has a Store now.

In NgRx, the Store is like an internal database that reflects the state of our application. All the StoreModule's data will be contained in the Store. Now we can write our to-do action.

An action is a class that implements the NgRx action interface. Action classes have two properties:

• type: It is a read-only string that describes what the action stands for. For example, GET_TODO.
• Payload: This property type depends on what type of data action needs to send to the reducer. In the previous example, the payload will be a string containing a to-do. Not all actions need to have a payload.

For example, to get the todo list, we want the following actions:

Todo actions.

To get the to-do list from the REST API, we will have an action for each type of call. These verbs will be used in the reducer.

A reducer is a function that knows what to do with the action. The reducer will take the last position of the app from the Store and return to the new position. Furthermore, a reducer is a pure function. In JavaScript, a pure function means that its return value is the same for the same number of arguments and has no side effects (the outer scope is not changed). To get the to-do list, use the reducer as shown below:

Todo reduces.

With the GET_TODOS_SUCCESS action, we can see that the reducer returns an object that contains a to-do list, a message, and a CSS class. The object will be used to display the to-do list in our application.

Also, verbs can be used in effect.

An effect uses streams to provide new sources of actions to reduce states based on external interactions Like: REST API requests or Web socket messages. In fact, the effect is a kind of middleware that we use to obtain a new state of the stored data. For example, to get a list of todos, we must have the below service:

Todo service.

It is a simple way to get data from the API. The getAPITodos method returns an observable.

And the effects of this service will be below:

Todo effects.

The effect will return GetTodosSuccess if we get the data from the API, or it will return GetTodosFailed if it fails.

To access the data, we need to send an action to the store in todo-list.component.ts :

todo-list.component.ts file.

The template of the todo-list.component.ts component is the following:

Template file for todo-list component.

The result of the GET operation will look like this:

GET operation result.

To get a list of items which you select the to-do list and subscribe to it in your store. You can also add new elements to the import array from todos.module.ts. Then, you need to add stores for your modules (features), reducers and effects:

todos.module.ts updated imports array.

NgRx workflow diagram for a GET to-do list. Following the steps, we can finish the application from CRUD operations to GET operations. And the following would be the diagram for GET operation using NgRx library:

Other CRUD operations (create, update, and delete) for the article can be found in the source code on Github, and after you've finished your application, it should look like this:

Complete to-do application.

Conclusion

We can see how easy it is to add the NGRX library to an Angular project. Here are some of my conclusions before I conclude:

• The NgRx library is great if we want to use it in large applications. We need to do some configuration. If you have more than 20-30 components, this library will be helpful).
• A large application uses the NgRx library which is easier to understand for a new team member.
• Easy to follow data flow and debug the application.
• The NgRx library becomes more robust and flexible by using Redux in an Angular application.