@fogwarts/rx-tools

Rx tools ·

Rx tools is a collection of pure functions which help you 'flow' with streams

Quickstart

    npm install --save @fogwarts/rx-tools

Index

• CombineLatestTo
• WithCleanupStream

Quick Docs

CombineLatestTo

You would normally use this when you need to map multiple streams to an object. Usually input handling and such

    import { CombineLatestTo } from '@fogwarts/rx-tools';
    const { CombineLatestTo } = require('@fogwarts/rx-tools');

• Sample

    // Let's consider the timer as input events from the user
    const name$ = timer(0, 100).pipe(
        take(5), map(idx => `name: ${idx}`) // For the sake of simplicity, let's limit us to 5 events
    );
    const surname$ = timer(0, 150).pipe(
        take(5), map(idx => `surname: ${idx}`)
    );

    // We usually want to map such events to an object and do something with it
    CombineLatestTo({
        name: name$,
        surname: surname$
    }).subscribe(fullName => {
        console.log(fullName);
    });

• Output

{ name: 'name: 0', surname: 'surname: 0' }
{ name: 'name: 1', surname: 'surname: 0' }
{ name: 'name: 1', surname: 'surname: 1' }
{ name: 'name: 2', surname: 'surname: 1' }
{ name: 'name: 3', surname: 'surname: 1' }
{ name: 'name: 3', surname: 'surname: 2' }
{ name: 'name: 4', surname: 'surname: 2' }
{ name: 'name: 4', surname: 'surname: 3' }
{ name: 'name: 4', surname: 'surname: 4' }

WithCleanupStream

Used everywhere we want to avoid memory leaks. It encapsulates a cleanup stream and provides two functions: one which allows you to pipe any stream with the cleanup one (a simple takeUntil) and one which allows you to trigger the cleanup stream (has a callback as parameter so you can compose any logic here). Plays very nicely with useEffect

    import { WithCleanupStream } from '@fogwarts/rx-tools';
    const { WithCleanupStream } = require('@fogwarts/rx-tools');

• Sample

    // Let's say that we are working inside a class component (Angular/React) and we want to capture some data
    class MyComponent {
        private pipeWithCleanup: IPipeWithCleanupStream; // We will cache these as class properties, as to be visible both from init and from destroy
        private triggerCleanup: ITriggerCleanupStream;

        componentDidMount() { // ngOnInit()
            const { pipeWithCleanup, triggerCleanup } = WithCleanupStream(); // Create the helper functions
            this.pipeWithCleanup = pipeWithCleanup; // Assign the properties
            this.triggerCleanup = triggerCleanup;

            const name$ = new Subject(); // The actual data

            this.pipeWithCleanup(name$).subscribe(name => {
                // Do whatever you want with name and be assured of memory leaks not happening
            });
        }

        componentWillUnmount() { // ngOnDestroy()
            this.triggerCleanup(); // And trigger cleanup
        }
    }

    // Let's say that we are working inside a React function component and we want to capture some data
    // This looks way better here
    const MyComponent = () => {
        useEffect(() => {
            const name$ = new Subject(); // And we want to capture some data

            const { pipeWithCleanup, triggerCleanup } = WithCleanupStream();

            pipeWithCleanup(name$).subscribe(name => {
                // Do something with name
            });

            return triggerCleanup(() => {
                // Cleanup was triggered
            });
        })
    }