Skip to main content

@rx-angular/state

npm rx-angular CI Coverage Status

Reactive Component State for Angular

RxState is a lightweight, flexible, strongly typed and tested tool dedicated to reduce the complexity of managing component state in Angular.

state logo

Sub Modules

Intro Video

intro-video_rx-angular--state-rx-state

Description

Developing modern, reactive user interfaces imposes a variety of challenging tasks. Naming some of those:

  • reacting to events from different sources
  • transforming and composing state
  • handling state lifetime
  • handling subscriptions

There are plenty of solutions available for managing these challenges on a global level (Akita, NgRx, NgXs, ...). None of them is dedicated to targeting the particular needs of the component level.

@rx-angular/state was specifically designed to give developers a tool for mastering component state without forcing them to use complex design patterns.

Its lightweight and intuitive API and the automatic subscription handling makes @rx-angular/state the perfect fit for handling state in any Angular component.

Using this library allows you to implement things like:

  • merge global into local state
  • shared state selections
  • subscription-less interaction
  • hook into imperative functions (e.g. component lifecycle or HostBindings)

with very little effort in any component.

Key features

  • Slim and intuitive API
  • Automated subscription handling
  • Intuitive way for handling ViewModels
  • Connect any Observable source to the state
  • Partial state updates
  • Reactive state selection
  • Lazy state (no BehaviorSubject)
  • Foundation for zone-less Angular applications

Install

npm install --save @rx-angular/state
# or
yarn add @rx-angular/state

Update

If you are using @rx-angular/state already, please consider upgrading with the @angular/cli update command in order to make sure all provided code migrations are processed properly.

ng update @rx-angular/state
# or with nx
nx migrate @rx-angular/state

Usage

Usage Documentation

Testing

Testing

API

API Documentation

Tutorials

Snippets

Videos

intro-video_rx-angular--state-rx-state🎥 RxAngular State, The Component Reactive Store | Marmicode Tasting Session

tackling-component-state-reactively🎥 Tackling Component State Reactively (Live Demo at 24:47)

Blogs/Documents

OSS Example Applications

Version Compatibility

AngularRxJS@rx-angular/state
14^7.4.0> 1.4.6
^12.0.0 or ^13.0.0^6.5.5 or ^7.4.0> 1.4.6
^11.0.0^6.5.5<= 1.4.6

Regarding the compatibility to RxJs, we generally stick to the compatibilities of the angular framework itself. All the packages support RxJs versions ^6.5.5 || ^7.4.0. For more information about the compatibilities of angular itself see this gist