actions.md

Actions

Action reducers

Provide the ActionReducerMap<T> with your reducer map for added type checking.

import { ActionReducerMap } from '@ngrx/store';
import * as fromAuth from './auth.actions';

export interface State {
  auth: fromAuth.State;
}

export const reducers: ActionReducerMap<State> = {
  auth: fromAuth.reducer,
};

Typed Actions

Use strongly typed actions to take advantage of TypeScript's compile-time checking.

// counter.actions.ts
import { Action } from '@ngrx/store';

export enum CounterActionTypes {
  INCREMENT = '[Counter] Increment',
  DECREMENT = '[Counter] Decrement',
  RESET = '[Counter] Reset',
}

export class Increment implements Action {
  readonly type = CounterActionTypes.INCREMENT;
}

export class Decrement implements Action {
  readonly type = CounterActionTypes.DECREMENT;
}

export class Reset implements Action {
  readonly type = CounterActionTypes.RESET;

  constructor(public payload: number) {}
}

export type CounterActionsUnion = Increment | Decrement | Reset;

This provides typed actions for your reducer functions.

// counter.reducer.ts
import { CounterActionTypes, CounterActionsUnion } from './counter.actions';

export function reducer(state: number = 0, action: CounterActionsUnion): State {
  switch (action.type) {
    case CounterActionTypes.INCREMENT: {
      return state + 1;
    }

    case CounterActionTypes.DECREMENT: {
      return state - 1;
    }

    case CounterActionTypes.RESET: {
      return action.payload; // typed to number
    }

    default: {
      return state;
    }
  }
}

Instantiate actions and use store.dispatch() to dispatch them:

import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';
import * as CounterActions from './counter.actions';

interface AppState {
  counter: number;
}

@Component({
  selector: 'my-app',
  template: `
    <button (click)="increment()">Increment</button>
    <button (click)="decrement()">Decrement</button>
    <button (click)="reset()">Reset Counter</button>

    <div>Current Count: {{ counter | async }}</div>
  `,
})
export class MyAppComponent {
  counter: Observable<number>;

  constructor(private store: Store<AppState>) {
    this.counter = store.pipe(select('counter'));
  }

  increment() {
    this.store.dispatch(new CounterActions.Increment());
  }

  decrement() {
    this.store.dispatch(new CounterActions.Decrement());
  }

  reset() {
    this.store.dispatch(new CounterActions.Reset(3));
  }
}