react-rxjs/packages/utils/README.md

@react-rxjs/utils

Installation

npm install @react-rxjs/utils

API

useSubscribe

A React hook that creates a subscription to the provided observable once the component mounts and it unsubscribes when the component unmounts.

Arguments:

• source$: Source observable that the hook will subscribe to.
• unsubscribeGraceTime: Amount of time in ms that the hook should wait before unsubscribing from the source observable after it unmounts (default = 200).

Important: This hook doesn't trigger any updates.

Subscribe

A React Component that creates a subscription to the provided observable once the component mounts and it unsubscribes from it when the component unmounts.

Properties:

• source$: Source observable that the Component will subscribe to.
• graceTime: an optional property that describes the amount of time in ms that the Component should wait before unsubscribing from the source observable after it unmounts (default = 200).

Important: This Component doesn't trigger any updates.

groupInMap

A RxJS pipeable operator which groups all values by key and emits a Map that holds the latest value for each key

Arguments:

• keyGetter: A function that extracts the key for each item.
• projection: Projection function for each group.

const votesByKey$ = new Subject<{ key: string }>()
const counters$ = votesByKey$.pipe(
  groupInMap(
    (vote) => vote.key,
    (votes$) =>
      votes$.pipe(
        mapTo(1),
        scan((count) => count + 1),
        takeWhile((count) => count < 3),
      ),
  ),
)

counters$.subscribe((counters) => {
  console.log("counters$:")
  counters.forEach((value, key) => {
    console.log(`${key}: ${value}`)
  })
})

votesByKey$.next({ key: "foo" })
// > counters$:
// > foo: 1

votesByKey$.next({ key: "foo" })
// > counters$:
// > foo: 2

votesByKey$.next({ key: "bar" })
// > counters$:
// > foo: 2
// > bar: 1

votesByKey$.next({ key: "foo" })
// > counters$:
// > bar: 1

votesByKey$.next({ key: "bar" })
// > counters$:
// > bar: 2
//
votesByKey$.next({ key: "bar" })
// > counters$:

mergeWithKey

Emits the values from all the streams of the provided object, in a result which provides the key of the stream of that emission.

Arguments:

• inputObject: Object of streams

const inc$ = new Subject()
const dec$ = new Subject()
const resetTo$ = new Subject<number>()

const counter$ = mergeWithKey({
  inc$,
  dec$,
  resetTo$,
}).pipe(
  scan((acc, current) => {
    switch (current.type) {
      case "inc$":
        return acc + 1
      case "dec$":
        return acc - 1
      case "resetTo$":
        return current.payload
      default:
        return acc
    }
  }, 0),
  startWith(0),
)