How do I use NGXS in my Angular application?

How do I use NGXS in my Angular application?

To use NGXS, first install it via npm with npm install @ngxs/store. Then, import NgxsModule in your app module.

What are the main benefits of using NGXS?

NGXS simplifies state management, provides a clear structure, and offers powerful features like state snapshots and plugins.

Can you show me a simple example of a state in NGXS?

Sure! Here's a basic example:

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

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

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

How do I connect NGXS with my Angular components?

You can connect NGXS to your components using the Select decorator to get state and the Store service to dispatch actions.