@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

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>