@ngrx/component-store

What is @ngrx/component-store?

@ngrx/component-store is a library for managing local/component state in Angular applications. It provides a simple and reactive way to manage state within Angular components, leveraging RxJS for state management and side effects.

What are @ngrx/component-store's main functionalities?

State Management

This feature allows you to manage the state within a component. The `ComponentStore` class is used to define the state and provide methods to update it.

```typescript
import { ComponentStore } from '@ngrx/component-store';

interface State {
  count: number;
}

@Injectable()
class CounterStore extends ComponentStore<State> {
  constructor() {
    super({ count: 0 });
  }

  readonly increment = this.updater((state) => ({ count: state.count + 1 }));
  readonly decrement = this.updater((state) => ({ count: state.count - 1 }));
  readonly reset = this.updater(() => ({ count: 0 }));
}
```

Selectors

Selectors are used to derive and expose slices of the state. The `select` method allows you to create observables that emit state changes.

```typescript
@Injectable()
class CounterStore extends ComponentStore<State> {
  constructor() {
    super({ count: 0 });
  }

  readonly count$ = this.select(state => state.count);
}
```

Effects

Effects are used to handle side effects, such as HTTP requests. The `effect` method allows you to define observables that can trigger state changes based on external events.

```typescript
@Injectable()
class CounterStore extends ComponentStore<State> {
  constructor(private readonly http: HttpClient) {
    super({ count: 0 });
  }

  readonly loadCount = this.effect((trigger$) =>
    trigger$.pipe(
      switchMap(() => this.http.get<number>('/api/count').pipe(
        tapResponse(
          (count) => this.patchState({ count }),
          (error) => console.error(error)
        )
      ))
    )
  );
}
```

Other packages similar to @ngrx/component-store

ngxs

NGXS is a state management library for Angular that is modeled after the Redux pattern. It provides a more opinionated and structured approach to state management compared to @ngrx/component-store, with features like actions, selectors, and middleware.

akita

Akita is a state management library for Angular applications that focuses on simplicity and performance. It provides a more flexible and less opinionated approach compared to @ngrx/component-store, with features like entity stores and query services.

angular-redux

Angular-Redux is a library that integrates Redux with Angular. It provides a way to manage global state using the Redux pattern, which can be more complex and boilerplate-heavy compared to the local state management provided by @ngrx/component-store.

README

@ngrx/component-store

The sources for this package are in the main NgRx repo. Please file issues and pull requests against that repo.

Changelog

18.1.1 (2024-10-29)

Bug Fixes

• data: export HttpOptions (#4564) (4909627)
• router-store: use non-const enum to allow isolatedModules tsconfig option (#4554) (f993759)

<a name="18.1.0"></a>

Bug Fixes

• component-store: remove @ngrx/operators from dependencies (#4532) (3b4b9c4)
• effects: remove @ngrx/operators from dependencies (#4531) (4fb78f1)
• signals: remove usage of SIGNAL from @angular/core/primitives/signals package (#4530) (cae429a)
• signals: use Injector of rxMethod instance caller if available (#4529) (ffc1d87), closes #4528
• store-devtools: add @angular/core as peer dependency (#4478) (62cceeb), closes #4479

Features

• eslint-plugin: add preferProtectedState rule (#4488) (32c772d), closes #4474
• signals: add deepComputed function (#4539) (269bd32)

<a name="18.0.2"></a>