Rupert  Beatty

Rupert Beatty

1671656340

Guide to RxJS: defaultIfEmpty

tldr;

RxJS pipelines are convenient ways to get work done in your applications. You can essentially tell the app the steps it needs to take, and it will go step by step through the pipeline. But what if one of the steps will potentially be empty, but you want the pipeline to continue? That’s where the defaultIfEmpty operator can come in handy. I recently learned about it when I had a similar situation, and it worked perfectly for me.

Background

I was recently working on an application where you needed to be able to add, edit, and delete data. The work needed to be done in a certain order: deletions first, then additions or edits. This is straightforward as long as there are actions for each of the above types to be done: at least one add, one edit, and one delete. But what happens if one of those types doesn’t need to be done in a given pipeline?

This is the situation I found myself in. If the delete observable was empty, nothing happened. I needed the pipeline to continue, however, and move on to adds and edits. I started searching around and found the defaultIfEmpty operator, which solved my problem for me.

defaultIfEmpty

The defaultIfEmpty operator does exactly what it sounds like: it provides a default value in the pipeline if the preceding observable doesn’t emit a value. This ensures that the pipeline doesn’t get stuck, but instead outputs a value.

Let’s look at a couple examples. First we’ll look at an example pipeline where there is a type for adds, edits, and deletes.

const deletions = [of('delete 1')];
const additions = [of('add 1')];
const edits = [of('edit 1')];

zip(...deletions)
  .pipe(
    tap((deletionResult) => console.log(deletionResult)),
    switchMap(() => zip(...additions)),
    tap((additionResult) => console.log(additionResult)),
    switchMap(() => zip(...edits)),
    tap((editsResult) => console.log(editsResult))
  )
  .subscribe();

In the above example, this pipeline will execute as expected. The deletion observables will run and emit a value, then the additions, then the edits. The result of all three sections will be logged to the console. Easy enough, right? But what do we do if we have no deletions to run?

const deletions2 = [];
const additions2 = [of('add 2')];
const edits2 = [of('edit 2')];

zip(...deletions2)
  .pipe(
    tap((deletionResult) => console.log(deletionResult)),
    switchMap(() => zip(...additions2)),
    tap((additionResult) => console.log(additionResult)),
    switchMap(() => zip(...edits2)),
    tap((editsResult) => console.log(editsResult))
  )
  .subscribe();

In this example, nothing gets logged to the console. We never move past the first step, because nothing is ever emitted from the initial zip(...deletions2) portion of the pipeline. But just because we don’t have anything to delete doesn’t mean we don’t want to continue with adding and editing the other pieces. This is where the defaultIfEmpty operator comes in handy. Insert it after a given step in the observable pipeline that could potentially emit no data. Then the pipeline will continue. Continuing with the above example, we can change it to the following to get our pipeline working again.

zip(...deletions2)
  .pipe(
    defaultIfEmpty([]),
    tap((deletionResult) => console.log(deletionResult)),
    switchMap(() => zip(...additions2)),
    tap((additionResult) => console.log(additionResult)),
    switchMap(() => zip(...edits2)),
    tap((editsResult) => console.log(editsResult))
  )
  .subscribe();

Now our pipeline continues and values are logged to the console. The defaultIfEmpty([]) operator essentially says if the preceding observable doesn’t emit a value, emit an empty array and then continue on to the next step. So, although we don’t have anything to delete, we can still do our adds and edits.

Let’s look at one last example, where we have deletions and edits to do, but no additions. Can you guess what will happen?

const deletions3 = [of('delete3')];
const additions3 = [];
const edits3 = [of('edit 3')];

zip(...deletions3)
  .pipe(
    tap((deletionResult) => console.log(deletionResult)),
    switchMap(() => zip(...additions3)),
    tap((additionResult) => console.log(additionResult)),
    switchMap(() => zip(...edits3)),
    tap((editsResult) => console.log(editsResult))
  )
  .subscribe();

If you guessed nothing happens at all, you’re close. But it does finish the delete step before stopping. So your edits never occur. To fix the issue, we just need to add another defaultIfEmpty operator.

zip(...deletions3)
  .pipe(
    tap((deletionResult) => console.log(deletionResult)),
    switchMap(() => zip(...additions3).pipe(defaultIfEmpty([]))),
    tap((additionResult) => console.log(additionResult)),
    switchMap(() => zip(...edits3)),
    tap((editsResult) => console.log(editsResult))
  )
  .subscribe();

