Managing State is always one of the trickiest parts in frontend applications, unlike in the backend, where databases manage the state. State management in angular is all the more important because an application state depends on it at any point in time until the application is running. Stage management data can be anything from user inputs, UI data or information through API calls.
Before having a stage management store, we did not have any single centralized way to manage the application state. But now with certain out-of-the-box solutions, we can manage the state in a single centralized place efficiently.
NGRX :
NgRx is a state management reactive library inspired by Redux. It has a central storage system which acts as a single source of truth for managing the Angular application state at any point in time without mutating the application state.
NGRX FLOW DIAGRAM :
The diagram above describes the flow of NgRx.
Consider this – say, from any component we dispatch any action and this action contains type and optionally payload. Here, type defines the action type and payload holds data to update into the store. Then it goes to the reducer function and based on the action type, performs code onto the copy of the state and returns the new state. Then the data is forwarded to the application store where the old state is overridden by the new state.
A selector is called to fetch the state whereas an effect is used to handle the side effects like http calls where one action returns new actions or observables subsequently to handle asynchronous calls.
NGRX Concepts :
Store: A central place to store the entire state of the application.
Selector: Function to fetch the state from the Store.
Action: It is an object. acting as an identifier of what kind of action is to be performed based on its types – Property and optionally payload.
Dispatcher: It helps to dispatch the action to the reducer.
Reducer: It is a function that gets the current state in the store and the action is passed as input by the library automatically. Based on that, it is found out which kind of action is involved. Then the code is performed onto the copy of the state based on payload, passed optionally.
Effects: Unlike reducers, effects work asynchronously, and listen to the action as observable. Based on the response, it returns new actions, and at the final stage, calls the reducer to update the state.
INSTALLATION:
npm install –save @ngrx/store
npm install –save @ngrx/effects
IMPLEMENTATION:
Actions:
Create an ingredient.action.ts file and add the following code.
Start importing Action from @ngrx/store and import the Ingredient Bean as well.
Define the constant variable or enum as an action identifier. Create a class for each action and implement the action. An action interface has two properties – a type and an optional payload. The type is to identify the action and to update the store with the given payload if the payload is available at all.
Reducer:
Create the ingredient.reducer.ts file and add the code given below.
Here in the reducer file, first, create the initial state which is constant for assigning the initial state. Then create the ingredient Reducer function for handling the action. Based on the action type, run the code into the switch statement. Always copy the passed state using a spread operator and then update the required properties and return the new state.
Now create the auth.effects.ts for handling the side effects while making the HTTP call.
Here, first, create the AuthEffects class for listening to the LOGIN_START action and mention the action in OfType. Then handle it and after successful https calls, new action LOGIN is to be called to add user details to the store.
Register the reducer thus created and also the effects to the app.module.ts file under the imports section.
Now Add dispatch and selector functions to modify and fetch respectively by injecting the store in the constructor.
Constructor Injection:
Dispatch Call:
Selector Call:
CONCLUSION:
In this blog, we have seen NgRX syntax, its flow and working functionality. We have learnt about creating Action, Reducer, Effects and registration thereof. NgRx is an excellent approach for solving the state management problem in large applications, especially in angular, where we have a centralized store. NgRx handles the side effects too and once the setup is done, you are good to go. But NgRx has its disadvantages as well. It adds lots of boilerplate code and brings complexity to the code when small or medium sized applications can easily be managed by services & components without involving such intricacies. So, it is wise to go for NgRx when dealing with large applications – we are sure you will find many solutions once you adopt this approach.