@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

12.0.0-beta.0 (2021-04-27)

Bug Fixes

• component: include files in ng-add schematics (ad13c9c)
• component-store: include files in ng-add schematics (bfef622)
• data: include files in ng-add schematics (526edd9)
• effects: ng-add schematics will generate effects files properly (4389307)
• entity: include files in ng-add schematics (4d9f647)
• router-store: include files in ng-add schematics (eb71d5c)
• store: ng-add schematics will generate router files if minimal set to false (74a2671)
• store-devtools: include files in ng-add schematics (ac706de)

build

• update to Angular libraries to version 12 RC.0 (#3000) (4fb030e)
• update to Nx version 12.0.x and TypeScript 4.1.x (#2999) (cb258cb)

Features

• store: deprecate selectors with props (#2993) (7c6d4e4)

BREAKING CHANGES

• Minimum versions of Angular and TypeScript have been updated

BEFORE:

Minimum of Angular version 11.x Minimum of TypeScript 4.1.x

AFTER:

Minimum of Angular version 12.x Minimum of TypeScript 4.2.x

• The minimum TypeScript version has been updated to 4.1.x

BEFORE:

The minimum TypeScript version is 4.0.x

AFTER:

The minimum TypeScript version is 4.1.x

<a name="11.1.1"></a>