RxJS Best Practices Aren't Always Black and White

Подписаться 13 тыс.

Просмотров 4 тыс.

50% 1

To work with data in Angular, we use RxJS. In this talk, we look at some best practices including avoiding unsubscribe hell and nested subscriptions. We look at the difference between mergeMap, concatMap, and switchMap. And between a forkJoin, combineLatest, and zip.
Then we walk through how to set up your RxJS pipeline to react to user actions. Join me as we look at these and other suggestions for getting the most from RxJS.
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊About Me
Hey! I'm Deborah Kurata
I'm a software developer and RU-vid content creator. I speak at conferences such as VS Live and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 10,000+) over the past 5 years. Courses include: "Angular: Getting Started", "Angular Routing", "RxJS in Angular: Reactive Development" and "Object-Oriented Programming Fundamentals in C#". For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE).
View my RU-vid content: / @deborah_kurata
Contact me on Twitter: / deborahkurata
Find my Pluralsight courses: www.pluralsight.com/profile/a...
Access my freeCodeCamp articles: www.freecodecamp.org/news/aut...
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#rxjs #observable #rxjsangular #rxjsinangular #angularrxjs #rxjsoperators #rxjstutorial #kurata #angular #angular_developer #angulartraining

Развлечения

Опубликовано:

2 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 35

@gandodiallo4146 Год назад

Thank you Deborah. Your explanations are Crystal clear. From now I will go declarative

@deborah_kurata Год назад

Excellent! All the best!

@nick.h7566 9 месяцев назад

Hands down, whenever I need RxJs information Deborah is ALWAYS the person I come to. Clearest explanations 100% of the time!

@deborah_kurata 9 месяцев назад

Wow, thank you! That's great to hear! 🙏🏼

@danieljazz1 3 месяца назад

You're an amazing teacher, Deborah. Thanks a lot! Thinking reactive is not so trivial haha. Your content is helping me so much :)

@deborah_kurata 3 месяца назад

Wow! Thank you so much for the kind words! 😊

@xkons Год назад

I've been working with rxjs for a long time and thoroughly enjoy watching your videos on the topic! You definitely want to subscribe to Deborah! (pun intended)

@deborah_kurata Год назад

Just ignore it when the video says to unsubscribe! LOL! Thank you for posting!

@chandanbhindwar5347 Год назад

Many thanks and love you ma'am. Your teaching style is very unique and one can learn programming very easily without any tension.

@deborah_kurata Год назад

That is great to hear. Thank you!

@msasoftware 7 месяцев назад

You have solved some issues for me that I had been trying to figure out for a long time. Thank you so much.

@deborah_kurata 7 месяцев назад

Great to hear! Glad it was useful!

@user-bx1cu5nq8e 10 месяцев назад

Thank you ma'am ! Great tutorial ! this is just awesome, you are awesome Deborah ! ManytThanks for putting such effort and love on yours videos

@deborah_kurata 9 месяцев назад

Glad it was helpful! Thank you so much!

@MarcoPinheiro Год назад

Thank you again Deboarah, you are one of my references in my new Angular/RxJS life, learning more and more with you, always. Cheers from Portugal

@deborah_kurata Год назад

Thank you! We'd love to come to visit Portugal! Do you have any suggestions for places to go? Local meetups we could attend while we are there?

@MarcoPinheiro Год назад

@@deborah_kurata Portugal is very small so in 3 days you can get the best of the North (OPorto, Aveiro (my city), Lisbon (capital) and even the south beaches (Algarve) :) all by train (Alfa Pendular). I'm a little out of the path of local meetups in last years.

@deborah_kurata Год назад

@@MarcoPinheiro Thanks for the info!

@nick.h7566 9 месяцев назад

Salema in Algarve is definitely a place worth visiting! Stunning! But then again, the whole of Portugal is

@cdotforce Год назад

Best RxJS videos ever!

@deborah_kurata Год назад

Thank you so much!

@digitaldaridesatv1545 Год назад

Thank you Deboarah Kurata!

@deborah_kurata Год назад

Thanks for watching!

@MultiWarrr Год назад

Value of ur rxjs vids is marginal. Thanx alot

@deborah_kurata Год назад

What could make them better?

@MultiWarrr Год назад

@@deborah_kurata if i may suggest and if ur time permits angular videos illustrated in what could be described as bare metal explanation or in other words how thar complex concept is compiled in browser

@developerfriendly Год назад

Thanks for the great tutorial Deborah! One question how to have a loading: true/false indicator during Ajax call? when to set loading true & false while using async pipe?

@deborah_kurata Год назад

Excellent question! I've already got content queued up for the next few days, but I'll put together a video of this later this week. Short answer, you can define the flag as a BehaviorSubject and emit when the value needs to change. Then react to that change notification.

@sebastianbusek2087 Год назад

Hello Deborah, thank you for sharing the tips. However, I still would have a question about being declarative. You've shown how to declare only the read operation, but what about the mutations (create, update, delete)? I mean, in your example, the Users service, you have only onSelected(user) public method returning void, which does make sense. How would you define create/update/delete methods to complete CRUD? I'm a little bit afraid that in this case I still would need to return Observable, right? If we take as an example the Create user (after creating a user, set him/her as a selected user), would have you something like this? public create(user: UserModel): Observable { return this._http.create(user).pipe( do(resp => this.onSelected(resp.id)), // load created user map(() => undefined), // throw away the server response to match the observable type cacheError(this.handleError), ); } Let's not consider caching at this moment, to keep it simple.

@deborah_kurata Год назад

Great question! I'm on vacation until Wednesday and will get back to you then. In the meantime, I have an example here: github.com/DeborahK/Angular-RxJS

@deborah_kurata Год назад

Did the example I provided help? From the APM-WithExtras in the product-edit.service.ts: ```TypeScript // Save the product via http // And then create and buffer a new array of products with scan. productsWithCRUD$ = merge( this.productsWithCategory$, this.productModifiedAction$ .pipe( concatMap(operation => this.saveProduct(operation)) )) .pipe( scan((acc, value) => (value instanceof Array) ? [...value] : this.modifyProducts(acc, value), [] as Product[]), shareReplay(1) ); ``` I'm currently finishing my JavaScript course here on YT. As soon as that is finished I'll add more content on using a reactive approach to CRUD.

@konstantinospapakonstantin8128 9 месяцев назад

Hi Deborah, is there a github repository to try out your teachings?

@deborah_kurata 9 месяцев назад

My github is here: github.com/deborahk

@JBuchmann Год назад

When programming declaritively with RxJS, I often feel like I'm doing something wrong... for example, in a component, if I'm doing something like this: myObs$ = this.myService.getMyObs(); Obviously I can bind myObs$ to the template with the async pipe, but what if I also need that data in some logic in my component (like in some method/function). So with that code, I'd add a pipe, and tap, and in the tap assign the data to a local variable which I can then use in the template function. That pattern seems like way more work than just doing the same thing in a subscribe. So my question is.... am I doing this right? Or is there a much better way that I'm missing?

@deborah_kurata Год назад

It depends on what you are doing ... but you may be able to accomplish the same thing using the myObs$ observable. For example, this code finds the selectedProduct in the products$ observable without needing to use a separate variable to store the data: selectedProduct$ = combineLatest([ this.products$, this.productSelectedAction$ ]).pipe( map(([products, selectedProductId]) => products.find(product => product.id === selectedProductId) ) ); But how we work with RxJS may change a bit soon with the new Angular v16 signals. We may want to get the emitted values and put them into a signal we can work with instead.