Merge pull request angular-redux#130 from danielfigueiredo/feat-comparer

Adding comparer to select decorator.

Author: Evan Schultz

packages/store/examples/counter/actions/counter-actions.ts

@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core';
 import { NgRedux } from 'ng2-redux';
-import * as Redux from 'redux';
 import { RootState } from '../store';
 import { RandomNumberService } from '../services/random-number';
 

packages/store/src/___tests___/decorators/select.spec.ts

@@ -1,6 +1,5 @@
 import 'reflect-metadata';
 import { expect, use } from 'chai';
-import { createStore } from 'redux';
 import { NgRedux } from '../../components/ng-redux';
 import { select } from '../../decorators/select';
 import * as sinon from 'sinon';
@@ -117,4 +116,64 @@ describe('@select', () => {
       expect(value).to.equal(expectedValue);
     });
   });
+
+  describe('when passed a comparer', () => {
+
+    function comparer(x: any, y: any): boolean {
+      return y === 1;
+    }
+
+    it('should not trigger next when comparer returns true', () => {
+
+      class MockClass {
+        @select(state => state.baz, comparer) asdf: any;
+      }
+
+      const mockInstance = new MockClass();
+
+      mockInstance.asdf.subscribe(val => {
+        expect(val).to.not.equal(1);
+      });
+      ngRedux.dispatch({type: 'nvm', payload: 1});
+    });
+
+    it('should trigger next when comparer returns false', () => {
+
+      class MockClass {
+        @select(state => state.baz, comparer) asdf: any;
+      }
+
+      const mockInstance = new MockClass();
+      let value;
+
+      mockInstance.asdf.subscribe(val => {
+        value = val;
+      });
+      ngRedux.dispatch({type: 'nvm', payload: 2});
+      expect(value).to.equal(2);
+    });
+
+    it('should receive previous and next value for comparison', () => {
+
+      const spy = sinon.spy();
+      
+      class MockClass {
+        @select(state => state.baz, spy) asdf: any;
+      }
+
+      const mockInstance = new MockClass();
+      mockInstance.asdf.subscribe(val => null);
+
+      ngRedux.dispatch({type: 'nvm', payload: 1});
+      ngRedux.dispatch({type: 'nvm', payload: 2});
+
+      expect(spy.getCall(0).args[0]).to.equal(undefined);
+      expect(spy.getCall(0).args[1]).to.equal(1);
+
+      expect(spy.getCall(1).args[0]).to.equal(1);
+      expect(spy.getCall(1).args[1]).to.equal(2);
+    });
+
+  });
+
 });

packages/store/src/components/ng-redux.ts

@@ -3,7 +3,6 @@ import * as Redux from 'redux';
 import {
     Store,
     Action,
-    ActionCreator,
     Reducer,
     createStore,
     applyMiddleware,

packages/store/src/decorators/select.ts

@@ -4,11 +4,15 @@ import { NgRedux } from '../components/ng-redux';
  * Selects an observable from the store, and attaches it to the decorated 
  * property.
  *
- * @param {string | function} stateKeyOrFunc 
+ * @param {string | function} stateKeyOrFunc
+ * @param {function} comparer function for this selector
  * An Rxjs selector function or a string indicating the name of the store
  * property to be selected.
  * */
-export const select = <T>(stateKeyOrFunc?) => (target, key) => {
+export const select = <T>(
+    stateKeyOrFunc?,
+    comparer?: (x: any, y: any) => boolean) => (target, key) => {
+
     let bindingKey = (key.lastIndexOf('$') === key.length - 1) ?
         key.substring(0, key.length - 1) : key;
 
@@ -17,9 +21,9 @@ export const select = <T>(stateKeyOrFunc?) => (target, key) => {
     }
 
     function getter() {
+      const isFunction = typeof stateKeyOrFunc === 'function';
         return NgRedux.instance
-            .select(typeof stateKeyOrFunc === 'function' ?
-                    stateKeyOrFunc : bindingKey);
+            .select(isFunction ? stateKeyOrFunc : bindingKey, comparer);
     }
 
     // Delete property.