State management in Angular using NgRx
Ideally you want to create pure components in your angular app where you don’t want to inject data services directly into your component constructor which creates a dependency tree, now imagine if you have a parent component with multiple child components and within these child components you have more components under it imagine your dependency tree now and not to forget your unit testing, also the data fetched from the NgRx store is always immutable. To avoid this in medium/large size Angular apps the best solution is to use the NgRx library which is the angular implementation of the React’s Redux library.
Note : Avoid NgRx for small Angular apps since there is a lot of unavoidable boilerplate code once you add the library to your project.
There are five important parts in NgRx :
1. ACTIONS
2. REDUCERS
3. STORE
4. SELECTORS
5. EFFECTS
ACTIONS : Actions are one of the main building blocks in NgRx. Actions dispatch 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.
In this example, I have an app with a list of artists which will be fetched from an in memory api, on this list I will be adding new artists.
You use the createAction function to create your actions which takes in two parameters, first the type of action and second which is an optional parameter is the payload.
To call these actions you use the dispatch function on a particular store.
REDUCERS : 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.
Reducers are nothing but functions which are used to manipulate a store.
You use the createReducer function to create your reducer, it takes in two parameters, first the initial state of your store and then the actions to which you need to listen and manipulate the state of the store (observe how you are not mutating data here).
Below is the way you configure your reducer in your AppModule
SELECTORS : Selectors are pure functions used for obtaining slices of store state. @ngrx/store provides a few helper functions for optimising this selection.
There are different ways to select your store, you first need to inject the Store type casted with your AppState into your component constructor, then you can use the select function which returns an Observable of the type of store information you select.
You can also create your selector using your createSelector function in its own respective file as well.
EFFECTS : 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.
Effects are used to make external API calls ideally, they are nothing but Angular injectable services.
First you will have to install the @ngrx/effects package from npm. You then have to create an Angular service and use the createEffect function where you mention the type of action which triggers the effect and you use different mapping operators to make the API calls and once the data is received you dispatch another success action which tells the reducer to update the state, this automatically updates the data in the component.
Ideally you use the exhaustMap operator for reading a list from the API, concatMap operator for adding an item to a list, mergeMap for removing an item from a list, and switchMap for searching.
The whole NgRx library uses the RxJs Subjects at its core. Until next time Adios!
