Introduction
This is the third post on topic of NgRx. Previous two posts are available on the following links
In this post, we’ll cover how to strongly type our actions.
In NgRx world, its the action that makes the application go. When user click something, we kick-off an action. Need to load data, we kick-off an action. User updates a value and click save, we kick-off another action.
The result of the action is often a change of state.
But lets first see how our actions are currently setup
Staring Code
We’ve following places where actions are defined with strings
also in products-list.component as follows
without strong typing, it is very easy to make typing mistakes in those strings.
Lets see next how can we improve the situation.
Strong Typing Actions
There are several benefits of strongly typing our actions
- Helps prevent hard to find bugs due to typos.
- Improves tooling experience.
- Documents to set of actions that application can do.
The recommended way to strongly type actions is to build action-creators using createAction.
To keep our actions organized, we can define those in their own file.
Defining Actions with Data
Some actions require associated date e.g. when selecting a product from list and showing it in edit-page. For that we can use props and its generic type parameter (second argument to createAction function) for the meta-data defining the structure of the action’s data.
Now with our actions defined, we can use them in reducers and components.
Using Strongly Typed Actions
We can import actions with a namespace and then use those in the createReducer function as follows
while we are here, lets add handler for other actions to the reducer.
Next, lets move on the component code and use strongly typed action there as well.
Now run the application and see that application works without any issue after the changes.
Using Actions and Selectors for component communication
I have restructured products module and now it has separate components to list products and edit product. This will help with the examples we are going to cover. However, nothing has changed to NgRx code part from previous example.
Selecting a product, shows it details in the right panel.
Following is the code which uses a service to retain the selected product:
Now let’s update this method to dispatch the action instead as follows:
This was easy, now when user selects a product, we dispatch the action and retain the current product in store.
Next, similarly, we also updated the newProduct() method in similar way to use the actions.
following is the UI update
Now, we are dispatching actions, we want to subscribe to the currentProduct selector, so we receive change notifications. We can do that as follows in product-list component which uses currentProduct to highlight it in the list:
In a similar, we can update the subscription code inside product-edit component as shown below
our product-edit component now receives notification whenever the currentProduct changes and then display it accordingly.
With this, we’ve wired-up few actions in our application. We’ll end this post at this point.
Summary
In this post we continued with our learning of NgRx with angular and learned what role actions play in our application. We also wired-up few actions in sample application.
Following are few links related to this post
Let me know if you have questions and/or comments. Till next time, Happy Coding!