action.ts

import { Action } from '@ngrx/store';
export const INCREMENT =  '[Counter] Increment';
export const DECREMENT =  '[Counter] Decrement';

export class CounterActions {
  static readonly INCREMENT = INCREMENT;
  static readonly DECREMENT = DECREMENT;

  increment(): Action {
    return {
      type: CounterActions.INCREMENT,
      payload: 1
    }
  }

  decrement(): Action {
    return {
      type: CounterActions.DECREMENT,
      payload: 1
    }
  }
}

component.ts

import { Component } from '@angular/core';

import { Store } from '@ngrx/store';
import {Observable} from "rxjs/Observable";

interface AppState {
  counter: number;
}

import {CounterActions} from '../../actions/counter';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage 
{
  counter: Observable<number>;

  constructor(private store: Store<AppState>, public counterActions: CounterActions){
    this.counter = store.select('counter');
  }

  increment(){
    this.store.dispatch(this.counterActions.increment());
  }

  decrement(){
    this.store.dispatch(this.counterActions.decrement());
  }
}

reducer.ts

import { INCREMENT, DECREMENT } from '../actions/counter';

const INITIAL_STATE: number = 0;

export function counterReducer(state: number = INITIAL_STATE, action: any)
{
  console.log(action);
  switch(action.type)
  {
    case INCREMENT:
      return state + action.payload;
    case DECREMENT:
      return state - action.payload;
    default:
      return state;
  }
}