@reduxjs/angular-redux

Angular Redux

Official Angular bindings for Redux. Performant and flexible.

[!WARNING]
This package is in alpha and is rapidly developing.

Installation

Angular Redux requires Angular 17.3 or later.

Installing with ng add

You can install the Store to your project with the following ng add command (details here):

ng add @reduxjs/angular-redux@latest

Optional ng add flags

flag	description	value type	default value
--path	Path to the module that you wish to add the import for the StoreModule to.	string
--project	Name of the project defined in your angular.json to help locating the module to add the provideRedux to.	string
--module	Name of file containing the module that you wish to add the import for the provideRedux to. Can also include the relative path to the file. For example, src/app/app.module.ts.	string	app
--storePath	The file path to create the state in.	string	store

This command will automate the following steps:

1. Update package.json > dependencies with Redux, Redux Toolkit, and Angular Redux
2. Run npm install to install those dependencies.
3. Update your src/app/app.module.ts > imports array with provideRedux({store})
4. If the project is using a standalone bootstrap, it adds provideRedux({store}) into the application config.

Installing with npm or yarn

To use React Redux with your Angular app, install it as a dependency:

# If you use npm:
npm install @reduxjs/angular-redux

# Or if you use Yarn:
yarn add @reduxjs/angular-redux

You'll also need to install Redux and set up a Redux store in your app.

This assumes that you’re using npm package manager with a module bundler like Webpack or Browserify to consume CommonJS modules.

Usage

The following Angular component works as-expected:

import { Component } from '@angular/core'
import { injectSelector, injectDispatch } from "@reduxjs/angular-redux";
import { decrement, increment } from './store/counter-slice'
import { RootState } from './store'

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
      <button (click)="dispatch(increment())">
        Increment
      </button>
      <span>{{ count() }}</span>
      <button (click)="dispatch(decrement())">
        Decrement
      </button>
  `
})
export class AppComponent {
  count = injectSelector((state: RootState) => state.counter.value)
  dispatch = injectDispatch()
  increment = increment
  decrement = decrement
}