update to official package versions

README.md

@@ -1,11 +1,12 @@
-# Simple Ng2-Redux with SystemJS Config
+# Simple @angular-redux/store example with SystemJS config
 
 This repo was cloned from the Angular2 quickstart example:
 https://angular.io/docs/ts/latest/guide/setup.html
 
 It's a trivial counter built with
-[Ng2-Redux](https://npmjs.org/packages/ng2-redux); it's main purpose is to show
-how to set up Ng2-Redux in a SystemJS/TypeScript/LiveServer environment.
+[@angular-redux/store](https://npmjs.org/packages/@angular-redux/store); it's
+main purpose is to show how to set up @angular-redux/store in a
+SystemJS/TypeScript/LiveServer environment.
 
 # How to Run It
 

app/actions.ts

@@ -1,11 +1,11 @@
 import { Injectable } from '@angular/core';
-import { NgRedux } from 'ng2-redux';
+import { NgRedux } from '@angular-redux/store';
 import { AppState } from './store';
 
 @Injectable()
 export class CounterActions {
-  static INCREMENT = "INCREMENT";
-  static DECREMENT = "DECREMENT";
+  static INCREMENT = 'INCREMENT';
+  static DECREMENT = 'DECREMENT';
 
   constructor(private ngRedux: NgRedux<AppState>) {}
 

app/app.component.spec.ts

@@ -1,21 +1,26 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By }           from '@angular/platform-browser';
+import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
-import { Observable }   from 'rxjs/Observable';
+import { NgRedux, DevToolsExtension } from '@angular-redux/store';
+import { StoreCreator } from 'redux';
+import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/observable/of';
-import { NgRedux }      from 'ng2-redux';
 
 import { AppComponent } from './app.component';
 import { CounterActions } from './actions';
 
-// I follow a 'mock all dependencies' strategy when unit testing.
 const mockNgRedux = {
   configureStore: () => {},
   dispatch: () => {},
   select: () => Observable.of(null),
 };
 NgRedux.instance = mockNgRedux;
 
+const mockDevToolsExtension = {
+  isEnabled: () => false,
+  enhancer: (): StoreCreator => null,
+};
+
 const mockCounterActions = {
   increment: () => {},
   decrement: () => {},
@@ -31,6 +36,7 @@ describe('AppComponent', function () {
       declarations: [ AppComponent ],
       providers: [
         { provide: NgRedux, useValue: mockNgRedux },
+        { provide: DevToolsExtension, useValue: mockDevToolsExtension },
         { provide: CounterActions, useValue: mockCounterActions },
       ],
     })
@@ -48,7 +54,7 @@ describe('AppComponent', function () {
   it('should have expected <h1> text', () => {
     fixture.detectChanges();
     const h1 = de.nativeElement;
-    expect(h1.innerText).toMatch(/NG2-Redux/i,
+    expect(h1.innerText).toMatch(/@angular-redux\/store/i,
       '<h1> should say something about "Redux"');
   });
 });

app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NgRedux, select } from 'ng2-redux';
+import { NgRedux, select, DevToolsExtension } from '@angular-redux/store';
 import { Observable } from 'rxjs/Observable';
 
 import { CounterActions } from './actions';
@@ -8,7 +8,7 @@ import { AppState, INITIAL_STATE, rootReducer } from './store';
 @Component({
   selector: 'my-app',
   template: `
-    <h1>Hello NG2-Redux!</h1>
+    <h1>Hello @angular-redux/store!</h1>
     <p>The counter value is {{ counter$ | async }}</p>
     <p>
       <button (click)="actions.increment()">+</button>
@@ -17,11 +17,16 @@ import { AppState, INITIAL_STATE, rootReducer } from './store';
   `
 })
 export class AppComponent {
-  @select() counter$: Observable<number>;
+  @select() readonly counter$: Observable<number>;
 
   constructor(
-    private ngRedux: NgRedux<any>,
+    ngRedux: NgRedux<AppState>,
+    devTools: DevToolsExtension,
     private actions: CounterActions) {
-      ngRedux.configureStore(rootReducer, INITIAL_STATE);
+      ngRedux.configureStore(
+        rootReducer,
+        INITIAL_STATE,
+        null,
+        devTools.isEnabled() ? [ devTools.enhancer() ] : []);
     }
 }

app/app.module.ts

@@ -1,6 +1,6 @@
 import { NgModule }       from '@angular/core';
 import { BrowserModule }  from '@angular/platform-browser';
-import { NgReduxModule }  from 'ng2-redux';
+import { NgReduxModule }  from '@angular-redux/store';
 
 import { AppComponent }   from './app.component';
 import { CounterActions } from './actions';

app/store.ts

@@ -6,11 +6,11 @@ export interface AppState {
 }
 
 export const INITIAL_STATE: AppState = {
-  counter: 0
-}
+  counter: 0,
+};
 
 export function rootReducer(state: AppState, action: Action): AppState {
-  switch(action.type) {
+  switch (action.type) {
     case CounterActions.INCREMENT: return { counter: state.counter + 1 };
     case CounterActions.DECREMENT: return { counter: state.counter - 1 };
     default: return state;

e2e/app.e2e-spec.ts

@@ -2,7 +2,7 @@ import { browser, element, by } from 'protractor';
 
 describe('QuickStart E2E Tests', function () {
 
-  let expectedMsg = 'Hello NG2-Redux!';
+  let expectedMsg = 'Hello @angular-redux/store!';
 
   beforeEach(function () {
     browser.get('');

karma.conf.js

@@ -54,8 +54,8 @@ module.exports = function(config) {
       { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
 
       // Redux
-      { pattern: 'node_modules/ng2-redux/**/*.js', included: false, watched: false },
-      { pattern: 'node_modules/ng2-redux/**/*.js.map', included: false, watched: false },
+      { pattern: 'node_modules/@angular-redux/store/**/*.js', included: false, watched: false },
+      { pattern: 'node_modules/@angular-redux/store/**/*.js.map', included: false, watched: false },
       { pattern: 'node_modules/redux/**/*.js', included: false, watched: false },
       { pattern: 'node_modules/redux/**/*.js.map', included: false, watched: false },
 

package.json

@@ -17,6 +17,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "@angular-redux/store": "^6.0.0",
     "@angular/common": "~2.4.0",
     "@angular/compiler": "~2.4.0",
     "@angular/core": "~2.4.0",
@@ -27,31 +28,30 @@
     "@angular/router": "~3.4.0",
     "angular-in-memory-web-api": "~0.2.2",
     "core-js": "^2.4.1",
-    "ng2-redux": "^5.1.0",
     "redux": "^3.6.0",
     "reflect-metadata": "^0.1.8",
     "rxjs": "5.0.1",
     "systemjs": "0.19.40",
     "zone.js": "^0.7.4"
   },
   "devDependencies": {
-    "concurrently": "^3.1.0",
-    "lite-server": "^2.2.2",
-    "typescript": "~2.0.10",
+    "@types/jasmine": "^2.5.36",
+    "@types/node": "^6.0.46",
     "canonical-path": "0.0.2",
+    "concurrently": "^3.1.0",
     "http-server": "^0.9.0",
-    "tslint": "^3.15.1",
-    "lodash": "^4.16.4",
     "jasmine-core": "~2.4.1",
     "karma": "^1.3.0",
     "karma-chrome-launcher": "^2.0.0",
     "karma-cli": "^1.0.1",
     "karma-jasmine": "^1.0.2",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "lite-server": "^2.2.2",
+    "lodash": "^4.16.4",
     "protractor": "~4.0.14",
     "rimraf": "^2.5.4",
-    "@types/node": "^6.0.46",
-    "@types/jasmine": "^2.5.36"
+    "tslint": "^3.15.1",
+    "typescript": "~2.0.10"
   },
   "repository": {}
 }

systemjs.config.js

@@ -26,7 +26,7 @@
       // other libraries
       'rxjs':                      'npm:rxjs',
       'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
-      'ng2-redux':                 'npm:ng2-redux',
+      '@angular-redux/store':      'npm:@angular-redux/store',
       'redux':                     'npm:redux',
     },
     // packages tells the System loader how to load when no filename and/or no extension
@@ -38,7 +38,7 @@
       rxjs: {
         defaultExtension: 'js'
       },
-      'ng2-redux': { main: 'lib/index.js', defaultExtension: 'js' },
+      '@angular-redux/store': { main: 'lib/index.js', defaultExtension: 'js' },
       redux: { main: 'dist/redux.min.js', defaultExtension: 'js' },
     }
   });