@ngxs/store

State management library for Angular inspired by Redux and CQRS — simpler than NgRx with less boilerplate while maintaining predictability.

@ngxs/store

Angular

State management library for Angular inspired by Redux and CQRS — simpler than NgRx with less boilerplate while maintaining predictability.

npm GitHub Docs

Fit

Bundle (gzip)

10.9 kB

42.8 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

NgRx is powerful but requires actions, reducers, selectors, and effects as separate files for every feature. For small-to-medium apps this ceremony slows development without proportional benefit.

What It Does

NGXS uses decorator-based state classes where actions are simple TypeScript classes and state mutations are methods on the state class. @Select() decorators derive observables from state, and the Store service dispatches actions — all with strong TypeScript typing and a fraction of the NgRx boilerplate.

Installation

bash

npm install @ngxs/store

Usage Example

typescript

import { State, Action, StateContext, Selector } from '@ngxs/store';

export class AddTodo { static readonly type = '[Todo] Add'; constructor(public text: string) {} }

@State<string[]>({ name: 'todos', defaults: [] })
@Injectable()
export class TodoState {
  @Selector() static todos(state: string[]) { return state; }

  @Action(AddTodo)
  add(ctx: StateContext<string[]>, action: AddTodo) {
    ctx.setState([...ctx.getState(), action.text]);
  }
}

Related packages

@angular/cdkAngular

Angular Component Dev Kit — a set of behavior primitives for building accessible, high-quality UI components without prescribing any visual style.

@angular/materialAngular

Official Material Design component library for Angular — 30+ accessible, themeable UI components built for Angular's ecosystem.

@ng-bootstrap/ng-bootstrapAngular

Angular widgets built from scratch using Bootstrap CSS — no jQuery, no Popper.js, just pure Angular components.

ng-zorro-antdAngular

Enterprise-grade UI component library for Angular based on Ant Design — 60+ production-ready components with a polished design system.

@ngneat/until-destroyAngular

Automatic RxJS subscription cleanup for Angular components — no more manual unsubscribe logic in ngOnDestroy.