RxJs In Practice (with FREE E-Book)

Learn how the RxJS map operator transforms an Http observable payload into a courses array using pipe, map, and a reusable Http observable utility.

Learn to build rxjs-based components by deriving beginner and advanced course lists from a single http observable, avoid callback hell, and adopt reactive design over imperative subscribe patterns.

Refactor a component to a reactive design by deriving two observables (beginner and advanced courses) from a single http observable and using the async pipe in the template.

Explain how the shareReplay operator in RxJS shares a single http observable across multiple subscribers, preventing duplicate http requests and using tap for logging.

Learn how to concatenate observables with the concat operator, emit values sequentially, and understand completion before subscribing to the next source, illustrated with marble diagrams.

learn to implement a form draft pre-save by joining a form value observable with a backend save observable using rxjs filter and concatenation through concatMap, avoiding nested subscribes.

Demonstrate the RxJS concatMap operator by mapping form changes to back-end HTTP put call, creating a derived observable and concatenating it to preserve order and safe sequencing.

Explore the merge strategy for combining observables by subscribing to multiple streams in parallel, emitting values as they arrive, finishing only when all streams complete, and propagating errors immediately.

Explore the mergeMap operator in rxjs, mapping each source value to a new observable and emitting results in parallel for http requests, while contrasting with concatMap for ordered saves.

Explore how the exhaustMap operator prevents multiple parallel save calls by ignoring new save clicks while a backend request is ongoing, unlike concatMap.

Learn how to implement a cancellable http observable in RxJS using an abort controller to cancel in-flight fetch requests on unsubscribe, with a search example and a cancelable interval.

Learn to implement a typeahead search for course lessons using the switch map operator in the course component, including http fetching of the course and its lessons via observables.

Learn to implement a typeahead by debouncing input with debounceTime, removing duplicates with distinctUntilChanged, and routing stable queries to the backend using switchMap.

Transform the search term stream into backend requests with switchMap, canceling ongoing searches. Concatenate the initial lessons with search results to deliver a seamless flow.

Explore RxJS error handling by catching errors, recovering with an alternative value via catchError and the of operator, and retrying failed observables.

Explore rxjs error handling with catch and rethrow, implement http observable error checks using the ok flag, and apply finalize for cleanup across multiple subscriptions.

Learn how to implement a retry when error handling strategy in rxjs, waiting two seconds between failed http requests and retrying until success.

Refactor the course component with the startWith operator to initialize the search stream with an empty string, triggering the initial lesson fetch and reducing code.

Compare throttling and debouncing in RxJS, explore throttle and throttle time operators, and apply them to typeahead and streaming data to control output rate.

Create a custom rxjs operator called the debug operator that logs messages at selectable levels and passes through the source observable to aid debugging.

Implement a custom rxjs debug operator with a private logging level and enum of trace, debug, info, and error to conditionally print messages to the console.

Master the RxJS forkJoin operator by triggering course and lessons http requests in parallel and emitting a tuple of the course and lessons once both complete.

Kick off a new section on RxJS in practice by building a custom centralized store from scratch, using RxJS subjects (plain, behavior, replay) and related operators.

Explore rxjs subjects as both observer and observable, and compare them with standard observable creation. Learn multicasting with a subject and deriving observables from it.

Discover how behavior subject remembers the last emitted value and delivers it to late subscribers, starting with an initial value for early subscribers and enabling a store-like data flow.

Explore async subject and replay subject in RxJS, learning how an async subject emits only the last value on completion, while a replay subject replays all values to late subscribers.

Design a centralized RxJS store using a BehaviorSubject to cache courses in memory, expose a courses observable, and prevent repeated HTTP requests across routes, via an Angular service.

Load initial data at app startup via the store, fetch courses from the backend, emit them through a courses observable, and provide selectors for beginner and advanced courses.

Implement optimistic data modification in a BehaviorSubject store by adding a save course operation that updates in memory, broadcasts changes, and persists via HTTP put.

Refactor the course component to fetch course data from the in-memory store using a new select course by id selector, replacing backend requests. Introduce RxJS operators for store-derived observables.

Learn how to force completion of long running observables using RxJS first and take operators, enabling forkJoin to emit results from a course observable and its derived streams.

Demonstrates the withLatestFrom operator in RxJS to combine a long-running course observable with a backend lessons observable, producing a [lessons, course] tuple for reactive data flows.

This conclusion highlights core rxjs concepts—streams, observables, and operators. It demonstrates building reactive components with async pipes, a centralized store, and robust error handling.