@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.

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

API

API Documentation

Usage

Usage 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

Resources

• 🎥 Tackling Component State Reactively (Live Demo at 24:47)
• 🎥 Extending Angular for the Reactive Web
• 💾 Research on Reactive Ephemeral State
• 📜 Design Documents
• 📑 Fully-reactive Zone-Less Angular/Ionic Progressive Web Application by Mike Hartington

Browsers support

IE / Edge	Firefox	Chrome	Safari	iOS Safari
IE11, Edge	last version	last version	last 2 versions	last 2 versions