How to Create New RxJS Operators

Losing state in your RxJS streams? Learn to build custom operators that carry values through your pipeline, resulting in cleaner, more maintainable code.

#1about 5 minutes

The history and evolution of ReactiveX and RxJS

ReactiveX originated at Microsoft to simplify concurrent programming and evolved into libraries like RxJava at Netflix and the widely used RxJS.

#2about 4 minutes

How pipeable operators changed the RxJS API

RxJS version 5.5 introduced the pipe function, decoupling operators from the observable object and enabling developers to create their own.

#3about 5 minutes

Addressing the challenge of long, unreadable pipelines

Using RxJS extensively in a Node.js backend led to long, unreadable pipelines, which were improved by extracting logic into named functions.

#4about 4 minutes

Preserving state in pipelines using tuples and zip operators

The flatZipMap operator was created to solve the problem of losing access to previous values in a stream by pairing results into a tuple.

#5about 6 minutes

Implementing custom operators with TypeScript generics

Creating a custom operator involves defining a function that returns an OperatorFunction with specific input and output types using TypeScript generics.

#6about 6 minutes

Advanced typing for complex custom operators

Complex operators like flatListFlatMap demonstrate how advanced TypeScript features like ObservableInput and ObservedValueOf are essential for correct type inference.

#7about 28 minutes

Q&A on testing, pitfalls, and contributing

The Q&A session covers unit testing custom operators, handling errors, key differences with RxJava, and how to contribute to open-source RxJS libraries.