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.
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 make
@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.
- 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
npm install --save @rx-angular/state
yarn add @rx-angular/state
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
- 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
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
- 📑 Zone-Less Todo MVC - Edouard Bozon
Regarding the compatibility with RxJS, we generally stick to the compatibilities of the Angular framework itself.
All the packages support RxJS versions
For more information about the compatibilities of Angular itself see this gist.