mirror of
https://github.com/re-rxjs/react-rxjs.git
synced 2025-12-08 18:01:51 +00:00
126 lines
2.7 KiB
Markdown
126 lines
2.7 KiB
Markdown
# @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.
|
|
|
|
```ts
|
|
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
|
|
|
|
```ts
|
|
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),
|
|
)
|
|
```
|