Exploring the reactive pattern for the autosave feature

You remember the golden rule from Chapter 5, right? We should think of everything as a stream. So, let’s start by identifying our streams.

Here, we can think of the save operation as a stream – it is the result of the this.service.saveRecipe(<Recipe>formValue) method, which calls this.http.post<Recipe>(`${BASE_PATH}/recipes`, formValue. We will call it saveRecipe$.

The saveRecipe$ Observable is responsible for saving the data in the backend and will initiate the http request when subscribed to.

To avoid nesting subscriptions, what we can do in this situation is map or transform the form value emitted by the valueChanges Observable to the saveRecipe$ Observable. The result is what we call a higher-order Observable.

Not clear? Don’t worry – we will explain this in detail in the next section.

Higher-order Observables

So, what is a higher-order Observable? A higher-order Observable...