Angular EnterpriseAngular Enterprise

Angular Lib: Store: NgRx

  • Libraries
  • 33 links
  • 5 min read
Libraries for state management with NgRx

NgRx is a well-known library in the world of Angular which allows reactive management of application state in a centralized global store (ngrx/store) or in a component local store (ngrx/component-store and ngrx/signals). You will find below many utilities created in order to increase the power of NgRx and help developers be more efficient with NgRx.

  • ngrx is the base library used by many companies, indeed NgRx is the most famous state management library for Angular applications. It includes the Store, Effects, Entity, ComponentStore and the signal-based SignalStore. ngrx
  • ngrx-ducks is a library which acts as extra layer on top of NgRx. It helps discoverability of the codebase and provides an API for writing simpler actions. ngrx-ducks
  • ngrx-vis creates automatically a graphical visualization of each action in an Angular application. ngrx-vis
  • ngrx-etc is another tiny library which adds extra functions on top of NgRx reducers, it helps writing more concise code without losing immutability in the reducer functions. ngrx-etc
  • ngrx-forms is a library which helps developers use NgRx for building complex Angular forms stored in the global state of the app. ngrx-forms
  • ngrx-graphql is a helper library for converting selectors made with ngrx-entity-relationship into a GraphQL query. This repository is now archived. ngrx-graphql
  • ngrx-entity-relationship is a library which facilitates making relationships with entities in ngrx/entity and ngrx/data. ngrx-entity-relationship
  • ngrx-entity-schematic is a complete Angular schematic for quickly scaffolding NgRx Entities with actions, effects, reducer, model, service, and passing specs. This repository is now archived. ngrx-entity-schematic
  • ngrx-store-storagesync provides a way to sync the state of an Angular application between the ngrx/store and localstorage/sessionstorage. ngrx-store-storagesync
  • ngrx-store-localstorage is another library which facilitates syncing between NgRx store and local storage. ngrx-store-localstorage
  • ngrx-file-upload is a library which is aimed to manage file uploads using NgRx. ngrx-file-upload
  • ngrx-wieder is a lightweight solution for implementing undo-redo in Angular apps on top of NgRx. ngrx-wieder
  • ngrx-store-logger is an advanced logger for ngrx/store applications inspired by redux-logger. ngrx-store-logger
  • ngrx-auto-entity is an alternative to ngrx/data in the sense of the shared vision to provide a seamless means of dealing with standard entity actions and effects with minimal repetitive code requirements. ngrx-auto-entity
  • ng-helpers is another solution to reduce boilerplate needed to write the state management actions, effects and reducers by leveraging Typescript generics. ng-helpers
  • ngrx-handlers is yet another solution to the boilerplate problem with NgRx, this library allows you to combine writing action and reducer in a single function called combineHandlers. It is a simple and effective solution. This repository is now archived. ngrx-handlers
  • ts-action is a set of various utility features created by Nicholas Jamieson aimed to fix the problem of action boilerplate and finally provide useful way for working with NgRx at different layers such as effects and reducers. It has been merged into NgRx version 7.4 but this lib can still be useful if you can't update. ts-action
  • ngrx-testing facilitates testing of NgRx codebase thanks to jest and jasmine-marbles. ngrx-testing
  • normalizr is a library which provides a simple way for normalizing nested JSON according to a schema. This repository is now archived. Normalizr
  • ngrx-store-freeze is an old library created in order to prevent state from being mutated, those checks are now built into the official NgRx library as runtime checks. ngrx-store-freeze
  • ngrx-utils is a set of utility functions in order to make development of Angular app easier. Warning most of those utilities have now been added to the official NgRx library. This repository is now archived. ngrx-utils
  • @ngrx/eslint-plugin is the official ESLint plugin for NgRx, it will help you write safer code that is easier to maintain. It replaces the community eslint-plugin-ngrx which is now archived. @ngrx/eslint-plugin
  • ngrx-tslint-rules was a linting library for NgRx based on the deprecated TSLint, it helped writing normalized code that is easier to read. This repository is now archived. ngrx-tslint-rules
  • ngrx-immer is a library that provides Immer wrappers around NgRx methods createReducer, on, and ComponentStore. This utility will help to develop safe immutable store for your Angular applications. ngrx-immer
  • ngrx-correlation-id is a library that helps tracking an asynchronous activity such as a http request, an ngrx effect or anything else that is asynchronous. ngrx-correlation-id
  • ngrx-child-selectors is a NgRx plugin aimed to reduce the boilerplate for creating selectors, indeed it provides a createChildSelectors function that is used to create memoized and strongly typed child selectors based on the parent selector. This repository is now archived. ngrx-child-selectors
  • ngrx-rtk-query is a plugin to make RTK Query with auto-generated hooks work in Angular applications with NgRx. You can now mix the power of RTK Query + NgRx + RxJS to achieve the same functionality as in the RTK Query library. ngrx-rtk-query
  • ngrx-slice is a plugin that intends to provide the same functionalities that Redux Toolkit createSlice provides but directly integrated into the NgRx. A slice represents a piece of the global state. The benefit of this approach is less boilerplate since actions are automatically generated based on the reducer and selectors are generated using the initialState. This repository is now archived. ngrx-slice
  • ngrx-action-bundles is a utility library that promises to generate NgRx actions and easily connect the dispatchers and listeners to your Angular codebase. ngrx-action-bundles
  • rx-mind/ngrx-plugins is a set of community-driven NgRx plugins, at the moment there are two plugins available called entity-component-store and data-component-store and those plugins will help you to work with the NgRx ComponentStore in a more efficient way. This repository is now archived. rx-mind/ngrx-plugins
  • trellisorg/platform is a set of tools made open-source by the company called Trellis. You will find inside the repository three libraries aimed to help working with NgRx: ngrx-data-websocket, ngrx-universal-rehydrate and angularfire-ngrx. trellisorg/platform
  • ngrx-router-component-store is a plugin that connects the Angular router to NgRx component stores. ngworker/router-component-store
  • ngrx-toolkit is a set of extensions for the NgRx SignalStore created by Angular Architects, such as the Redux DevTools integration, undo/redo, storage synchronization or a Redux-style API. ngrx-toolkit

Up next

Learn more about Angular