NgRx- Actions
Hi,
This article will talk about ‘NgRx-Actions’ in very simple way.
Before going into in deep about ‘NgRx-Actions’, I will recommend to go through about ‘Into to NgRx’, to get the basic idea about NgRx and it’s working.
As,we know the main building block of NgRx are Action, Reducer, Selector and Effects. Let us have a look about the ‘Actions’. What Actions are? and How they work?
Action in NgRx/Store is made of Interface. In the attached snapshot we can find the ‘Action Interface ’ and the location of file.
The interface has a single property, ‘type’. ‘Type’ property accepts the ‘string’ and is used for describing the action that will be dispatched in application.
Value of the type comes in the form of ‘Event’, and is used to tell about the category of action it is, and where an action was dispatched from.
The structure of project can be different for an individuals, here an attachment has been added for the structure I have used. Here is a component USER and that component has further component ADD, a Store has been made which will contain all the “building blocks of NgRx”. Inside ‘‘actions folder’’ a file named ‘user.actions.ts’ has been made which will have all the actions.
As per my learning, when we want to perform the action in general, there are 3 condition,
1. We initialize the action
Get Utkarsh Tiwari’s stories in your inbox
Join Medium for free to get updates from this writer.
2. There will be a success for that action
3. There will be a failure of that action
Similarly, In code, we make a request, there will be a success or a failure. So, for each we have 3 action in the example: ‘LoadUsersAction’, ‘LoadUsersSuccessAction’ and ‘LoadUsersFailedAction’. And each can be imported to other components as per requirement.
Type for each has been described, which tells about the category of action it is, and where(here in case ‘Users’) an action was dispatched from.
Each action has a constructor over it, which basically is for the ‘request payload or response payload’. It will be much more clear in further explanation. As it has been said earlier to be more precised, that why we need action, accordingly we can make the INTERFACES. Example: If I want to load the Users, in Response I want some properties in response, we will add that in form of INTERFACE and in constructor we can pass in place of ‘any’, So, the action will accept only that type of request or response.
I will add the interfaces, to be more clear in next steps.
When the action are made, they need to be used to produce the response for the request made, for that Action need to be dispatched.
Dispatching the action will be provided in next level, where we will also talk about Selectors, Reducers and Effects.
Hoping, This article will give some basic information about Actions, how they are made, and what is the need of Actions.
Thanks..!!
