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.

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, RootState  } from './store/counter-slice'

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