Back to the homepage
NgRx

NgRx – tips & tricks

After a long break, it’s time for the next batch of tips & tricks!

1. withLatestFrom -> concatLatestFrom

As you probably already know from the article linked in the introduction, when there is a need to use a value in the state in effect, a good solution is to use the withLatestFrom operator. However, very few people know that using this operator without the flattening operator (switchMap, concatMap, mergeMap, exhaustMap) has a side effect. The withLatestFrom operator subscribes even if the root observable does not emit a value. If you need to get the effect without using the flattening operator, use concatLatestFrom instead of withLatestFrom. For example:

This is where the fromBooks.getCollectionBookIds selector will be subscribed regardless of whether the AddBookSuccess action is dispatched:

Here on the other hand, the from Books.getCollection BookIds selector subscribes only when the AddBookSuccess action is dispatched:

2. Nx DataPersistence – the key to good results

Nx DataPersistence provides a set of auxiliary functions that enable the developer to manage the state in Angular taking into account synchronization and error handling strategy. These are:

  • Optimistic update – first updates the data on the client’s side, only later allows it to be synchronized with the data obtained from the backend. In the case of a data update failure on the server-side, the undoAction handler provides us with the undoAction handler, which allows us to roll back the changes made on the client-side.
  • Pessimistic update – the opposite of the above. Firstly, it updates the API side data, and after a successful operation, it updates the client-side data. In the event of a failure of the operation on the server side, there is no need to roll back the changes. While waiting for the server’s response, the user should receive information about the operation in progress (e.g. by a progress spinner).
  • Fetch – data download. The crucial element is the ability to pass the ID of the retrieved object to the effect so that when the same action is called for different objects the queries will be executed in parallel.
  • Navigate – this allows you to check whether the activated path contains the component specified in the parameter. If so, it will execute the given command.

Nx DataPersistance makes it extremely easy to manage the state with NgRx, so I recommend reading this documentation and implementing it into your project.

3. Navigating with NgRx

As our app grows, managing navigation can get complicated. Use the router-store to facilitate debugging of your application routing. From now on, the store will dispatch several actions with each launched navigation, which, in combination with Redux Devtools, allows you to follow step by step what is happening in the navigation.

Additionally, if you use @ ngrx/entity in your project, you can use selectors prepared for the use of router-store. They give i.a. the ability to select data from the store based on the URL path, without the need to retrieve information about the route in the component.

4. Between the state and the component – the facade

Using facade is recommended if you want to improve the organization of the component that uses store and improve the readability of the code. Facades are responsible for creating an additional layer between the component and the state of the application. You can understand it as an API that is shared for components by the store. There is no need to elaborate on how to create a facade as there is already a great article from Thomas Burleson about it. From my personal experience, after the implementation of the first facade, I did not want to and have never returned to using the store directly in components.

5. Runtime checks

To ensure that your NgRx-based functionalities are compatible with its key concepts, use runtime checks – an option of configuration for the store. Runtime checks allow you to check the operation of our code and, if necessary, inform about an error in the console. You might find this helpful during development. If you want to know all the configuration options, I refer you to the well-written documentation.

6. Getting payload in effect

If you pass an object to action and want to extract its value from the final result, you can use the pluck operator.

If we want to use such action:

the effect will probably look like this:

By using the pluck operator, we get rid of the need to refer to the value of bookId from action multiple times:

 

That’s all for today!

Let me know in the comments if you learned something new thanks to this post and would like more of this type of content on the blog!

About the author

Adam Bartoszko

Angular Developer at House of Angular. Adam is an Angular Developer interested in both software development and its management. A long time FIFA player, whose main means of transport are inline skates.

Don’t miss anything! Subscribe to our newsletter. Stay up-to-date with the latest trends, tips, meetups, courses and be a part of a thriving community. The job market appreciates community members.

Leave a Reply

Your email address will not be published. Required fields are marked *