@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

16.0.0-beta.0 (2023-04-27)

Bug Fixes

• data: allow 0 to be a valid key (#3830) (e50126d), closes #3828
• effects: run user provided effects defined as injection token (#3851) (cdaeeb6), closes #3848
• store: correctly infer action group events defined as empty object (#3833) (dc78447)
• store-devtools: correctly import state when feature is set to true (#3855) (0df3419), closes #3636

Features

• component-store: add selectSignal method for interop with Angular Signals (#3861) (195d5ac)
• component-store: add tapResponse signature with observer object (#3829) (3a5e5d8)
• effects: accept ObservableInput as concatLatestFrom argument (#3838) (34dd28c)
• router-store: add @nrwl/angular data persistence operators (#3841) (4482751), closes #3777
• router-store: remove deprecated getSelectors method (#3816) (351a75e), closes #3815
• schematics: replace any type with unknown type (#3827) (0ea2933)
• schematics: Use createActionGroup in schematics (#3791) (f6ce20f)
• store: add createMockStore migration (#3810) (ded4240)
• store: add selectSignal method for interop with Angular Signals (#3856) (999dcb6)
• store: preserve the event name case with createActionGroup (#3832) (482fa5d)
• store: remove deprecated createFeature method (#3825) (fd8f347), closes #3814
• store: remove forbidden chars and empty str checks from createActionGroup (#3857) (e37c57b)
• convert entity and router selectors interfaces to types (#3853) (73eb55c)
• store: remove getMockStore in favor of createMockStore (#3835) (8d0ed8e)
• store: use strict projectors for createFeature selectors (#3799) (bafd121)
• update to Angular v16.0.0-next.6 release (#3831) (d7e03df)

BREAKING CHANGES

• store: The event name case is preserved when converting to the action name by using the createActionGroup function.

BEFORE:

All letters of the event name will be lowercase, except for the initial letters of words starting from the second word, which will be uppercase.

const authApiActions = createActionGroup({
  source: 'Auth API',
  events: {
    'LogIn Success': emptyProps(),
    'login failure': emptyProps(),
    'Logout Success': emptyProps(),
    logoutFailure: emptyProps(),
  },
});

// generated actions:
const { loginSuccess, loginFailure, logoutSuccess, logoutfailure } = authApiActions;

AFTER:

The initial letter of the first word of the event name will be lowercase, and the initial letters of the other words will be uppercase. The case of other letters in the event name will remain the same.

const { logInSuccess, loginFailure, logoutSuccess, logoutFailure } = authApiActions;

• store: The createFeature signature with root state is removed in favor of a signature without root state. An automatic migration is added to remove this signature.

BEFORE:

interface AppState {
  users: State;
}

export const usersFeature = createFeature<AppState>({
  name: 'users',
  reducer: createReducer(initialState /* case reducers */),
});

AFTER:

export const usersFeature = createFeature({
  name: 'users',
  reducer: createReducer(initialState /* case reducers */),
});

• router-store: The deprecated getSelectors function has been removed from the @ngrx/router-store package.

BEFORE:

The @ngrx/router-store package exports the getSelectors function.

AFTER:

The @ngrx/router-store package no longer exports the getSelectors function. A migration has been provided to replace existing usage

• schematics: NgRx Schematics do not use any types to define actions, these are replaced with the unknown type.

BEFORE:

Schematics used the any type to declare action payload type.

AFTER:

Schematics use the unknown type to declare action payload type.

• store: The getMockStore function is removed in favor of createMockStore

BEFORE:

import { getMockStore } from '@ngrx/store/testing';
const mockStore = getMockStore();

AFTER:

import { createMockStore } from '@ngrx/store/testing';
const mockStore = createMockStore();

• store: Projectors of selectors generated by createFeature are strongly typed.

BEFORE:

Projector function arguments of selectors generated by createFeature are not strongly typed:

const counterFeature = createFeature({
  name: 'counter',
  reducer: createReducer({ count: 0 }),
});

counterFeature.selectCount.projector;
// type: (...args: any[]) => number

AFTER:

Projector function arguments of selectors generated by createFeature are strongly typed:

const counterFeature = createFeature({
  name: 'counter',
  reducer: createReducer({ count: 0 }),
});

counterFeature.selectCount.projector;
// type: (featureState: { count: number; }) => number

<a name="15.4.0"></a>