rewrote window resize event using redux

src/app/app.actions.ts

@@ -1,5 +0,0 @@
-import { HeaderActions } from "./header/header.actions";
-
-export default [
-  HeaderActions
-];

src/app/app.component.ts

@@ -3,10 +3,13 @@ import {
   ChangeDetectionStrategy,
   ViewEncapsulation,
   OnDestroy,
-  OnInit
+  OnInit, HostListener
 } from "@angular/core";
 import { Router } from "@angular/router";
 import { TranslateService } from "ng2-translate";
+import { HostWindowState } from "./shared/host-window.reducer";
+import { Store } from "@ngrx/store";
+import { HostWindowActions } from "./shared/host-window.actions";
 
 @Component({
   changeDetection: ChangeDetectionStrategy.Default,
@@ -27,7 +30,8 @@ export class AppComponent implements OnDestroy, OnInit {
 
   constructor(
     private translate: TranslateService,
-    private router: Router
+    private router: Router,
+    private store: Store<HostWindowState>
   ) {
     // this language will be used as a fallback when a translation isn't found in the current language
     translate.setDefaultLang('en');
@@ -47,4 +51,11 @@ export class AppComponent implements OnDestroy, OnInit {
     }
   }
 
+  @HostListener('window:resize', ['$event'])
+  private onResize(event): void {
+    this.store.dispatch(
+      HostWindowActions.resize(event.target.innerWidth, event.target.innerHeight)
+    );
+  }
+
 }

src/app/app.effects.ts

@@ -0,0 +1,6 @@
+import { EffectsModule } from "@ngrx/effects";
+import { HeaderEffects } from "./header/header.effects";
+
+export default [
+  EffectsModule.run(HeaderEffects)
+];

src/app/app.module.ts

@@ -10,9 +10,8 @@ import { HeaderComponent } from './header/header.component';
 import { StoreModule } from "@ngrx/store";
 import { StoreDevtoolsModule } from "@ngrx/store-devtools";
 
-import reducers from './app.reducers'
-import actions from './app.actions'
-
+import reducers from './app.reducers';
+import effects from './app.effects';
 
 @NgModule({
   declarations: [
@@ -31,6 +30,7 @@ import actions from './app.actions'
      * based application.
      */
     StoreModule.provideStore(reducers),
+
     /**
      * Store devtools instrument the store retaining past versions of state
      * and recalculating new states. This enables powerful time-travel
@@ -42,9 +42,10 @@ import actions from './app.actions'
      * See: https://github.com/zalmoxisus/redux-devtools-extension
      */
     StoreDevtoolsModule.instrumentOnlyWithExtension(),
+
+    effects
   ],
   providers: [
-    actions
   ]
 })
 export class AppModule {

src/app/app.reducers.ts

@@ -1,5 +1,7 @@
 import { headerReducer } from './header/header.reducer';
+import { hostWindowReducer } from "./shared/host-window.reducer";
 
 export default {
-  headerReducer
+  headerReducer,
+  hostWindowReducer
 }

src/app/header/header.actions.ts

@@ -1,24 +1,22 @@
-import { Injectable } from "@angular/core";
 import { Action } from "@ngrx/store";
 
-@Injectable()
 export class HeaderActions {
   static COLLAPSE = 'dspace/header/COLLAPSE';
-  collapse(): Action {
+  static collapse(): Action {
     return {
       type: HeaderActions.COLLAPSE
     }
   }
 
   static EXPAND = 'dspace/header/EXPAND';
-  expand(): Action {
+  static expand(): Action {
     return {
       type: HeaderActions.EXPAND
     }
   }
 
   static TOGGLE = 'dspace/header/TOGGLE';
-  toggle(): Action {
+  static toggle(): Action {
     return {
       type: HeaderActions.TOGGLE
     }

src/app/header/header.component.ts

@@ -16,7 +16,6 @@ export class HeaderComponent implements OnDestroy, OnInit {
 
   constructor(
     private router: Router,
-    private actions: HeaderActions,
     private store: Store<HeaderState>
   ) {
   }
@@ -37,21 +36,16 @@ export class HeaderComponent implements OnDestroy, OnInit {
     }
   }
 
-  @HostListener('window:resize', ['$event'])
-  private onResize(event): void {
-    this.collapse();
-  }
-
   private collapse(): void {
-    this.store.dispatch(this.actions.collapse());
+    this.store.dispatch(HeaderActions.collapse());
   }
 
   private expand(): void {
-    this.store.dispatch(this.actions.expand());
+    this.store.dispatch(HeaderActions.expand());
   }
 
   public toggle(): void {
-    this.store.dispatch(this.actions.toggle());
+    this.store.dispatch(HeaderActions.toggle());
   }
 
 }

src/app/header/header.effects.ts

@@ -0,0 +1,16 @@
+import { Injectable } from "@angular/core";
+import { Effect, Actions } from '@ngrx/effects'
+import { HeaderActions } from "./header.actions";
+import { HostWindowActions } from "../shared/host-window.actions";
+
+@Injectable()
+export class HeaderEffects {
+
+  constructor(
+    private actions$: Actions
+  ) { }
+
+  @Effect() resize$ = this.actions$
+    .ofType(HostWindowActions.RESIZE)
+    .map(() => HeaderActions.collapse());
+}

src/app/shared/host-window.actions.ts

@@ -0,0 +1,14 @@
+import { Action } from "@ngrx/store";
+
+export class HostWindowActions {
+  static RESIZE = 'dspace/host-window/RESIZE';
+  static resize(newWidth: number, newHeight: number): Action {
+    return {
+      type: HostWindowActions.RESIZE,
+      payload: {
+        width: newWidth,
+        height: newHeight
+      }
+    }
+  }
+}

src/app/shared/host-window.reducer.ts

@@ -0,0 +1,25 @@
+import { Action } from "@ngrx/store";
+import { HostWindowActions } from "./host-window.actions";
+
+export interface HostWindowState {
+  width: number;
+  height: number;
+}
+
+const initialState: HostWindowState = {
+  width: null,
+  height: null
+};
+
+export const hostWindowReducer = (state = initialState, action: Action): HostWindowState => {
+  switch (action.type) {
+
+    case HostWindowActions.RESIZE: {
+      return Object.assign({}, state, action.payload);
+    }
+
+    default: {
+      return state;
+    }
+  }
+};