State Management with NGXS in Angular

1. Introduction

State management is a critical aspect of building scalable applications in Angular. NGXS is a state management library that simplifies state management in Angular applications.

2. What is NGXS?

NGXS (pronounced "nexus") is a state management library for Angular applications, inspired by Redux and developed with simplicity in mind. It provides a store, actions, and a way to manage application state efficiently.

3. Core Concepts

• Store: A single source of truth for application state.
• Actions: Events that trigger state changes.
• Selectors: Functions to retrieve slices of state.
• State Models: Plain TypeScript classes that define the shape of the state.

4. Installation

To install NGXS in your Angular project, run the following command:

npm install @ngxs/store

5. Creating State

To define a state in NGXS, you need to create a state class and decorate it with the @State() decorator.

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

class CounterStateModel {
    count: number;
}

@State({
    name: 'counter',
    defaults: {
        count: 0
    }
})
export class CounterState {
    @Action(Increment)
    increment(ctx: StateContext) {
        const state = ctx.getState();
        ctx.setState({
            ...state,
            count: state.count + 1
        });
    }
}

6. Dispatching Actions

To change the state, you dispatch actions. This can be done in any Angular component by injecting the Store service.

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

@Component({
    selector: 'app-counter',
    template: 'Increment'
})
export class CounterComponent {
    constructor(private store: Store) {}

    increment() {
        this.store.dispatch(new Increment());
    }
}

7. Selecting State

To read state values, you can use selectors from the Store.

import { Store } from '@ngxs/store';
import { Select } from '@ngxs/store';

@Component({
    selector: 'app-counter-display',
    template: '
Count: {{ count$ | async }}
'
})
export class CounterDisplayComponent {
    @Select(CounterState) count$ = this.store.select(state => state.counter.count);

    constructor(private store: Store) {}
}

8. Best Practices

• Keep state as flat as possible to avoid deeply nested structures.
• Use actions to encapsulate state changes.
• Utilize selectors to access state efficiently.
• Perform side effects in action handlers, not in components.

9. FAQ