NGXS Introduction 🎯

Welcome to our deep dive into NGXS! In this tutorial, we'll explore the world of state management in Angular applications using NGXS - a powerful, declarative, and easy-to-use library. By the end of this lesson, you'll be able to confidently build complex Angular applications with well-managed state. 📝 Note: NGXS stands for Next-Gen Angular State Management.

Why NGXS? 💡

NGXS simplifies state management in Angular applications by providing a way to declaratively manage state, dispatch actions, and handle side effects. It encourages a clean separation of concerns, making your code more maintainable and easier to test.

Getting Started 🚀

Before we dive in, make sure you have Node.js and Angular CLI installed on your machine.

To add NGXS to your Angular project:

Install the @ngxs/store and @ngxs/devtools packages:

bash

ng add @ngxs/store
ng add @ngxs/devtools

After the installation, you can import the StoreModule in your AppModule:

typescript

import { StoreModule } from '@ngxs/store';

@NgModule({
  imports: [
    StoreModule.forRoot([]), // initialize the store
  ],
})
export class AppModule { }

State Management with NGXS 📝

Defining a State 💡

In NGXS, we define states using @State decorator. Here's an example of a simple state:

typescript

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

export class CounterState {
  static readonly featureKey = 'counter';

  constructor(private context: StateContext) {}

  @State()
  count = 0;
}

In the example above, we've defined a CounterState with a featureKey counter and a count property initialized to 0.

Dispatching Actions 💡

Actions are the triggers for state changes in NGXS. To dispatch an action, we create a class with @Action decorator and define the action handler function:

typescript

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

export class IncrementAction {
  static readonly Increment = 'Increment';

  constructor() {}
}

@Action(IncrementAction)
increment(ctx: StateContext<CounterState>) {
  ctx.dispatch(new IncrementAction());
  ctx.setState(prevState => ({ count: prevState.count + 1 }));
}

In the example above, we've defined an IncrementAction with a handler function increment that increments the count by 1.

Running the Example 💡

Now, let's create a simple Angular component that uses our state and action:

typescript

import { Component, OnInit } from '@angular/core';
import { Store } from '@ngxs/store';
import { IncrementAction } from './counter.state';

@Component({
  selector: 'app-counter',
  template: `
    <p>Counter: {{ counter$ | async }}</p>
    <button (click)="incrementCounter()">Increment</button>
  `,
})
export class CounterComponent implements OnInit {
  counter$ = this.store.select(state => state.counter.count);

  constructor(private store: Store) {}

  ngOnInit() {}

  incrementCounter() {
    this.store.dispatch(new IncrementAction());
  }
}

In this example, we've created a CounterComponent that subscribes to the counter state and dispatches the IncrementAction on button click.

Wrapping Up 💡

NGXS provides a powerful way to manage state in Angular applications. By understanding states, actions, and action dispatching, you can build more maintainable and scalable Angular applications.

Stay tuned for more on NGXS, where we'll explore more advanced concepts and build a complete project together. Happy coding! 🎯