mirror of
https://github.com/re-rxjs/react-rxjs.git
synced 2025-12-08 18:01:51 +00:00
177 lines
4.0 KiB
Markdown
177 lines
4.0 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.
|
|
|
|
### split
|
|
|
|
A RxJS operator that groups the items emitted by the source based on the
|
|
keySelector function, emitting one Observable for each group.
|
|
|
|
Arguments:
|
|
|
|
- `keySelector`: A function that receives an item and returns the key of that
|
|
item's group.
|
|
- `streamSelector`: (optional) The function to apply to each group observable
|
|
(default = identity).
|
|
|
|
`split` will subscribe to each group observable and share the result to every
|
|
inner subscriber of that group. This inner observable can be mapped to another
|
|
observable through the `streamSelector` argument.
|
|
|
|
### collectValues
|
|
|
|
A pipeable operator that collects all the GroupedObservables emitted by
|
|
the source and emits a Map with the latest values of the inner observables.
|
|
|
|
```ts
|
|
const votesByKey$ = new Subject<{ key: string }>()
|
|
const counters$ = votesByKey$.pipe(
|
|
split(
|
|
(vote) => vote.key,
|
|
(votes$) =>
|
|
votes$.pipe(
|
|
mapTo(1),
|
|
scan((count) => count + 1),
|
|
takeWhile((count) => count < 3),
|
|
),
|
|
),
|
|
collectValues(),
|
|
)
|
|
|
|
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$:
|
|
```
|
|
|
|
### collect
|
|
|
|
A pipeable operator that collects all the GroupedObservables emitted by
|
|
the source and emits a Map with the active inner observables.
|
|
|
|
Arguments:
|
|
|
|
- `filter?`: A function that receives the inner Observable and returns an
|
|
Observable of boolean values, which indicates whether the inner observable
|
|
should be collected.
|
|
|
|
### 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),
|
|
)
|
|
```
|
|
|
|
### suspend
|
|
|
|
```ts
|
|
const story$ = selectedStoryId$.pipe(
|
|
switchMap(id => suspend(getStory$(id))
|
|
)
|
|
```
|
|
|
|
A RxJS creation operator that prepends a `SUSPENSE` on the source observable.
|
|
|
|
### suspended
|
|
|
|
```ts
|
|
const story$ = selectedStoryId$.pipe(
|
|
switchMap((id) => getStory$(id).pipe(suspended())),
|
|
)
|
|
```
|
|
|
|
The pipeable version of `suspend`
|
|
|
|
### switchMapSuspended
|
|
|
|
```ts
|
|
const story$ = selectedStoryId$.pipe(switchMapSuspended(getStory$))
|
|
```
|
|
|
|
Like `switchMap` but applying a `startWith(SUSPENSE)` to the inner observable.
|