React-RxJS

https://react-rxjs.org/docs
Admin
React-RxJS is a library that provides tools and utilities for integrating RxJS reactive programming...
Tokens:33,833
Snippets:122
Trust Score:5.2
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install React-RxJS

Source: https://react-rxjs.org/docs/getting-started

Installs the necessary packages for React-RxJS using either npm or yarn. This includes `@react-rxjs/core` for core functionality and `@react-rxjs/utils` for utility functions.

```bash
npm i rxjs @react-rxjs/core @react-rxjs/utils  
```

```bash
yarn add rxjs @react-rxjs/core @react-rxjs/utils  
```

--------------------------------

### Create a Hook from an Observable

Source: https://react-rxjs.org/docs/getting-started

Demonstrates how to use the `bind` function from `@react-rxjs/core` to create a React hook and an observable from a signal. A signal, created using `createSignal` from `@react-rxjs/utils`, acts as an entry point for RxJS streams.

```javascript
import{ bind }from"@react-rxjs/core"
import{ createSignal }from"@react-rxjs/utils"

// A signal is an entry point to react-rxjs. It's equivalent to using a subject
const[textChange$, setText]=createSignal<string>();

const[useText, text$]=bind(textChange$,""

functionTextInput(){
const text =useText()

return(
<div>
<input
type="text"
value={text}
placeholder="Type something..."
onChange={(e)=>setText(e.target.value)}
/>
<br/>
 Echo: {text}
</div>
)
}
```

--------------------------------

### Manage Subscriptions with Subscribe Component

Source: https://react-rxjs.org/docs/getting-started

Illustrates the use of the `Subscribe` component from `@react-rxjs/core` to ensure that subscriptions to observables are active before the associated hooks are used. This is crucial for the proper functioning of React-RxJS streams.

```javascript
functionCharacterCounter(){
return(
<div>
<Subscribe>
<TextInput/>
<CharacterCount/>
</Subscribe>
</div>
)
}
```

--------------------------------

### toKeySet() Usage Example

Source: https://react-rxjs.org/docs/api/utils/toKeySet

This example demonstrates how to use the toKeySet() operator in conjunction with partitionByKey() to track active symbols from a price stream. It shows how to create a stream of active symbols and subscribe to updates.

```javascript
import { from, of } from 'rxjs';
import { concatMap, delay, map } from 'rxjs/operators';
import { partitionByKey, toKeySet } from '@react-rxjs/utils';

// Call to service mocked for the example
const priceStream$ = from([
  {
    symbol: "AUDCHF",
    price: 1.32,
  },
  {
    symbol: "GOLD",
    price: 1.213,
  },
  {
    symbol: "CRYPTO",
    price: 2.45,
  },
  {
    symbol: "GOLD",
    price: 1.27,
  },
]).pipe(
    // Add delay to every new price.
    concatMap((value) => of(value).pipe(delay(100))),
);

const [lastPriceOfSymbol, symbolChange$] = partitionByKey(
  priceStream$,
  (x) => x.symbol,
);

const activeSymbols$ = toKeySet(symbolChange$).pipe(
  map((keySet) => Array.from(keySet)),
);

activeSymbols$.subscribe((keys) => console.log(keys));
// Will log:
// ['AUDCHF']
// ['AUDCHF', 'GOLD']
// ['AUDCHF', 'GOLD', 'CRYPTO']

```

--------------------------------

### Derive Observables and Hooks

Source: https://react-rxjs.org/docs/getting-started

Shows how to derive new observables and their corresponding hooks from existing ones using RxJS operators like `map`. The `bind` function returns a tuple containing the hook and the underlying observable, allowing for further stream manipulation.

```javascript
import{ map }from"rxjs/operators"
import{ bind,Subscribe}from"@react-rxjs/core"

// Previously...
// const [useText, text$] = bind(...);

const[useCharCount, charCount$]=bind(
  text$.pipe(
map((text)=> text.length)
)
)

functionCharacterCount(){
const count =useCharCount()

return<>Character Count: {count}</>
}
```

--------------------------------

### combineKeys Example: Pet Race Simulation

Source: https://react-rxjs.org/docs/api/utils/combineKeys

Illustrates combineKeys in a practical example simulating a pet race, combining individual pet streams into a single map and deriving the leading pet.

```javascript
interface Pet {
  id: number;
  pet: string;
  pos: number;
}

const petNames = ["Fluffy", "Bella", "Nala", "Nocturne", "Teddy"];

const [petUpdate$, updatePet] = createSignal<Pet>();

const petRace$ = petUpdate$.pipe(startWith(
  ...petNames.map((pet, id): Pet => ({ pet, id, pos: 1 }))
));

const [petByID, petIdChange$] = partitionByKey(petRace$, x => x.id);
const keyMap$ = combineKeys(petIdChange$, petByID);

const leadingPet$ = keyMap$.pipe(map(x => // map to pet with highest pos
  Array.from(x.entries())
    .sort(([k1, v1], [k2, v2]) => v2.pos - v1.pos)[0][1]
));

const advancingPet$: Observable<Pet> = interval(1000).pipe(
  withLatestFrom(keyMap$),
  map(([_, x]) => x),
  takeWhile(x => {
    for (let [k, v] of x) {
      if (v.pos == 20) return false; // win condition
    }
    return true;
  }),
  map((x: Map<number, Pet>) =>
    x.get(Math.floor(Math.random() * x.size)) as Pet
  ),
  map(pet => ({ ...pet, pos: pet.pos + 1 })),
  tap(updatePet)
);

const [usePetByID] = bind((petId: number) => petByID(petId));
const [useLeader] = bind(leadingPet$, null);
const [useAdvancingPet] = bind(advancingPet$, null);
```

