With reference to the previous blog on state management with React and Redux, we will look at state management in an Angular 15 application using the NgRx store in this blog.
NgRx is derived from Ng(the conventional name for Angular tools and ecosystem) and Rx(Reactive Extensions).
Moreover, for anyone who has used Angular, you have already used Reactive Extensions if you have used the rxjs library.
In this blog, we will cover:
- What is RxJS?
- Analogy
- What is NgRx Store?
- Hands-on
- Conclusion
What is RxJS?
RxJS is the JavaScript implementation of ReactiveX(Reactive Extensions) which is an API that implements the Observer pattern in asynchronous programming.
You can read more about ReactiveX at https://reactivex.io/. Let us try and break this down using simple terms and analogy. The Observer pattern mainly consists of an Observer and an Observable.
An Observable neatly handles asynchronous data or streams of data or events while saving you the complexity of callbacks and/or thread management.
RxJS also comes with certain operators such as map, takeUntil, debounce just to name a few which are very powerful tools that allow a developer to transform the streams of data in the Observable.
An Observer is a function that subscribes to an Observable and makes three main “Observations” which are; the latest value emitted from the stream of data, any errors that may occur, and lastly, whether the streaming is complete.
Analogy
Let us assume that you have partnered with Workfall and by virtue of being a partner you receive email updates regarding your daily work submissions.
In this case, becoming a Workfall partner is automatically a subscription and you are now an Observer because you receive daily updates.
When a time comes and you want to leave Workfall, you will no longer receive the updates because you have unsubscribed and are no longer an Observer.
What is NgRx Store?
NgRx store is a state management library that utilizes the power of RxJS to create a state-of-the-art framework for handling global and local states for Angular applications.
Also equally important the NgRx store is heavily inspired by Redux.
Hands-On
In this blog, we shall create an Angular application that fetches information about cryptocurrencies and visualizes the data in the form of charts.
The source code of this application is found at https://github.com/workfall/workfall-ngrx/tree/v1.0.0.
Following are a few snapshots of the application which we will be creating.
We shall start by creating the application without using the NgRx store so that we see the notable differences between the two implementations.
Installations
Check that the following programmes are installed on your computer:
- Node.js
- Angular CLI
The main npm packages which we shall use in the application are echarts, ngx-echarts, and tailwindcss.
Implementation Without NgRx Store
Let us start by going the common route, we shall create a service then we shall inject that service into all the components that need the data that the service provides.
api.service.ts:
bar-chart.component.ts:
line-chart.component.ts
radial-bar-chart.component.ts:
radial-bar-chart.component.ts(2):
The above implementation of injecting a service into all components has its limitations which are analyzed below.
To reproduce the behavior, open the developer tools and go to the Network tab.
Refresh the page and you’ll notice one HTTP request was made.
If you click on the other two tabs you will see that on each navigation you make to a route, the same HTTP call from the shared service is made severally yet it is the same data.
And it is so unnecessary that it might be costly if you are using backend services that are charged per request such as the one we used in this example.
Implementation With NgRx Store
This source code is found at https://github.com/workfall/workfall-ngrx/tree/v1.1.1
Folder structure:
Configuring NgRx Store
Install the following packages from npm or using Angular schematics or the following command npm i @ngrx/effects @ngrx/store @ngrx/store-devtools.
The dev tools are used in conjunction with the Redux Devtools browser plugin to help in debugging store-related issues.
The store folder has 3 directories namely; actions, reducers, and effects.
In the actions directory, we have the user-defined store events which will be dispatched from components.
In the reducers directory, we have event handlers that update the state, and finally, in the effects directory, we have API calls; so API calls will no longer happen at the component level.
coins.actions.ts:
coins.reducer.ts:
coins.effects.ts:
app.module.ts:
Using the Store in Components
bar-chart.component.ts:
line-chart.component.ts:
radial-bar-chart.component.ts:
We shall try to reproduce the number of requests that are made to the server when using data from the store.
Open developer tools, refresh the page, and navigate between the tabs several times.
Besides, you will notice that only one request was made to the server and no matter how many times you navigate through the tabs, no new requests are made.
At last, just to make sure that the store is working perfectly, look at the Redux Devtools browser plugin and you will see all the data in the plugin.
Conclusion
In this blog, first, we looked at how to integrate the NgRx store into your Angular project and the major advantage of using the NgRx store in your project.
We realized how we can save on costs we make to servers that charge per API request.
We also learned briefly about RxJS.
It is important to note that there is a pitfall when we use the NgRx store whereby in order to get the latest value in the stream, we have to introduce what we call polling.
Polling refers to fetching data from the API at regular set intervals.
Lastly, the advantage is that RxJS offers an operator known as debounce to help with polling. We will come up with more such use cases in our upcoming blogs.
Meanwhile…
If you are an aspiring Angular Developer and want to explore more about the above topics, here are a few of our blogs for your reference:
- How to Write Unit Tests for Forms in an Angular 15 Application Using Jasmine?
- How to Write Unit Tests for Angular 15 Application Using Jasmine and Enforce Code Quality in a CI Workflow With Github Actions?
- How to Create & Use Standalone Components in Angular 14?
Stay tuned to get all the updates about our upcoming blogs on the cloud and the latest technologies.
Keep Exploring -> Keep Learning -> Keep Mastering
At Workfall, we strive to provide the best tech and pay opportunities to kickass coders around the world. If you’re looking to work with global clients, build cutting-edge products and make big bucks doing so, give it a shot at workfall.com/partner today!
