@rx-angular/state

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.

Sub Modules

• 🧩 Selections
• ☁ Effects

Intro Video

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 BehaviourSubject)
• 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

• Basic Tutorial
• Counter - StackBlitz

Snippets

• Logic comparison - Increment a Value
• Loading state and data fetching
• Passing Observables directly
• How to run partial state updates
• Get nested state slices
• Deriving simple state
• Composing state using NgRx selectors
• Manage entities using NgRx entity adapter
• BehaviorSubject vs RxState
• Managing ViewModels with selectSlice
• Manage reactive HostBindings
• Difference between Global and Local state
• Using RxState as Global State

Vidoes

🎥 RxAngular State, The Component Reactive Store | Marmicode Tasting Session

🎥 Tackling Component State Reactively (Live Demo at 24:47)

• 🎥 Extending Angular for the Reactive Web

• German content | 🎥 Michael explains rx-state to webdave_de (Livestream)

Blogs/Documents

• 💾 Research on Reactive Ephemeral State

• 📜 Design Documents

OSS Example Applications

• 📑 Fully-reactive Zone-Less Angular/Ionic Progressive Web Application - Mike Hartington
• 📑 High performant zone-Less Angular Progressive Web Application - TasteJS
• 📑 Zone-Less Angular Application - Tour of heros - Michael_Hladky

Version Compatibility

Angular	RxJS	@rx-angular/state
^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