Contents:

• Introduction
• Passing Data using Properties
• Redux Architecture
• Install Redux Packages
• Build an App with Angular and Redux
• Conclusion

Single Page Application(SPA) is an excellent feature to build modern web-based apps. Here, the data level dependency moves from the server-side to the browser level as much as possible, to improve the application performance.

Modern SPA application frameworks like Angular, React use the component-based architecture that divides our application into small-small sections. Each component contains its own HTML page, stylesheet, and its data. This is an organized approach,  it easily divides our application into small sections and allows us to reuse these components into our application.

If the size of the application is small then component-based architecture is appropriate. It is difficult to maintain the state of each component for larger applications.  

PASSING DATA USING PROPERTIES

In Angular, we use the input properties to pass the data and output properties to receive the data in the component tree. Consider the above diagram, we have 3 components in the component tree and we want to pass some data to its grandchild component i.e. to component C. For this, first we should pass this data to its child component that is parent component of the grandchild i.e. component B, then further the parent component passes this data to its own child component using the “input” property.

Components are Inflexible

It becomes inflexible while we use properties for passing data between components. If we want to reuse these components, it is mandatory to pass the values to them.  

Also, it’s difficult to understand the assignment of a component that contains several input properties.

Data is maintained Synchronously

If more than one component uses the same state and one of them changes the state, it is requisite to notify the rest of the components to update their states. This approach is significant and an expensive task.

State of Application

The state is divided at the component level. If each and every component has its own state, the complexity increases for checking the state of the complete application.  

Redundant Data

If we have multiple components and each component contains its individual copy of the data, then there is a possibility of data duplication.

All the above demerits of the application’s inconsistent states are difficult to manage the state. To overcome this, we need a solution to manage the state of our application. 

REDUX ARCHITECTURE

Redux is an open-source JavaScript library developed to maintain the state of the application. Redux works on the centralized data mechanism. Redux maintains the state of an entire application in a single immutable state tree (object), which can’t be changed directly. When something changes, a new object is created (using actions and reducers). 

Building Block of the Redux

Before starting the development with Redux, we must have a basic knowledge of the building blocks of the Redux architecture. So let’s understand this.

Actions

Actions are payloads of information that send data from our application to the store using the “Store.dispatch()” method. Redux only enforces the “type” property, the structure of the action can be whatever works for you and your application. To make the dispatch action easier, special functions called “Action Creators” are commonly used.

Reducers

Actions only describe that “something” happened; reducers are the ones to specify how the application state changes in response to those actions. Reducers are pure functions, meaning they cannot modify input data or be altered by any external state like databases, document object model events, global constants, etc.
They have the following signature:

Store

A store is a simple JavaScript object that contains the state of the whole application. We can update the state of the application using the “dispatch (action, payload)” method. Dispatcher every time update the previous state of the application and generate a new state.

The store holds the application state. And allows it to access that info through the getState() function and update with the dispatch() method. Store registers the listeners with the subscribe (listener) function & unregisters them by using the object returned by the register function. Redux provides a helper createStore for creating a store. Its signature is as follows:

INSTALL REDUX PACKAGES

For creating building block like Store, Action and Reducer for our application we need to install Redux package first.

To install Redux for the application run the following command:

npm install redux @angular-redux/store –save

BUILD AN APP WITH ANGULAR AND REDUX

1.Define the application state models:

2. Generate the product’s action creators:

3. Add the reducer:

4. Import the Store Module into our app’s main module:

5. Finally, inject the “Store” service into our components and modules and request data from the state using the “store.select.”:

CONCLUSION

Here, with a simple example, we have tried introducing how Redux can be used with Angular. If we are going to create a large application in Angular then it is better to use a state management architecture that can manage the state of our application. This state management technique will increase the performance of our application. But if our application is not large then we should not use this state management technique.