Using the map operator to transform data

When making the API/HTTP calls in a web application, it is often the case that the server doesn't return the data in a form that is easier to directly render to the UI. We often need some sort of transformation of the data received from the server to map it to something our UI can work with. In this recipe, you're going to learn how to use the map operator to transform responses from an HTTP call.

Getting ready

The app that we are going to work with resides in start/apps/chapter05/rx-map-operator inside the cloned repository:

1. Open the code repository in your Code Editor.
2. Open the terminal, navigate to the code repository directory and run npm run serve rx-map-operator to serve the project

This should open the app in a new browser tab and you should see the following:

Figure 5.5 – The rx-map-operator app running on http://localhost:4200

Now that we have the app running locally, let's see the steps of the recipe in the...

Using the switchMap and debounceTime operators with autocompletes for better performance

For a lot of apps, we have features such as searching content as the user types. This is a really good user experience (UX) as the user doesn't have to press a button to do a search. However, if we send a call to the server on every key press, that's going to result in a lot of HTTP calls being sent, and we can't know which HTTP call will complete first; thus, we can't be sure if we will have the correct data shown on the view or not. In this recipe, you'll learn to use the switchMap operator to cancel out the last subscription and create a new one instead. This would result in canceling previous calls and keeping only one call—the last one. And we'll use the debounceTime operator to wait for the input to be idle before it even tries to make one call.

Getting ready

The app that we are going to work with resides in start/apps/chapter05/rx-switchmap-operator inside...

RxJS custom operator

By following the other recipes in this chapter, I have to ask if you've become a fan of RxJS yet. Have you? Well, I am. And in this recipe, you're going to level up your RxJS game. You're going to create your own custom RxJS operator that just taps into any observable stream and logs the values on console. We'll call it the logWithLabel operator.

Getting ready

The app that we are going to work with resides in start/apps/chapter05/rx-custom-operator inside the cloned repository:

1. Open the code repository in your Code Editor.
2. Open the terminal, navigate to the code repository directory and run npm run serve rx-custom-operator to serve the project

This should open the app in a new browser tab. If you click the Start Stream button while you have the Devtools open, you should see the following:

Figure 5.11 – The rx-custom-operator app running on http://localhost.4200

Let's jump into the recipe steps in the next section.

How to do it...

Retry failed HTTP calls with RxJS

In this recipe, you're going to learn how to retry HTTP calls smartly with RxJS operators. We're going to use a technique called Exponential Backoff technique. Which means that we retry the http calls but with each next call having a delay more than the previous time for the attempt. And we stop after a number of maximum tries. Sounds exciting? Let's get into it

Getting ready

The app that we are going to work with resides in start/apps/chapter05/rx-retry-http-calls inside the cloned repository:

1. Open the code repository in your Code Editor.
2. Open the terminal, navigate to the code repository directory and run npm run serve rx-retry-http-calls with-server to serve the project with the backend server

This should open the app in a new browser tab and you should see the following:

Figure 5.13 – The rx-retry-http-calls running on http://localhost.4200

Let's jump into the recipe steps in the next section.

How to do it…...

Using NgRx selectors to select and render state in components

In the previous recipes, we created some actions, a single reducer, and we integrated devtools to observe the state changes. However, our bucket application still renders the data using some variables in BucketService. In this recipe, we’re going all in with NgRx. We’re going to render the bucket items from the state as we already are saving them in the NgRx store.

Getting ready

The app that we are going to work with resides in start/apps/chapter06/ngrx-selectors inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project:

   npm run serve ngrx-selectors
   

   This should open the app in a new browser tab, and you should see the following:

   

   Figure 6.8: Using the ngrx-selectors app running on http://localhost:4200

Now that we have...

Using NgRx effects to fetch data from API calls

In this recipe, you’ll learn how to use NgRx effects using the @ngrx/effects package. We have an app that already has @ngrx/store and @ngrx/store-devtools installed. And we are able to add and remove items from the bucket. However, in this recipe, we’ll use a server to receive, store, add, and remove items from a bucket, i.e., the data will live in the NgRx store as well as on the backend.

Getting ready

The app that we are going to work with resides in start/apps/chapter06/ngrx-effects inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project with the backend app:

   npm run serve ngrx-effects with-server
   

   This should open the app in a new browser tab, and you should see the following:

   

   Figure 6.9: ngrx-effects app running on http://localhost...

Using NgRx Component Store to manage the state of a component

In this recipe, you’ll learn how to use the NgRx Component Store and how to use it instead of the push-based Subject/BehaviorSubject pattern with services for maintaining a component’s state. We’ll also see how this can facilitate cross-component communication using the Component Store.

Remember that @ngrx/component-store is a standalone library and doesn’t correlate with Redux or @ngrx/store, and so on.

Getting ready

The app that we are going to work with resides in start/apps/chapter06/ngrx-component-store inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project with the backend app:

   npm run serve ngrx-component-store
   

   This should open the app in a new browser tab, and you should see the following:

   

   Figure...