Collect, Combine and Cache RxJS Streams for User-Friendly Results
summary
Shows concrete RxJS code that replaces imperative GET-and-subscribe patterns with declarative observables: services expose streams consumed by the template via the async pipe, enabling onPush change detection. Demonstrates combining lookups with products using combineLatest, handling nested related requests with concatMap/mergeMap/switchMap, creating action streams with Subject/BehaviorSubject, and caching backend results with shareReplay so the rebuilt UI reuses data without extra round trips.
AI-written summary · about
chapters (17)
- 0:00Intro
- 0:58Declarative approach to
- 1:32Sample Application - Reactive Development
- 2:06Current Pattern for Retrieving Data
- 2:48Declarative Pattern for Retrieving Data
- 4:04Template
- 6:17More Declarative, More Reactive
- 8:16Declaratively Define the Category Stream
- 10:18RxJS Creation Function: combineLatest
- 11:21Combining the Streams
- 15:43concatMap - Waits
- 16:51mergeMap - Runs in parallel
- 18:14switchMap - Always wants the next one
- 19:47Reacting to Actions
- 20:35Creating an Action Stream private productSelectedAction - new Subject number()
- 24:11Combining Data and Action Streams
- 26:39Emitting Re-executes the Pipeline
related talks
31mCollect, Combine, and Cache RxJS Streams for User-Friendly Results...
19mRxJS Patterns in Angular
21mRxJS Best Practices Aren't Always Black and White
47mCool RxJS Tricks
27mEmbrace Reactive Programming in React and Vue with RxJS
32mMastering Reactive Programming with RxJS
01h 45mRxJs from Scratch
27mReactive Programming in Node