Table of Contents
IntroductionSteve Kinney introduces the course by discussing a brief overview of the material to be covered in the course, what Rx.js is, and various reasons to learn Rx.js to handle events. Handling multiple APIs, loading indicators, and dragging and dropping are some of the events Rx.js can help improve.
Basic Observables OverviewSteve discusses the utility methods of and from, when to use each of those methods, and provides a brief overview of the course website. Student questions regarding if any frameworks will be covered and how Rx.js knows when the event is completed are also covered in this segment.
Creating ObservablesSteve walks through the basic-Observables test in the course repo, how to implement an Observable using of, and how to complete an Observable when finished. A student's questions regarding if the standard method executes before the Observable results are also covered in this segment.
Creating Observables ExerciseStudents are instructed to unskip each test, collect the Observable values as their emitted, and only assert an expectation once the Observable has been completed.
Creating Observables SolutionSteve walks through the solution to the creating Observables exercise.
Creating Custom Logic ObservablesSteve demonstrates how observables work under the hood by creating an observable with custom logic.
EventsSteve discusses the event helper function fromEvent, which creates an observable based on event listeners. A brief discussion regarding the bindCallback and fromFetch functions is also provided in this segment.
fromEvent ExerciseStudents are instructed to use fromEvent to create an observable that streams click events, subscribe to that observable, and use addMessageToDOM to add a message to the DOM whenever the stream emits a value.
fromEvent SolutionSteve walks through the solution to the fromEvent exercise.
Intervals & Timers
Intervals & TimersSteve discusses creating Observables using the helper utility functions interval, timer, unsubscribing from an Observable, and answers a student's question regarding reusing the interval component. Interval creates an Observable stream that produces values at a user-defined number of milliseconds.
Intervals & Timers SolutionSteve walks through the solution to the intervals and timers exercise.
OperatorsSteve discusses the .pipe method in Rx.js and brief overviews regarding the operators take, skip, takeWhile, skipWhile, filter, map, mapTo, reduce, scan, and tap. A student's question regarding whether .pipe is an args function or if it has a max limit is also covered in this segment.
Basic Operators ExerciseStudents are instructed to try and get comfortable with basic operators by making the provided tests pass using basic operators.
Basic Operators SolutionSteve walks through the solution to the basic operators exercise.
Combining Operators ExerciseStudents are instructed to edit the counter to skip values until a user hits the start button using takeUntil and skipUntil. Hitting the start button should start the counter, and hitting the stop should stop the counter.
Combining Operators SolutionSteve walks through the solution to the combining operators exercise. A student's question regarding if takeUntil is the best approach for subscription management is also covered in this segment.
Manipulating TimeSteve demonstrates using various operators in Rx.js that manipulate time, including throttleTime, debounceTime, delay, debounce, and throttle. A student's question regarding how Rx.js handles how much resource load will be placed when setting wait times is also covered in this segment.
Merging TimelinesSteve discusses strategies for combining and merging multiple Observables. A demonstration of combining two streams using the merge, concat, and race operators is also provided in this segment.
Higher Order Observables
Higher Order ObservablesSteve discusses higher-order Observables, returning Observables, and mapping operators, A student's question regarding if some of the operators could be used to implement an undo operation in the case of a UI update rollback is also covered in this segment.
MappingSteve demonstrates how to map through an array of Observables using mergeMap and switchMap. The mergeMap operator projects each source value to an Observable, then merged in the output Observable. The switchMap operator projects each source value to an Observable, which is merged in the output Observable, emitting values only from the most recently projected Observable.
switchMap ExerciseStudents are instructed to use switchMap to switch between an interval timer and NEVER based on the "Start" and "Stop" buttons.
switchMap SolutionSteve walks through the solution to the switchMap exercise.
Fetching from an API
Fetching from an APISteve demonstrates fetching data from an API using mergeMap and exhaustMap to handle requests. A brief walkthrough of error handling and handling a delayed response with an Observable is also covered in this segment.
catchError Operator & RetrySteve walks through using the catchError operator to catch an Observable instead of letting it through. Errors must be caught in the same scope as the error is thrown.
Creating an API Data StreamSteve demonstrates creating an API data stream using exhaustMap, mapTo, switchMap, and merging fetch and stop events. The data stream will automatically refresh at regular intervals and fetch new data from the API.
Async UISteve walks through creating an autocomplete function for a search input that utilizes switchMap to handle delayed API responses. The operator debounceTime is also used to delay sending the new fetch request until the user pauses.
Loading Data Over TimeSteve live codes an improved search function that autocompletes, fetches, and displays the first value that matches the input search term. The enhanced function then makes a fetch request for the APIs expanded version of that matching value.
Loading StatesSteve discusses edge cases to account for when creating a loading indicator and walks through what is included in the base loading indicator. A demonstration of how to show a loading indicator after a set interval to account for a fast API response and then remove the indicator once the data is received is also covered in this segment.
Racing DataSteve live codes an improved loading indicator that displays based on how long the loading indicator has been displayed and how fast the fetched API data has been retrieved. The race operator will determine and use the Observable that emits first.
Wrapping UpSteve wraps up the course by answering student questions regarding how often subjects are used, advice for using Rx.js outside of Angular, and improving a process manager to handle large amounts of data. Additional resources for everyday situations using Rx.js and if Rx.js is recommended over Redux-Saga in a React app for analytics are also covered in this segment.