--------------------------------

### partitionByKey Usage Example: Pet List

Source: https://react-rxjs.org/docs/api/utils/partitionByKey

Illustrates a more complex scenario where partitionByKey is used to manage a list of 'Pet' objects, allowing individual item binding and efficient updates for a list component.

```javascript
interfacePet{
  id:number;
  pet:string,
  pos?:number;
}

const petNames =["Fluffy","Bella","Nala","Nocturne","Teddy"]
.map((pet, id):Pet=>({pet, id}));

const[petUpdate$, updatePet]=createSignal<Pet>();

// Let's line up our pets
const petRace$ =merge(of(...petNames), petUpdate$);

const[petByID, petIdChange$]=partitionByKey(
  petRace$,
  x => x.id,
)

const[usePetByID]=bind((id:number)=>petByID(id));
const[usePetIDs]=bind(petIdChange$.pipe(
toKeySet(),
map(keySet =>Array.from(keySet))
));

constPetItem=({petID}:{petID:number})=>{
const pet =usePetByID(petID);

return(
<li>
<divstyle={{width:'100%', textAlign:'right'}}>
{pet.pet}
</div>
<br/>
<divstyle={{textAlign:'left'}}>
{'*'.repeat(pet.pos||1)}
</div>
</li>
);
}

constPetList=()=>{
const petIDs =usePetIDs();

return(<ul>{petIDs.map(x =>(<PetItemkey={x}petID={x}/>))}</ul>);
}
```

--------------------------------

### state() Usage Example

Source: https://react-rxjs.org/docs/api/core/state

Demonstrates how to use the state() function to create a StateObservable from an interval observable and subscribe to its emissions. It also shows how to subscribe to the same StateObservable after a delay.

```javascript
import { timer, interval } from "rxjs/operators"
import { state } from "@react-rxjs/core"

const time$ = state(interval(1000))

time$.subscribe({
  next: (v) => console.log(v), // Logs 0, 1, 2, ...
})

timer(5000)
  .pipe(switchMap(() => time$))
  .subscribe({
    next: (v) => console.log(v), // Logs 5, 6, 7, ...
  })
```

--------------------------------

### partitionByKey Usage Example: Basic Grouping

Source: https://react-rxjs.org/docs/api/utils/partitionByKey

Demonstrates a basic usage of partitionByKey to group numbers from an interval observable into 'even' and 'odd' streams, transforming the values with their respective keys.

```javascript
const source =interval(1000);
const[getGroupByKey, keyChanges$]=partitionByKey(
  source,
  x => x %2==0?"even":"odd",
(groupedObservable$, key)=> groupedObservable$.pipe(map(x =>`${x} is ${key}`))
);

const[useEven, even$]=bind(getGroupByKey("even"));
const[useOdd, odd$]=bind(getGroupByKey("odd"));
const[useKeys]=bind(
  keys$.pipe(
toKeySet(),
map(keySet =>Array.from(keySet))
)
);

functionMyComponent(){
const odd =useOdd();
const even =useEven();
const keys =useKeys();

return(
<>
<div>Your keys are:{keys.join(", ")}</div>
<div>{odd}</div>
<div>{even}</div>
</>
);
}
```

--------------------------------

### RxJS Stream Subscription Example

Source: https://react-rxjs.org/docs/tutorial/github-issues

Demonstrates subscribing to an RxJS observable (`issueComments$`) using `switchMap` and `startWith(SUSPENSE)` to handle asynchronous data loading and integrate with React Suspense. It ensures that the initial subscription occurs before React renders components that depend on the stream.

```javascript
selectedIssueId$
.pipe(switchMapTo(issueComments$.pipe(catchError(()=>EMPTY))))
.subscribe()
```

--------------------------------

### Composing RxJS Streams

Source: https://react-rxjs.org/docs/core-concepts

Shows how to compose RxJS streams using the `bind` utility. This example creates a stream of seconds and then composes it to create a new stream that takes a specified number of seconds. This demonstrates breaking down streams into smaller, reusable chunks.

```javascript
import { interval } from "rxjs"
import { take } from "rxjs/operators"
import { bind } from "@react-rxjs/core"

const [useSeconds, second$] = bind(interval(1000))

const [useLatestNSeconds, latestNSeconds$] = bind((n: number) =>
  second$.pipe(take(n)),
)
```

--------------------------------

### TodoList Component Implementation

Source: https://react-rxjs.org/docs/tutorial/todos

The main TodoList component that renders a list of TodoItem components. It uses the `useTodos` hook (bound to an RxJS observable) to get the list of todos and maps over them to render each TodoItem.

```javascript
function TodoList(){
  const todoList =useTodos()

  return(
    <>
      {/* <TodoListStats /> */}
      {/* <TodoListFilters /> */}
      <TodoItemCreator/>

      {todoList.map((todoItem)=>(
        <TodoItemkey={todoItem.id}item={todoItem}/>
      ))}
    </>
  );
}
```

--------------------------------

### createSignal() API Documentation

Source: https://react-rxjs.org/docs/api/utils/createSignal

Provides the signature, arguments, return values, and usage examples for the createSignal() function. It explains how to create signals with and without payloads, and how to map emitter arguments to observable values.

```APIDOC
createSignal<A extends unknown[], T>(
  mapper?: (...args: A) => T
): [Observable<T>, (...args: A) => void]

Arguments:
  mapper?: (Optional) A function for mapping the arguments of the emitter function into the value of the Observable. Defaults to (v: Payload) => v

Returns:
  [1, 2]:
    1. The observable for the signal
    2. The emitter function

Examples:
Void signal (no payload):
```javascript
const [buttonPresses$, pressButton] = createSignal();
// ...
<button onClick={() => pressButton()}>...</button>
```

Taking a payload. Note that without the type parameter you'll get a void signal as above:
```javascript
const [itemComplete$, doCompleteItem] = createSignal<number>();

// ...

<button onClick={() => doCompleteItem(id)}>...</button>
```

Mapping the emitter function's arguments to the resulting emission:
```javascript
const mapper = (id: number, status: Status) => ({ id, status });
const [statusChange$, setStatus] = createSignal(mapper);
// statusChange$ is Observable<{id: number, status: Status}>
// setStatus is (id: number, status: Status) => void

// ...

<button onClick={() => setStatus(id, Status.Complete)}>...</button>
```

See also:
  * `createKeyedSignal()`
```

--------------------------------

### state() Factory Overload Usage Example

Source: https://react-rxjs.org/docs/api/core/state

Illustrates the usage of the state() factory overload to create a function that generates StateObservables based on a product ID. It shows how to subscribe to the StateObservable for a specific product.

```javascript
const getPrice$ = state((productId: number) =>
  getProductPriceFromSocket$(productId)
)

getPrice$('apples').subscribe({
  next: (v) => console.log(v),
})
```

--------------------------------

### Error Boundary Example with RxJS Stream

Source: https://react-rxjs.org/docs/core-concepts

Demonstrates how to use React-RxJS streams within a React Error Boundary. The example includes a stream that intentionally throws an error after a delay, showcasing how the fallback UI is displayed. It utilizes 'react-error-boundary' for defining the fallback component and recovery strategy.

```javascript
import{ bind }from"@react-rxjs/core"
import{ interval }from"rxjs"
import{ map, startWith }from"rxjs/operators"
import{ErrorBoundary}from"react-error-boundary"

const[useTimedBomb, timedBomb$]=bind(
interval(1000).pipe(
map((v)=> v +1),
startWith(0),
map((v)=>{
if(v ===3){
thrownewError("boom")
}
return v
}),
),
)

functionBomb(){
const time =useTimedBomb()

return<div>{time}</div>
}

functionErrorFallback({ error, componentStack, resetErrorBoundary }){
return(
<div>
<p>Something went wrong:</p>
<pre>{error?.message}</pre>
<pre>{componentStack}</pre>
<buttononClick={resetErrorBoundary}>Try again</button>
</div>
)
}

functionApp(){
return(
<divclassName="App">
<ErrorBoundaryFallbackComponent={ErrorFallback}>
<Subscribe>
<Bomb/>
</Subscribe>
</ErrorBoundary>
</div>
)
}
```

--------------------------------

### react-rxjs Core API Reference

Source: https://react-rxjs.org/docs/api/core/bind

This section details the core functions available in the react-rxjs library, including their usage, parameters, and related functions. It serves as a comprehensive guide for developers integrating RxJS with React.

```APIDOC
bind:
  Description: Binds a function to an observable, allowing it to be called with observable values.
  Usage:
    bind(fn: Function, initialValue?: any)
  Parameters:
    fn: The function to bind. It will receive observable values as arguments.
    initialValue: An optional initial value for the observable.
  Returns: An observable that emits the result of calling the bound function.
  See Also:
    - state()
    - useStateObservable()

state:
  Description: Creates a state observable from an initial value.
  Usage:
    state(initialValue: any)
  Parameters:
    initialValue: The initial value for the state observable.
  Returns: An observable representing the state.
  See Also:
    - bind()
    - useStateObservable()

useStateObservable:
  Description: A hook that combines React state with RxJS observables.
  Usage:
    useStateObservable(observable: Observable<T>, initialValue?: T)
  Parameters:
    observable: The RxJS observable to connect to the React state.
    initialValue: The initial value for the state if the observable is not yet available.
  Returns: A tuple containing the current state value and a function to update it.
  See Also:
    - bind()
    - state()

```

--------------------------------

### Issue Details Stream

Source: https://react-rxjs.org/docs/tutorial/github-issues

Binds `useIssue` hook and `issue$` stream to fetch the details of a selected issue. It filters out null IDs, uses `withLatestFrom` to get the current repository, and then calls `getIssue` with `startWith(SUSPENSE)` for loading state.

```javascript
exportconst[useIssue, issue$]=bind(
  selectedIssueId$.pipe(
filter((id): id isnumber=> id !==null),
withLatestFrom(currentRepo$),
switchMap(([id,{ org, repo }])=> 
getIssue(org, repo, id).pipe(startWith(SUSPENSE)),
),
),
)

```

--------------------------------

### Current Repository Stream

Source: https://react-rxjs.org/docs/tutorial/github-issues

Binds a React hook `useCurrentRepo` to an RxJS stream `currentRepo$` that emits the current repository (organization and name). It starts with initial values and updates based on `repoSubject$`.

```javascript
exportconst[useCurrentRepo, currentRepo$]=bind(
  repoSubject$.pipe(
startWith({
      org:INITIAL_ORG,
      repo:INITIAL_REPO,
}),
  ),
)

```

--------------------------------

### Refactor API Calls from Axios to RxJS

Source: https://react-rxjs.org/docs/tutorial/github-issues

Replaces Axios requests with RxJS `ajax` observables for fetching data from the GitHub API. This includes handling responses, parsing headers, and mapping data to the expected types. The examples show how to convert `async/await` patterns to observable streams using `pipe` and `map`.

```typescript
-import axios from 'axios'  
+import { ajax } from 'rxjs/ajax'  
import parseLink, { Links } from 'parse-link-header'  
+import { map } from 'rxjs/operators'  
+import { Observable } from 'rxjs'  
  
export interface Label {  
  id: number  
@@ -64,47 +66,40 @@ const getPageCount = (pageLinks: Links) => {  
  }  
}  
  
-export async function getIssues(  
+export function getIssues(  
  org: string,  
  repo: string,  
  page = 1  
-): Promise<IssuesResult> {  
+): Observable<IssuesResult> {  
  const url = `https://api.github.com/repos/${org}/${repo}/issues?per_page=25&page=${page}`  
-  
-  try {  
-    const issuesResponse = await axios.get<Issue[]>(url)  
-    let pageCount = 0  
-    const pageLinks = parseLink(issuesResponse.headers.link)  
-  
-    if (pageLinks !== null) {  
-      pageCount = getPageCount(pageLinks)  
-    }  
-  
-    return {  
-      pageLinks,  
-      pageCount,  
-      issues: issuesResponse.data,  
-    }  
-  } catch (err) {  
-    throw err  
-  }  
+  return ajax.get(url).pipe(  
+    map((r) => {  
+      let pageCount = 0  
+      const pageLinks = parseLink(r.xhr.getResponseHeader('link') as string)  
+  
+      if (pageLinks !== null) {  
+        pageCount = getPageCount(pageLinks)  
+      }  
+  
+      return {  
+        pageLinks,  
+        pageCount,  
+        issues: r.response as Issue[],  
+      }  
+    })  
+  )  
}
  
-export async function getRepoDetails(org: string, repo: string) {  
+export function getRepoOpenIssuesCount(org: string, repo: string) {  
  const url = `https://api.github.com/repos/${org}/${repo}`  
-  
-  const { data } = await axios.get<RepoDetails>(url)  
-  return data  
+  return ajax  
+    .getJSON<RepoDetails>(url)  
+    .pipe(map((repoDetails) => repoDetails.open_issues_count))  
}
  
-export async function getIssue(org: string, repo: string, number: number) {  
+export function getIssue(org: string, repo: string, number: number) {  
  const url = `https://api.github.com/repos/${org}/${repo}/issues/${number}`  
-  
-  const { data } = await axios.get<Issue>(url)  
-  return data  
+  return ajax.getJSON<Issue>(url)  
}
  
-export async function getComments(url: string) {  
-  const { data } = await axios.get<Comment[]>(url)  
-  return data  
+export function getComments(url: string) {  
+  return ajax.getJSON<Comment[]>(url)  
}
```

--------------------------------

### Basic Data Binding with RxJS and React

Source: https://react-rxjs.org/docs/core-concepts

This snippet demonstrates how to bind an RxJS observable, created using `ajax.getJSON`, to React hooks using the `bind` function from `@react-rxjs/core`. It shows the basic setup for fetching data and making it available in a React component.

```javascript
import { ajax } from "rxjs/ajax"
import { bind } from "@react-rxjs/core"

const [useTodos, todo$] = bind(ajax.getJSON("/todos"))
```

--------------------------------

### Dependencies for React-RxJS Tutorial

Source: https://react-rxjs.org/docs/tutorial/github-issues

Lists the necessary npm packages for the React-RxJS Github Issues viewer tutorial. It highlights the core React-RxJS package, RxJS itself, and a recommended error boundary library. It also notes the replacement of Axios with `rxjs/ajax`.

```bash
npm install rxjs @react-rxjs/core react-error-boundary
# or
yarn add rxjs @react-rxjs/core react-error-boundary
```

--------------------------------

### Unicast Nature of Observables

Source: https://react-rxjs.org/docs/core-concepts

Illustrates the unicast nature of RxJS Observables, where each subscription creates a new, independent execution. This example shows two separate subscriptions to the same observable, each starting its own sequence.

```javascript
import { interval } from "rxjs"
import { take } from "rxjs/operators"

const first5SpacedNumbers = interval(1000).pipe(take(5))

first5SpacedNumbers.subscribe((v) => console.log("A", v))
// Will start logging A1... A2...

setTimeout(() => {
  first5SpacedNumbers.subscribe((v) => console.log("B", v))
}, 2000)
// Will continue with B1... A3... B2... A4
```

--------------------------------

### collect() Usage Example

Source: https://react-rxjs.org/docs/api/utils/collect

Example of how to use the collect() function as a pipeable operator in RxJS.

```javascript
import { collect } from 'rxjs/operators';
import { Observable, GroupedObservable } from 'rxjs';

// Assuming source$ emits GroupedObservable<K, V>
const collectedObservable: CollectedObservable<Map<K, GroupedObservable<K, V>>> = source$.pipe(
  collect<K, V>(
    (grouped: GroupedObservable<K, V>) => (
      // Optional filter logic here
      // For example, only collect observables where the key is 'active'
      // return of(grouped.key === 'active');
      // Or, to collect all:
      // return of(true);
    )
  )
);

collectedObservable.subscribe(map => {
  console.log(map.get('someKey'));
});
```

--------------------------------

### collectValues() Usage Example

Source: https://react-rxjs.org/docs/api/utils/collectValues

Example demonstrating the usage of the deprecated collectValues() operator in conjunction with split() and other RxJS operators to count votes by key.

```javascript
import { Subject } from 'rxjs';
import { mapTo, scan, takeWhile } from 'rxjs/operators';
import { collectValues, split } from '@react-rxjs/utils';

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

// > counters$:
// > bar: 3 (after the third 'bar' vote, takeWhile stops it)

```

--------------------------------

### Initial State Definitions

Source: https://react-rxjs.org/docs/tutorial/github-issues

Defines the initial values for the repository organization and name. These are constants used to set the default state of the application.

```javascript
exportconstINITIAL_ORG="rails"
exportconstINITIAL_REPO="rails"

```

--------------------------------

### Top-Level Subscription and Error Handling

Source: https://react-rxjs.org/docs/tutorial/github-issues

Sets up a top-level subscription to `issues$` and `openIssuesLen$` to ensure initial subscriptions happen before components render. It uses `retryWhen` with `currentRepoAndPage$` to handle errors and prevent the subscription from closing.

```javascript
merge(issues$, openIssuesLen$)
.pipe(retryWhen(()=> currentRepoAndPage$.pipe(skip(1))))
.subscribe()

```

--------------------------------

### StateObservable Methods

Source: https://react-rxjs.org/docs/api/core/StateObservable

Provides details on the methods available for StateObservable, including how to get the subscriber count and retrieve the current or next value.

```APIDOC
StateObservable Methods:

getRefCount(): number
  - Gets the current number of subscribers.
  - Returns: The current number of subscribers this `StateObservable` has.

getValue(filter?: (value: T) => boolean): T | StatePromise<T>
  - Retrieves the latest value or a promise for the first value.
  - Arguments:
    - filter: (Optional) A function to exclude values. Defaults to returning all values.
  - Returns: The latest value or a promise that resolves with the first value.
  - Throws an error if no subscription is active.
  - The promise rejects if the observable completes without emitting or if subscribers unsubscribe before emitting.
```

--------------------------------

### combineKeys() API

Source: https://react-rxjs.org/docs/api/utils/combineKeys

Defines the combineKeys function which takes an observable of keys and a function to get the inner observable for each key, returning an observable of a Map.

```APIDOC
combineKeys<K,T>(
  keys$: Observable<Iterable<K>| KeyChanges<K>>,
  getInner$: (key:K)=> Observable<T>,
): Observable<Map<K,T>>

Arguments:
  keys$: Observable<Iterable<K>| KeyChanges<K>>: Stream of the list of keys to subscribe to.
  getInner$: (key:K)=> Observable<T>: Function that returns the stream for each key.

Returns:
  Observable<Map<K,T>>: A stream with a map containing the latest value from the stream of each key.
```

--------------------------------

### Alternative Merging with RxJS merge

Source: https://react-rxjs.org/docs/tutorial/todos

An alternative implementation to `mergeWithKey`, demonstrating how to achieve the same event merging using the standard RxJS `merge` operator with explicit type and payload definitions.

```typescript
const todoActions$ =merge(
  newTodo$.pipe(map((text, id)=>({ 
    type:"add"as const,
    payload:{ id, text },
}))),
  editTodo$.pipe(map(payload =>({
    type:"edit"as const,
    payload,
}))),
  toggleTodo$.pipe(map(id =>({
    type:"toggle"as const,
    payload:{ id },
}))),
  deleteTodo$.pipe(map(id =>({
    type:"delete"as const,
    payload:{ id },
}))),
)
```

--------------------------------

### Using suspended() with switchMap

Source: https://react-rxjs.org/docs/api/utils/suspended

This example demonstrates how to use the suspended() operator within a RxJS pipe, specifically with switchMap, to handle fetching data for a selected item and integrating it with Suspense.

```javascript
import{ switchMap }from'rxjs/operators'
import{ suspended }from'@react-rxjs/utils'

const story$ = selectedStoryId$.pipe(
switchMap((id)=>getStory$(id).pipe(suspended())),
)
```

--------------------------------

### Lazy Loading IssueDetailsPage with Suspense

Source: https://react-rxjs.org/docs/tutorial/github-issues

Implements lazy loading for the `IssueDetailsPage` component using `React.lazy` and `Suspense`. This allows the `IssueDetailsPage` component and its associated RxJS streams to be loaded only when needed, further optimizing the initial application load time.

```diff
-import React from 'react'
+import React, { lazy, Suspense } from 'react'
import './App.css'
import { RepoSearchForm } from 'features/repoSearch/RepoSearchForm'
import { IssuesListPage } from 'features/issuesList/IssuesListPage'
-import { IssueDetailsPage } from 'features/issueDetails/IssueDetailsPage'
import { useSelectedIssueId } from 'state'
+
+const IssueDetailsPage = lazy(
+  () => import('features/issueDetails/IssueDetailsPage')
+)
+
const List: React.FC = () =>
  useSelectedIssueId() === null ? (
    <>
@@ -16,7 +19,9 @@ const List: React.FC = () =>
const App: React.FC = () => (
  <div className="App">
    <List />
-    <IssueDetailsPage />
+    <Suspense fallback={null}>
+      <IssueDetailsPage />
+    </Suspense>
  </div>
)

```

--------------------------------

### switchMapSuspended() API Documentation

Source: https://react-rxjs.org/docs/api/utils/switchMapSuspended

Provides the signature, arguments, return type, and usage example for the switchMapSuspended operator. It functions like RxJS's switchMap but includes a startWith(SUSPENSE) on the inner Observable.

```typescript
function switchMapSuspended<T, O extends ObservableInput<any>>(project: (value: T, index: number) => O): OperatorFunction<T, ObservedValueOf<O> | typeof SUSPENSE>;

Arguments:
  * project: A function that, when applied to an item emitted by the source Observable, returns an Observable.

Returns:
 OperatorFunction<T, ObservedValueOf<O> | typeof SUSPENSE>: An Observable that emits the result of applying the projection function to each item emitted by the source Observable, and taking only the values from the most recently projected inner Observable, prepended with SUSPENSE.

Example:
import { switchMapSuspended } from '@react-rxjs/utils'

const story$ = selectedStoryId$.pipe(switchMapSuspended(getStory$))
```

```javascript
function switchMapSuspended(project) {
  // Implementation details...
}

// Example usage:
// const story$ = selectedStoryId$.pipe(switchMapSuspended(getStory$));
```

--------------------------------

### User Interaction Subjects and Handlers

Source: https://react-rxjs.org/docs/tutorial/github-issues

Creates RxJS Subjects to handle user interactions like loading a repository, changing pages, and selecting/unselecting issues. It also exports functions to trigger these actions.

```javascript
const repoSubject$ =newSubject<{ org:string; repo:string}>()
exportconstonLoadRepo=(org:string, repo:string)=>{
  repoSubject$.next({ org, repo })
}

const pageSelected$ =newSubject<number>()
exportconstonPageChange=(nextPage:number)=>{
  pageSelected$.next(nextPage)
}

const issueSelected$ =newSubject<number|null>()
exportconstonIssueSelected=(id:number)=>{
  issueSelected$.next(id)
}
exportconstonIssueUnselecteed=()=>{
  issueSelected$.next(null)
}

```

--------------------------------

### Main App Component Structure

Source: https://react-rxjs.org/docs/tutorial/github-issues

Illustrates the structure of the main `App` component in a React application using react-rxjs. It utilizes React Suspense for handling loading states and integrates child components like `RepoSearchForm` and `IssuesDetailsPage`.

```typescript
import React, {Suspense, lazy }from"react"
import"./App.css"
import{RepoSearchForm}from"features/repoSearch/RepoSearchForm"
import{IssuesListPage}from"features/issuesList/IssuesListPage"
import{IssuesDetailsPage}from"features/issueDetails/IssueDetailsPage"
import{ useSelectedIssueId }from"state"

constList:React.FC=()=>{
const id =useSelectedIssueId()
return id !==null?null:(
<>
<RepoSearchForm/>
<IssuesListPage/>
</>
)
}

constApp:React.FC=()=>{
return(
<divclassName="App">
<List/>
<Suspensefallback={null}>
<IssueDetailsPage/>
</Suspense>
</div>
)
}

exportdefaultApp
```

--------------------------------

### Observable with SUSPENSE for React Suspense

Source: https://react-rxjs.org/docs/api/core/suspense

An example demonstrating how to use the SUSPENSE symbol within an RxJS observable pipeline. It emits SUSPENSE before fetching data, allowing React Suspense to manage the loading state.

```rxjs
import { concat, of } from "rxjs"
import { switchMap } from "rxjs/operators"
import { SUSPENSE } from "@react-rxjs/core"

const story$ = selectedStoryId$.pipe(
  switchMap((id) => concat(of(SUSPENSE), getStory$(id)))
)
```

--------------------------------

### Combine Keys with RxJS

Source: https://react-rxjs.org/docs/tutorial/todos

Combines key changes with a map of todos to create an observable stream that emits whenever the state of any todo changes, providing access to all todos. This utility is useful for managing collections of reactive data.

```javascript
const todosMap$: Observable<Map<number, Todo>>=combineKeys(keyChanges$, todosMap);
```

--------------------------------

### RepoSearchForm Component Implementation

Source: https://react-rxjs.org/docs/tutorial/github-issues

Shows the implementation of the `RepoSearchForm` component, which handles user input for repository search. It uses React hooks (`useState`, `useEffect`) and integrates with state management functions (`useCurrentPage`, `onLoadRepo`, `onPageChange`) provided by the `state` module.

```typescript
import React, { useState, ChangeEvent, useEffect } from 'react'

import './pure-forms.css'
import './pure-buttons.css'
import { 
  useCurrentPage, 
  onLoadRepo, 
  onPageChange, 
  INITIAL_REPO, 
  INITIAL_ORG,
} from 'state'

type InputEvent = ChangeEvent<HTMLInputElement>
type ChangeHandler = (e: InputEvent) => void

export const RepoSearchForm: React.FC = () => {
  const [currentOrg, setCurrentOrg] = useState(INITIAL_ORG)
  const [currentRepo, setCurrentRepo] = useState(INITIAL_REPO)
  const page = useCurrentPage()
  const [currentPageText, setCurrentPageText] = useState(page.toString())
  useEffect(() => setCurrentPageText(page.toString()), [page])

  const onOrgChanged: ChangeHandler = (e) => {
    setCurrentOrg(e.target.value)
  }

  const onRepoChanged: ChangeHandler = (e) => {
    setCurrentRepo(e.target.value)
  }

  const onLoadRepoClicked = () => {
    onLoadRepo(currentOrg, currentRepo)
  }

  const onJumpToPageClicked = () => {
    const newPage = parseInt(currentPageText)

    if (newPage >= 1) {
      onPageChange(newPage)
    }
  }

  return (
    <div className="pure-form">
      <input
        type="text"
        placeholder="Org"
        value={currentOrg}
        onChange={onOrgChanged}
      />
      <input
        type="text"
        placeholder="Repo"
        value={currentRepo}
        onChange={onRepoChanged}
      />
      <button type="button" onClick={onLoadRepoClicked}>
        Load Repo
      </button>
      <input
        type="text"
        placeholder="Jump to page"
        value={currentPageText}
        onChange={(e) => setCurrentPageText(e.target.value)}
      />
      <button type="button" onClick={onJumpToPageClicked}>
        Jump to Page
      </button>
    </div>
  )
}
```

--------------------------------

### Issues Stream with Suspense

Source: https://react-rxjs.org/docs/tutorial/github-issues

Binds `useIssues` hook and `issues$` stream to fetch issues based on the current repository and page. It uses `switchMap` to handle asynchronous API calls (`getIssues`) and emits `SUSPENSE` to indicate loading state for React Suspense.

```javascript
exportconst[useIssues, issues$]=bind(
  currentRepoAndPage$.pipe(
switchMap(({ page, repo, org })=> 
getIssues(org, repo, page).pipe(startWith(SUSPENSE)),
),
),
)

```

--------------------------------

### selfDependent() Usage Example

Source: https://react-rxjs.org/docs/api/utils/selfDependent

Demonstrates how to use the selfDependent utility to create a resettable counter observable. It sets up an observable stream that increments on clicks and resets to zero after a delay, managing the circular dependency with the returned operator.

```javascript
import{ merge,of, Subject }from"rxjs"  
import{ delay, map, share, switchMapTo, withLatestFrom }from"rxjs/operators"  
import{ selfDependent }from"@react-rxjs/utils"  
  
const[_resettableCounter$, connectResettableCounter]=selfDependent<number>()  
  
const clicks$ =newSubject()  
const inc$ = clicks$.pipe(  
withLatestFrom(_resettableCounter$),  
map((_, x)=> x +1),  
share(),  
)  
  
const delayedZero$ =of(0).pipe(delay(10_000))  
const reset$ = inc$.pipe(switchMapTo(delayedZero$))  
  
const resettableCounter$ =merge(inc$, reset$,of(0)).pipe(  
connectResettableCounter(),  
)
```

--------------------------------

### IssuesList Component

Source: https://react-rxjs.org/docs/tutorial/github-issues

Displays a list of GitHub issues. It fetches issue data using the `useIssues` hook and renders each issue using the `IssueListItem` component. The component employs React Suspense to show a 'Loading...' message while the issues are being fetched from the API.

```typescript
import React, { Suspense } from 'react'

import { IssueListItem } from './IssueListItem'

import styles from './IssuesList.module.css'
import { useIssues } from 'state'

const IssuesListLoaded = () => {
  const { issues } = useIssues()
  const renderedIssues = issues.map((issue) => (
    <li key={issue.id}>
      <IssueListItem {...issue} />
    </li>
  ))

  return <ul className={styles.issuesList}>{renderedIssues}</ul>
}

export const IssuesList = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <IssuesListLoaded />
  </Suspense>
)
```

--------------------------------

### Bind Observable to React Component

Source: https://react-rxjs.org/docs/tutorial/todos

Binds an RxJS observable stream to a React component, allowing the component to subscribe to changes and re-render accordingly. This example shows binding a stream of todo items to a TodoList component.

```javascript
const[useTodos]=bind(todosMap$.pipe(map(todosMap =>[...todosMap.values()])));
```

--------------------------------

### Using suspend() with switchMap

Source: https://react-rxjs.org/docs/api/utils/suspend

An example demonstrating how to use the suspend() operator within a RxJS pipe, specifically with switchMap. This pattern is common for fetching data based on an ID and ensuring a suspense state is emitted before the actual data.

```javascript
import { switchMap } from 'rxjs/operators';
import { suspend } from '@react-rxjs/utils';

const story$ = selectedStoryId$.pipe(
  switchMap(id => suspend(getStory$(id)))
);
```

--------------------------------

### Create a Stream for the Current Filter

Source: https://react-rxjs.org/docs/tutorial/todos

Creates a custom hook `useCurrentFilter` and an observable stream `currentFilter$` that starts with 'All' and updates whenever the user selects a new filter. This stream provides the current filter state to components.

```typescript
const [useCurrentFilter, currentFilter$] = bind(
  selectedFilter$.pipe(startWith(FilterType.All))
)

```

--------------------------------

### createKeyedSignal API Documentation

Source: https://react-rxjs.org/docs/api/utils/createKeyedSignal

Provides the signature, arguments, and return values for the createKeyedSignal function. It explains how to use key selectors and mappers to manage grouped observables.

```APIDOC
createKeyedSignal<A extends unknown[], T>(
  keySelector?: (signal: T) => K,
  mapper?: (...args: A) => T
): [(key: K) => GroupedObservable<K, T>, (...args: A) => void]

Arguments:
  keySelector?: (Optional) A function that extracts the key from the emitted value. If omitted, it will use the first argument as the key.
  mapper?: (Optional) A function for mapping the arguments of the emitter function into the value of the Observable. Defaults to `(v: Payload) => v`

Returns:
  [1, 2]:
    1. A function that returns the observable for a given key
    2. The emitter function

See also:
  * `createSignal()`
```

--------------------------------

### mergeWithKey Usage Example

Source: https://react-rxjs.org/docs/api/utils/mergeWithKey

Demonstrates how to use mergeWithKey to combine multiple signals (inc$, dec$, resetTo$) into a single counter observable. It uses RxJS operators like scan and startWith to manage the counter's state based on the emitted events.

```javascript
import { Subject } from "rxjs"
import { scan, startWith } from 'rxjs/operators'
import { mergeWithKey, createSignal } from '@react-rxjs/utils'

const [inc$, doInc] = createSignal();
const [dec$, doDec] = createSignal();
const [resetTo$, doResetTo] = createSignal<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),
)

```

--------------------------------

### Creating and Subscribing to an Observable

Source: https://react-rxjs.org/docs/core-concepts

Demonstrates the creation of a simple RxJS Observable that emits numbers and completes. It highlights that the observable's side effects (like logging 'hello!') only occur upon subscription.

```javascript
import { Observable } from "rxjs"

const first5Numbers = new Observable((obs) => {
  console.log("hello!")
  for (let i = 0; i < 5; i++) obs.next(i)
  obs.complete()
})

// Logs nothing

first5Numbers.subscribe((n) => {
  console.log(n)
})
// Logs "hello!" followed by 0 1 2 3 4
```

--------------------------------

### IssuesPageHeader with Suspense and RxJS State

Source: https://react-rxjs.org/docs/tutorial/github-issues

The IssuesPageHeader component is refactored to use React Suspense for displaying loading states. It now fetches repository information and the count of open issues using custom hooks (`useCurrentRepo`, `useOpenIssuesLen`) that likely integrate with RxJS observables for state management. The `OrgRepo` component displays the current repository, and `OpenIssues` displays the count of open issues, with a fallback UI provided by Suspense.

```typescript
import React, { Suspense } from 'react'
import { useOpenIssuesLen, useCurrentRepo } from 'state'

function OrgRepo() {
  const { org, repo } = useCurrentRepo()
  return (
    <span>
      <a href={`https://github.com/${org}`} className="header__org">
        {org}
      </a>
      / <a href={`https://github.com/${org}/${repo}`} className="header__repo">
        {repo}
      </a>
    </span>
  )
}

function OpenIssues() {
  const openIssuesCount = useOpenIssuesLen()
  return (
    <>
      <span className="header__openIssues">{openIssuesCount}</span> open{' '}
      {openIssuesCount === 1 ? 'issue' : 'issues'} for {}
    </>
  )
}

export function IssuesPageHeader() {
  return (
    <h1>
      <Suspense fallback={'Open issues for '}>
        <OpenIssues />
      </Suspense>
      <OrgRepo />
    </h1>
  )
}
```
Tokens:
Raw