How do I set up NGXS in my Angular application?

How do I set up NGXS in my Angular application?

To set up NGXS, first install it using npm: npm install @ngxs/store. Then, import NgxsModule in your app module.

What do I need to do after importing NgxsModule?

After importing, you need to define your state classes and register them in the NgxsModule.forRoot() method.

Can you give me an example of a state class?

Sure! Here's a simple 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 dispatch actions to update the state?

You can dispatch actions using the Store service. Inject it into your component and call store.dispatch(new AddItem('New Item'));.