README
@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
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
Testing
API
Tutorials
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)
Blogs/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
Browsers support
IE / Edge |
Firefox |
Chrome |
Safari |
iOS Safari |
---|---|---|---|---|
IE11, Edge | last version | last version | last 2 versions | last 2 versions |