This content originally appeared on DEV Community and was authored by Muhammad Muhktar Musa
When using Ngrx to build an application, the problem of deciding the format of storing data inside the store is always there. The problem of handling the business data in a centralized store is something that will need to be done in the application. This process could be repetitive and time consuming. It could lead to handwriting the same reducer logic and selectors for different data types. This can be error prone and slows down the development process. We would cover how to solve this problems using the Ngrx Entity and selectors to improve an application.
Entity
Ngrx Entity helps in handling business data in a store. It represents some sort of business data or user interface state. An entity is defined as typescript custom object type like in the example below
export interface EarlyconfigState <earlyConfig> {
// additional entities state properties
selectedId: number;
loading: boolean;
error: string;
query: EarlyconfigSearchQuery;
}
As can be seen, the entity has a unique identifier field called selectedId. This unique id can be either a string or a number. It is a technical identifier that is unique to a given instance of the entity. Most data stored in a store are entities.
EntityState, EntityAdapter, createEntityAdapter
Ngrx Entity is a small library that helps keep entities in an ideal entity state format. It is designed to be used in conjunction with the Ngrx store and it is a key part of Ngrx ecosystem. Let us take a deeper look to see how entity helps in writing an Ngrx application.
export interface EarlyconfigState extends EntityState<earlyConfig> {
// additional entities state properties
selectedId: number;
loading: boolean;
error: string;
query: EarlyconfigSearchQuery;
}
From the example code above we inherit our properties from EntityState. It is imported from the @ngrx/store. The EntityState makes it easier to manipulate entities.
In order to be able to use the EntityState and other features of Ngrx Entity, an EntityAdapter needs to be created. This adapter is a utility class that provides a series of utility functions that are designed to make it really simple to manipulate entity state. The adapter allows all initial entity state to be written. Let us take a look at it in action
export const EarlyconfigAdapter: EntityAdapter<earlyConfig> = createEntityAdapter<earlyConfig>();
The adapter can now be taken and used to define the initial state that will be needed for the reducers. This reducers will be implemented like in the code below.
export const initialEarlyconfigState: EarlyconfigState = EarlyconfigAdapter.getInitialState({
// additional earlyconfig state properties
selectedId: null,
loading: false,
error: '',
query: {
filter: '',
sorting: '',
limit: 999,
page: 1
}
});
The adapter in turn can be used to write reducer functions and logic.
export function EarlyconfigReducer(state = initialEarlyconfigState, action: EarlyconfigActions): EarlyconfigState {
switch (action.type) {
case EarlyconfigActionTypes.CreateEarlyconfig:
return {
...state,
loading: true,
error: ''
};
case EarlyconfigActionTypes.CreateEarlyconfigSuccess:
return {
...EarlyconfigAdapter.addOne(action.payload.result, state),
loading: false,
error: ''
};
default:
return state;
}
}
Benefits of Entity Adapter
Using adapters to write reducers spares a lot of work and helps in avoiding common reducer logic bugs. Using the adapter prevents the problem of accidentally mutating the store state and reduces the amount as well as reducing the amount of code needed to write reducers to the barest minimum.
Ngrx Entity helps with the commonly needed selectors. This selectors are then ready to be used directly in a component or as a starting point for building other selectors. Though the ngrx Entity allows the writing of state, reducer and selector logic to be easier, the reducer function itself still has to be written. Using the Ngrx Entity does not avoid having to write reducer logic for each entity. It makes it simpler. The convention to be followed is to pull all the closely related code that uses the adapter directly into the same file where the entity reducer function is defined.
export function EarlyconfigReducer(state = initialEarlyconfigState, action: EarlyconfigActions): EarlyconfigState {
switch (action.type) {
case EarlyconfigActionTypes.CreateEarlyconfig:
return {
...state,
loading: true,
error: ''
};
case EarlyconfigActionTypes.CreateEarlyconfigSuccess:
return {
...EarlyconfigAdapter.addOne(action.payload.result, state),
loading: false,
error: ''
};
case EarlyconfigActionTypes.SearchAllEarlyconfigEntities:
return {
...EarlyconfigAdapter.removeAll(state),
loading: true,
error: ''
};
case EarlyconfigActionTypes.SearchAllEarlyconfigEntitiesSuccess:
return {
...EarlyconfigAdapter.setAll(action.payload.result, state),
loading: false,
error: ''
};
case EarlyconfigActionTypes.SearchAllEarlyconfigEntitiesFail:
return {
...state,
loading: false,
error: 'Earlyyearsconfig search failed: ' + action.payload.error
};
default:
return state;
}
}
In practice each entity has slightly different reducer logic so
that there would be no code repetition between reducer functions.
In conclusion, Ngrx Entity is an extremely useful package. In order to understand it, it is essential to first be familiar with the base store concepts like Actions, Reducers and effects. You can find lessons using the link below
Ngrx Entity is specifically designed to handle only the business entities in a store making it simple to the such entities in memory in a convenient way.
Selectors
Selectors are pure functions used for obtaining slices of store state. Ngrx store provides some helper functions for optimizing this selection. When selecting slices of state, selectors provide many features like
- Portability
- Memoization
- Composition
- Testability
- Type safety
createSelector function
When using the createSelector function, the Ngrx store keeps track of the latest arguments in which a selector function was invoked. The last result can be returned when the arguments match without revoking a selector function. This is possible because of the nature of selectors which are pure functions.
This provides performance benefits especially with functions that perform expensive computation.
The createSelector function can be used to select some data from the same state based on several slices of the same state. let us take a look an example
export const getSelectedId = (state: EarlyconfigState) => state.selectedId;
export const getLoading = (state: EarlyconfigState) => state.loading;
We are getting our state from the reducer file. We have a getSelectedId and getLoading objects that. The createSelector method creates a result that filters some of the state by another section of the state and brings the state up to date.
The selector looks like this
export const {
selectIds: EarlyconfigIds,
selectEntities: EarlyconfigEntities,
} = EarlyconfigAdapter.getSelectors(getEarlyConfigState);
export const currentEarlyconfigId = createSelector(
getEarlyConfigState,
getSelectedId
);
export const currentEarlyconfigIds = createSelector(
getEarlyConfigState,
EarlyconfigIds
);
The selector function returned by calling createSelector initially has a memoized value of null. After a selector is invoked the first time its value is stored in memory. If the selector is subsequently invoked with the same arguments, it will re-compute and update its memoized value. A selectors memoized value stays in memory indefinately. If the memoized value is a large dataset that is no longer needed, it is then possible to reset the memoized value to null so that the large dataset can be removed from memory. This is achieved by invoking the release method on the selector.
currentEarlyConfigId.release();
This content originally appeared on DEV Community and was authored by Muhammad Muhktar Musa
Muhammad Muhktar Musa | Sciencx (2021-09-19T22:40:59+00:00) Ngrx Entity and Selectors. The why and how. Retrieved from https://www.scien.cx/2021/09/19/ngrx-entity-and-selectors-the-why-and-how/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.