42 docs tagged with "state"

@rx-angular/state (RxState) is a lightweight library for managing reactive

A set of RxJS operators for selecting state in an efficient, distinct way. They are the building blocks RxState uses internally for its select surface, and they are exported so you can use them directly inside your own RxJS pipelines.

The function which is used by KeyCompareMap to determine if changes are distinct or not. Should return true if values are equal.

deleteProp

dictionaryToArray

RxJS operator that emits items from the source Observable that are distinct by comparison from the previous item, comparing each key in the keys array. It is named distinctUntilSomeChanged because it iterates the keys and uses Array.prototype.some to decide whether values are distinct.

Behavior of each transformation helper for null, undefined, and malformed

extract

This guide walks you through creating your first rxState() instance, seeding initial state, connecting async sources, and binding state into a signals-first template.

Goal

Goal

This is a case study: take a side effect wired up with manual subscribe/cleanup and refactor it to rxEffects, which ties the effect to the component lifecycle for you. rxEffects is the sanctioned replacement for the removed hold() on the functional RxState surface.

Goal

Goal

When you update state in modern Angular, how you produce the new value matters as

insert

The KeyCompareMap is used to configure custom comparison for defined keys.

Managing a collection in component state means writing the same add / update / remove

Goal: run Observable- or Promise-based side effects in a component without manual subscribe / takeUntil(destroy$) / ngOnDestroy bookkeeping. rxEffects owns the subscriptions and cleans them up when the host is destroyed.

By the end of this lesson you will have taken a component that stores its state in a

RxState has partial updates built in. Every change sent to the state over set or connect is treated as a partial update: an instance typed with T accepts Partial on both methods, and the change is merged into the current state.

This page documents a zone-era OnPush performance technique: passing an

patch

State is the data your UI reads and reacts to. The first question is not _which

remove

The functional way to create an RxActions instance: a typed set of event channels that turns an actions interface into a dispatcher (login(...)), an observable stream (login$), and a side-effect binder (onLogin(...)) for each key. It is imported from the @rx-angular/state/actions secondary entry point and must be called within an injection context; the instance is destroyed automatically when the host component/directive/service is destroyed.

rxEffects is the functional creation function for RxEffects, a small helper that runs Observable- or Promise-based side effects and cleans up their subscriptions automatically when the current injection context is destroyed. It replaces manual subscribe / takeUntil(destroy$) / ngOnDestroy boilerplate.

The functional way to create and configure an RxState instance. rxState() is a wrapper around the class-based RxState service that binds its lifecycle to the current injection context; the instance is destroyed automatically when the host component/directive/service is destroyed. It is the modern default for local reactive state; the class API is the legacy surface.

RxState is a light-weight reactive state management service for managing local state in Angular. This page documents the class-based API, the legacy surface. For new code, prefer the functional rxState() creator, which wraps this class and binds its lifecycle to the injection context automatically.

RxState instances read two settings from the DI tree: the scheduler that drives state computation and the accumulator that merges each change into the state. Both are provided with the provideRxStateConfig provider function and its configuration features.

RxState comes with a discipline about how state is read, derived, and acted

RxJS operator that reads a slice of state as a shared, replayed, distinct Observable. It removes the need to think about late subscribers, multiple subscribers, or repeated emissions of the same value. select has several overloads: read the whole state, apply operators, access a (possibly nested) key by path, or transform a key/slice with a projection function.

RxJS operator that emits only the provided keys from the source Observable. Each key is filtered to emit only defined values and checked for distinct emissions; comparison is done for each key in the keys array. A selection is only emitted when it is valid (every selected key must exist and be defined in the source), so the operator always yields a complete slice with all values present.

setProp

slice

RxJS operator that turns an arbitrary source Observable into a stateful one: it emits only distinct and defined values, and shares/replays the result for multiple subscribers. It behaves like the Observable pipe method (pass zero or more RxJS operators and they are composed in order) while adding the repetitive state-processing guarantees on top.

toDictionary

toggle

npm

update

upsert

By the end of this lesson you will have a standalone, zoneless component that starts with a plain signal, then reaches for rxState() the moment an asynchronous source arrives, and you will see the value update on screen.