NGXS is a state management pattern and library for Angular applications. It provides a simple, modular approach to managing application state, inspired by Redux but designed specifically for Angular's architecture and TypeScript.

Pros

• Strongly typed and Angular-centric, providing excellent integration with Angular's ecosystem
• Simpler boilerplate compared to other state management solutions like NgRx
• Supports plugins for additional functionality (e.g., devtools, logger)
• Offers powerful features like state operators and action handlers

Cons

• Smaller community and ecosystem compared to more established solutions like NgRx
• May introduce unnecessary complexity for smaller applications
• Learning curve for developers new to state management patterns
• Limited documentation and resources compared to more popular alternatives

Code Examples

1. Defining a state:

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

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

@State<string[]>({
  name: 'todos',
  defaults: []
})
export class TodoState {
  @Action(AddTodo)
  add(ctx: StateContext<string[]>, action: AddTodo) {
    const state = ctx.getState();
    ctx.setState([...state, action.payload]);
  }
}

2. Dispatching an action:

import { Store } from '@ngxs/store';
import { AddTodo } from './todo.state';

export class TodoComponent {
  constructor(private store: Store) {}

  addTodo(todo: string) {
    this.store.dispatch(new AddTodo(todo));
  }
}

3. Selecting state in a component:

import { Select } from '@ngxs/store';
import { TodoState } from './todo.state';
import { Observable } from 'rxjs';

export class TodoListComponent {
  @Select(TodoState) todos$: Observable<string[]>;
}

Getting Started

1. Install NGXS:

   npm install @ngxs/store
   

2. Add NGXS to your Angular module:

   import { NgxsModule } from '@ngxs/store';
   import { TodoState } from './todo.state';
   
   @NgModule({
     imports: [
       NgxsModule.forRoot([TodoState])
     ]
   })
   export class AppModule {}
   

3. Use NGXS in your components:

   import { Store } from '@ngxs/store';
   import { AddTodo } from './todo.state';
   
   export class TodoComponent {
     constructor(private store: Store) {}
   
     addTodo(todo: string) {
       this.store.dispatch(new AddTodo(todo));
     }
   }