@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

14.0.0-rc.0 (2022-06-08)

Code Refactoring

• router-store: change name for full router state serializer (#3430) (d443f50), closes #3416

Features

• component: add separate modules for PushPipe and LetDirective (#3449) (eacc4b4), closes #3341
• component: deprecate ReactiveComponentModule (#3451) (b4dd2c8)
• eslint-plugin: improve install flow (#3447) (8ddaf60)
• schematics: use schematicCollections instead of defaultCollection (#3441) (5abf828), closes #3383

BREAKING CHANGES

• router-store: The full router state serializer has been renamed.

BEFORE:

The full router state serializer is named DefaultRouterStateSerializer

AFTER:

The full router state serializer is named FullRouterStateSerializer. A migration is provided to rename the export in affected projects.

<a name="14.0.0-beta.0"></a>