Introduction to NGXS

NGXS (Angular State Management) is a state management pattern + library for Angular. It acts as a single source of truth for your application’s state, providing easy access and management. It helps in making applications more predictable and maintainable.

Why Use NGXS?

NGXS simplifies the state management process with its cleaner APIs and reduces boilerplate code compared to other state management libraries. It is highly efficient and integrates seamlessly with Angular.

Key Features of NGXS

• Manage state in a structured way
• Simple, intuitive API
• Reduces boilerplate code
• Middleware support
• Router state management

Example APIs and Usage

@State

The @State decorator is used to define a state in NGXS.

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

    export interface TodoStateModel {
      todos: string[];
    }

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

Actions

Actions are dispatched to make changes to the state.

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

Select

The @Select decorator is used to select a piece of state from the store.

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

    export class TodoComponent {
      @Select(TodoState) todos$;

      constructor() { }
    }

Dispatch

The @Dispatch decorator is used to dispatch actions.

    import { Component } from '@angular/core';
    import { Store } from '@ngxs/store';
    import { AddTodo } from './todo.actions';

    @Component({
      selector: 'app-todo',
      template: `
        
        Add Todo
      `
    })
    export class TodoComponent {
      constructor(private store: Store) {}

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

Complete App Example with NGXS

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { NgxsModule } from '@ngxs/store';
    import { AppComponent } from './app.component';
    import { TodoState } from './state/todo.state';

    @NgModule({
      declarations: [AppComponent],
      imports: [
        BrowserModule,
        NgxsModule.forRoot([TodoState])
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

    // app.component.ts
    import { Component } from '@angular/core';
    import { Store } from '@ngxs/store';
    import { AddTodo } from './actions/todo.actions';

    @Component({
      selector: 'app-root',
      template: `
        
        Add
        

          
{{ todo }}
        
      `
    })
    export class AppComponent {
      todoState$;

      constructor(private store: Store) {
        this.todoState$ = this.store.select(state => state.todos);
      }

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

NGXS simplifies your Angular application’s state management with an intuitive, manageable API. Whether you’re a seasoned developer or new to Angular, NGXS can help you create scalable, maintainable applications.

Hash: c25233351707fb04d2ed3a406df41a9dac0051625b6bfedcab59765c50f9c022