Note: You can add the defaultIfEmpty operator in the pipe for the additions like I have above, or you can add it directly after the switchMap; either way will work.

With this minor change to our pipeline, it now finishes as we expect. The deletions are made, followed by the edits.

Conclusion

I was initially stuck with figuring out how to make sure my pipeline continued, even if there was an empty step in the pipeline. But I should have known there was an operator to help me out. There are a lot of operators, and while it makes RxJS seem overwhelming at first it’s also very convenient for situations like this. When you get stuck, ask for help and read the docs. You’re likely to find someone who’s run into the same problem and can point you in the right direction.

Here’s a StackBlitz with the examples we looked at above.

Original article source at: https://www.prestonlamb.com/

#rxjs #empty 

What is GEEK

Buddha Community

Guide to RxJS: defaultIfEmpty
Rupert  Beatty

Rupert Beatty

1671656340

Guide to RxJS: defaultIfEmpty

tldr;

RxJS pipelines are convenient ways to get work done in your applications. You can essentially tell the app the steps it needs to take, and it will go step by step through the pipeline. But what if one of the steps will potentially be empty, but you want the pipeline to continue? That’s where the defaultIfEmpty operator can come in handy. I recently learned about it when I had a similar situation, and it worked perfectly for me.

Background

I was recently working on an application where you needed to be able to add, edit, and delete data. The work needed to be done in a certain order: deletions first, then additions or edits. This is straightforward as long as there are actions for each of the above types to be done: at least one add, one edit, and one delete. But what happens if one of those types doesn’t need to be done in a given pipeline?

This is the situation I found myself in. If the delete observable was empty, nothing happened. I needed the pipeline to continue, however, and move on to adds and edits. I started searching around and found the defaultIfEmpty operator, which solved my problem for me.

defaultIfEmpty

The defaultIfEmpty operator does exactly what it sounds like: it provides a default value in the pipeline if the preceding observable doesn’t emit a value. This ensures that the pipeline doesn’t get stuck, but instead outputs a value.

Let’s look at a couple examples. First we’ll look at an example pipeline where there is a type for adds, edits, and deletes.

const deletions = [of('delete 1')];
const additions = [of('add 1')];
const edits = [of('edit 1')];

zip(...deletions)
  .pipe(
    tap((deletionResult) => console.log(deletionResult)),
    switchMap(() => zip(...additions)),
    tap((additionResult) => console.log(additionResult)),
    switchMap(() => zip(...edits)),
    tap((editsResult) => console.log(editsResult))
  )
  .subscribe();

In the above example, this pipeline will execute as expected. The deletion observables will run and emit a value, then the additions, then the edits. The result of all three sections will be logged to the console. Easy enough, right? But what do we do if we have no deletions to run?

const deletions2 = [];
const additions2 = [of('add 2')];
const edits2 = [of('edit 2')];

zip(...deletions2)
  .pipe(
    tap((deletionResult) => console.log(deletionResult)),
    switchMap(() => zip(...additions2)),
    tap((additionResult) => console.log(additionResult)),
    switchMap(() => zip(...edits2)),
    tap((editsResult) => console.log(editsResult))
  )
  .subscribe();

In this example, nothing gets logged to the console. We never move past the first step, because nothing is ever emitted from the initial zip(...deletions2) portion of the pipeline. But just because we don’t have anything to delete doesn’t mean we don’t want to continue with adding and editing the other pieces. This is where the defaultIfEmpty operator comes in handy. Insert it after a given step in the observable pipeline that could potentially emit no data. Then the pipeline will continue. Continuing with the above example, we can change it to the following to get our pipeline working again.

zip(...deletions2)
  .pipe(
    defaultIfEmpty([]),
    tap((deletionResult) => console.log(deletionResult)),
    switchMap(() => zip(...additions2)),
    tap((additionResult) => console.log(additionResult)),
    switchMap(() => zip(...edits2)),
    tap((editsResult) => console.log(editsResult))
  )
  .subscribe();

Now our pipeline continues and values are logged to the console. The defaultIfEmpty([]) operator essentially says if the preceding observable doesn’t emit a value, emit an empty array and then continue on to the next step. So, although we don’t have anything to delete, we can still do our adds and edits.

