Ngrx on Angular
#NgRx State Management Lifecycle
Introduction
This is the first article I make, I only make it to help people that they want to practise and find out the state management in Angular. In the end of the article is the link for the git link project.
This dummy project is a Pokemon listing and views Pokemon info, simple. I use the PokeApi for real Pokemon info. Let’s start by creating a project with state management. I will start by adding a folder store where all sub-parts will be there.
Actions
The first thing we need to do is create our actions. Actions are one of the main building blocks in NgRx. Actions express unique events that happen throughout your application. From user interaction with the page, external interaction through network requests, and direct interaction with device APIs, these and more events are described with actions. For my dummy project, my actions are:
Create actions from NgRx. Here is a link for creating action.
Pokemon Model
Entity
In reducer, I use the entity feature. The entity provides an API to manipulate and query entity collections.
- Reduces boilerplate for creating reducers that manage a collection of models.
- Provides performant CRUD operations for managing entity collections.
- Extensible type-safe adapters for selecting entity information.
Reducer
Reducers in NgRx are responsible for handling transitions from one state to the next state in your application. Reducer functions handle these transitions by determining which actions to handle based on the action’s type. In reducer, we pass the data from every action and add it to the state.
Effect
Also, I use the effect functionality. Effects are an RxJS powered side effect model for Store. Effects use streams to provide new sources of actions to reduce state based on external interactions such as network requests, web socket messages, and time-based events.
The first action I make is to get the list of the Pokemon “START” action. In this action, I send the limit and the offset to get only the first 10 items.
Selector
Selectors are pure functions used for obtaining slices of store state. @ngrx/store provides a few helper functions for optimizing this selection. Selectors provide many features when selecting slices of state:
- Portability
- Memoization
- Composition
- Testability
- Type Safety
When using the createSelector and createFeatureSelector functions, @ngrx/store keeps track of the latest arguments in which your selector function was invoked. Because selectors are pure functions, the last result can be returned when the arguments match without reinvoking your selector function. This can provide performance benefits, particularly with selectors that perform expensive computation. This practice is known as memoization.
Component
Now in the component that we want to use this state management.
On the init, we dispatch the action to get the first 10 Pokemon. And we can bind it in the HTML with this:
The async pipe can be used to display the data when it is fetched by selector (and is populated).
Source
The link for the project: erevos-13/PokeMe
Links that we used: