select

select

Signature

function select<T>(): MonoTypeOperatorFunction<T>;

Returns the state as shared, replayed and distinct Observable<T>. This way you don't have to think about late subscribers, multiple subscribers or multiple emissions of the same value.

Example

const state$ = state.pipe(select());
state$.subscribe((state) => doStuff(state));

Signature

function select<T, A>(op: OperatorFunction<T, A>): OperatorFunction<T, A>;

Returns the state as cached and distinct Observable<A>. Accepts arbitrary rxjs operators to enrich the selection with reactive composition.

Example

const profilePicture$ = state.pipe(
  select(
    map((state) => state.profilePicture),
    switchMap((profilePicture) => mapImageAsync(profilePicture))
  )
);

Signature

function select<T, K1 extends keyof T>(k1: K1): OperatorFunction<T, T[K1]>;

Access a single property of the state by providing keys. Returns a single property of the state as cached and distinct Observable<T[K1]>.

Example

// Access a single property
const bar$ = state$.pipe(select('bar'));

// Access a nested property
const foo$ = state$.pipe(select('bar', 'foo'));

Signature

function select<T, K extends keyof T, R>(
  k: K,
  fn: (val: T[K]) => R
): OperatorFunction<T, R>;

Transform a single property of the state by providing a key and map function. Returns result of applying function to state property as cached and distinct Observable<T[R]>.

Example

// Project state based on single property
const foo$ = state$.pipe(select('bar', (bar) => `bar equals ${bar}`));

Signature

function select<T extends object, K extends keyof T, R>(
  keys: K[],
  fn: (slice: PickSlice<T, K>) => R,
  keyCompareMap?: KeyCompareMap<Pick<T, K>>
): OperatorFunction<T, R>;

Transform a slice of the state by providing keys and map function. Returns result of applying function to state slice as cached and distinct Observable<R>.

Example

// Project state slice
const text$ = state$.pipe(
  select(
    ['query', 'results'],
    ({ query, results }) => `${results.length} results found for "${query}"`
  )
);