[RxJS] Implement the `map` Operator from Scratch in RxJS

While it's great to use the RxJS built-in operators, it's also important to realize you now have the knowledge to write them by yourself if needed. The mapoperator turns out to be a simple MapSubscriber which takes a function and applies it to the value passed to next.

map.js:

import { Subscriber } from "rxjs";

class MapSubscriber extends Subscriber {

  constructor(sub, fn) {

    super(sub);

    this.fn = fn;

  }

  _next(value) {

    this.destination.next(this.fn(value));

  }

}

export const map = fn => source =>

  source.lift({

    call(sub, source) {

      source.subscribe(new MapSubscriber(sub, fn));

    }

  });

multiply.js:

import { map } from "./map";

export const mul = number => map(v => v * number);

index.js:

import { from, Subscriber } from "rxjs";

import { multiply, mul } from "./multiply";

const observable$ = from([, , , , ]);

const subscriber = {

  next: value => {

    console.log(value);

  },

  complete: () => {

    console.log("done");

  },

  error: value => {

    console.log(value);

  }

};

observable$.pipe(mul()).subscribe(subscriber);

observable$.pipe(mul()).subscribe(subscriber);

巴特西

[RxJS] Implement the `map` Operator from Scratch in RxJS

最新文章

热门文章