Let’s look at one last example, where we have deletions and edits to do, but no additions. Can you guess what will happen?

const deletions3 = [of('delete3')];
const additions3 = [];
const edits3 = [of('edit 3')];

zip(...deletions3)
  .pipe(
    tap((deletionResult) => console.log(deletionResult)),
    switchMap(() => zip(...additions3)),
    tap((additionResult) => console.log(additionResult)),
    switchMap(() => zip(...edits3)),
    tap((editsResult) => console.log(editsResult))
  )
  .subscribe();

If you guessed nothing happens at all, you’re close. But it does finish the delete step before stopping. So your edits never occur. To fix the issue, we just need to add another defaultIfEmpty operator.

zip(...deletions3)
  .pipe(
    tap((deletionResult) => console.log(deletionResult)),
    switchMap(() => zip(...additions3).pipe(defaultIfEmpty([]))),
    tap((additionResult) => console.log(additionResult)),
    switchMap(() => zip(...edits3)),
    tap((editsResult) => console.log(editsResult))
  )
  .subscribe();

Note: You can add the defaultIfEmpty operator in the pipe for the additions like I have above, or you can add it directly after the switchMap; either way will work.

With this minor change to our pipeline, it now finishes as we expect. The deletions are made, followed by the edits.

Conclusion

I was initially stuck with figuring out how to make sure my pipeline continued, even if there was an empty step in the pipeline. But I should have known there was an operator to help me out. There are a lot of operators, and while it makes RxJS seem overwhelming at first it’s also very convenient for situations like this. When you get stuck, ask for help and read the docs. You’re likely to find someone who’s run into the same problem and can point you in the right direction.

Here’s a StackBlitz with the examples we looked at above.

Original article source at: https://www.prestonlamb.com/

#rxjs #empty 

Sasha  Roberts

Sasha Roberts

1650625200

How to Handle RxJS Error in angular In 6 Minutes

In this video, you will learn how to use error handling in angular rxjs utilizing the error callback function of the observer, and also how to use the catchError #rxjs operato

✨ Code: https://github.com/profanis/codeShotsWithProfanis/tree/33/rxjs-error-handling

#angular #rxjs 

Kattie  Quitzon

Kattie Quitzon

1633499640

Real-Life Analog of RxJs ZIP Operator

In this video, we continue to look for real-life analogs for #rxjs operators, and today we are going to look at the ZIP operator. This operator allows you to combine multiple streams together and emit an array of values arrived from combined streams. Additionally, this operator cares about the order of how values should be paired (it is hard to explain it with text - better one time to see). I hope you will find this video useful. Stay tuned and enjoy watching!

🕒 Time Codes:
00:00:00 - Intro;
00:00:39 - Mental model for ZIP operator;
00:02:56 - Let's code it!;
00:13:20 - Outro;

#rxjs  #angular  #webdevelopers 

Cómo Usar El Operador SwitchMap En RxJS En angular

Tutorial sobre el uso del operador switchMap en #RxJS (ReactiveX) en #Angular. Dura más de lo habitual debido a que lo explicamos con dos ejemplos, uno muy básico y uno de los típicamente llamados "Ejemplo de la Vida Real" (Real life example). Para ver los puntos más importantes, les dejamos los siguientes minutos:

#rxjs #angular 

Murray  Beatty

Murray Beatty

1596344940

Help Your Data Science Career By Publishing Your Work!

This guide aims to cover everything that a data science learner may need to write and publish articles on the internet. It covers why you should write, writing advice for new writers, and a list of places that invite contributions from new writers.

Let’s get to it!

Why you should write:

Writing isn’t just for “writers”. The art of writing well is for everyone to learn - programmers, marketers, managers and leaders, alike. And yes, data scientists and analysts too!

You should write articles because when you do:

You learn:

Writing teaches you the art of writing. It’s kind of circular but it’s true.

Make no mistake, the art of writing isn’t about grammar (although, that’s important) and flowery language (definitely not important). It’s about conveying your thoughts with clarity in simple language.

And learning this art is important even if you absolutely know that you don’t want to write blogs/articles for a living. It’s important because all the jobs have some form of writing involved - messages, emails, memos and the whole spectrum. So basically, writing is a medium for almost any job you can have.

Apart from that, when you write you learn the things that you thought you knew but didn’t really know. So, writing is an opportunity to learn better.

#data science career tips #guide #guides #publishing work #writing guide