@ngrx/store

What is @ngrx/store?

@ngrx/store is a state management library for Angular applications, inspired by Redux. It provides a way to manage state in a predictable manner using actions, reducers, and selectors.

What are @ngrx/store's main functionalities?

State Management

This code demonstrates how to set up a basic state management system using @ngrx/store. The StoreModule is imported and configured with a reducer.

import { StoreModule } from '@ngrx/store';
import { counterReducer } from './counter.reducer';

@NgModule({
  imports: [
    StoreModule.forRoot({ count: counterReducer })
  ]
})
export class AppModule {}

Actions

This code shows how to create actions using the createAction function. Actions are dispatched to trigger state changes.

import { createAction } from '@ngrx/store';

export const increment = createAction('[Counter] Increment');
export const decrement = createAction('[Counter] Decrement');
export const reset = createAction('[Counter] Reset');

Reducers

This code defines a reducer function using createReducer and on functions. The reducer handles different actions to update the state.

import { createReducer, on } from '@ngrx/store';
import { increment, decrement, reset } from './counter.actions';

export const initialState = 0;

const _counterReducer = createReducer(initialState,
  on(increment, state => state + 1),
  on(decrement, state => state - 1),
  on(reset, state => initialState)
);

export function counterReducer(state, action) {
  return _counterReducer(state, action);
}

Selectors

This code demonstrates how to create selectors to read specific pieces of state. Selectors are used to derive data from the store.

import { createSelector, createFeatureSelector } from '@ngrx/store';

export const selectCounterState = createFeatureSelector<number>('count');

export const selectCount = createSelector(
  selectCounterState,
  (state: number) => state
);

Other packages similar to @ngrx/store

redux

Redux is a popular state management library for JavaScript applications. It is similar to @ngrx/store in that it uses actions, reducers, and a single store to manage state. However, Redux is framework-agnostic and can be used with any JavaScript framework or library.

mobx

MobX is a state management library that uses observables to manage state. Unlike @ngrx/store, which follows a more rigid, predictable state management pattern, MobX allows for more flexible and reactive state management.

vuex

Vuex is a state management library specifically designed for Vue.js applications. It is similar to @ngrx/store in that it uses a centralized store, actions, and mutations (similar to reducers) to manage state. However, it is tightly integrated with Vue.js.

README

@ngrx/store

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

License: MIT

Changelog

15.0.0-beta.0 (2022-11-03)

Features

• component: add migration for replacing ReactiveComponentModule (#3506) (49c6cf3), closes #3491
• component: handle observable dictionaries (#3602) (42efccb), closes #3545
• component: remove ReactiveComponentModule (#3643) (4bdf345), closes #3623
• component-store: Add SelectorObject to select (#3629) (f8d0241), closes #3632 #3631
• effects: change the signature of provideEffect (#3587) (899afe7)
• effects: migration for provideEffects argument (#3601) (f7dfeab)
• effects: remove @Effect decorator (#3634) (96c5bdd), closes #3617
• eslint-plugin: remove rules using @Effect (#3635) (5f74e61)
• schematics: drop support for TypeScript <4.8 (#3631) (b9c1ab6)
• store: make reducers arg of StoreModule.forRoot optional (#3632) (e5177aa)
• store: strict projector for selectors with props (#3640) (351459f), closes #3571
• store: strict projectors (#3581) (43198a2), closes #3571

BREAKING CHANGES

• component: ReactiveComponentModule is removed in favor of LetModule and PushModule.

BEFORE:

import { ReactiveComponentModule } from '@ngrx/component';

@NgModule({
  imports: [
    // ... other imports
    ReactiveComponentModule,
  ],
})
export class MyFeatureModule {}

AFTER:

import { LetModule, PushModule } from '@ngrx/component';

@NgModule({
  imports: [
    // ... other imports
    LetModule,
    PushModule,
  ],
})
export class MyFeatureModule {}

• store: The projector method has become strict

BEFORE:

You could pass any arguments to the projector method

const selector = createSelector( selectString, // returning a string selectNumber, // returning a number (s, n, prefix: string) => { return prefix + s.repeat(n); } )

// you could pass any argument selector.projector(1, 'a', true);

AFTER:

const selector = createSelector( selectString, // returning a string selectNumber, // returning a number (s, n, prefix: string) => { return prefix + s.repeat(n); } )

// this throws selector.projector(1, 'a', true); // this does not throw because the arguments have the correct type selector.projector(1, 'a', 'prefix');

• store: The projector function on the selector is type-safe by default.

BEFORE:

The projector is not type-safe by default, allowing for potential mismatch types in the projector function.

const mySelector = createSelector(
  () => 'one',
  () => 2,
  (one, two) => 3
);

mySelector.projector(); // <- type is projector(...args: any[]): number

AFTER:

The projector is strict by default, but can be bypassed with an any generic parameter.

const mySelector = createSelector(
  () => 'one',
  () => 2,
  (one, two) => 3
);

mySelector.projector(); // <- Results in type error. Type is projector(s1: string, s2: number): number

To retain previous behavior

const mySelector = createSelector(
  () => 'one',
  () => 2,
  (one, two) => 3
)(mySelector.projector as any)();

• effects: The @Effect decorator is removed

BEFORE:

Defining an effect is done with @Effect

@Effect() data$ = this.actions$.pipe();

AFTER:

Defining an effect is done with createEffect

data$ = createEffect(() => this.actions$.pipe());

• effects: The signature of provideEffects is changed to expect a spreaded array of effects.

BEFORE:

provideEffects expecteded the effects to be passed as an array.

// single effect
provideEffects([MyEffect]);

// multiple effects
provideEffects([MyEffect, MySecondEffect]);

AFTER:

provideEffects expects the effects as a spreaded array as argument.

// single effect
provideEffects(MyEffect);

// multiple effects
provideEffects(MyEffect, MySecondEffect);

<a name="14.3.2"></a>