feat(actions): less boilerplate!

CHANGELOG.md

@@ -1,3 +1,8 @@
+# 2.4.0 - 2/13/18
+- Feature: Make less boilerplate required
+- Refactor: Get rid of `SelectMap` and consolidate to `Select`
+- Perf: Improve `Select` perf by caching GET
+
 # 2.3.0 - 2/11/18
 - Feature: `SelectMap` decorator
 

README.md

@@ -7,7 +7,6 @@ Actions/reducer utility for NGRX. It provides a handful of functions to make NGR
 - `ofAction(MyActionClass)`: Lettable operator for NGRX Effects
 - `createReducer(MyStoreClass)`: Reducer bootstrap function
 - `@Select('my.prop')`: Select decorator
-- `@SelectMap(state => 'foo')`: Select map decorator
 
 Inspired by [redux-act](https://github.com/pauldijou/redux-act) and [redux-actions](https://github.com/reduxactions/redux-actions) for Redux.
 
@@ -34,9 +33,11 @@ npm i ngrx-actions --S
 Next, create an action just like you do with NGRX today:
 
 ```javascript
-export class MyAction implements Action {
-   readonly type = 'My Action';
-   constructor(public payload: MyObj) {}
+export class MyAction {
+  // Type is optional. If not provided it will use the class name.
+  readonly type = 'My Action';
+
+  constructor(public payload: MyObj) {}
 }
 ```
 
@@ -161,7 +162,7 @@ export class MyComponent {
     @Select() color: Observable<string>;
 
     // Remap the slice to a new object
-    @SelectMap(state => state.map(f => 'blue')) color$: Observable<string>;
+    @Select(state => state.map(f => 'blue')) color$: Observable<string>;
 }
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngrx-actions",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Actions and Reducer Utility Library for NGRX",
   "main": "dist/index.js",
   "scripts": {

src/action.ts

@@ -7,17 +7,18 @@ export function Action(...actionsKlasses: ActionType[]) {
 
     for (const klass of actionsKlasses) {
       const inst = new klass();
-      if (meta.actions[inst.type]) {
+      const type = inst.type || klass.name;
+
+      if (meta.actions[type]) {
         throw new Error(
-          `@Action for '${inst.type}' is defined multiple times in functions '${
-            meta.actions[inst.type].fn
-          }' and '${name}'`
+          `@Action for '${type}' is defined multiple times in functions '${meta.actions[type].fn}' and '${name}'`
         );
       }
-      meta.actions[inst.type] = {
+
+      meta.actions[type] = {
         action: klass,
         fn: name,
-        type: inst.type
+        type
       };
     }
   };

src/factory.ts

@@ -3,7 +3,7 @@ import { NGRX_ACTIONS_META, StoreMetadata } from './internals';
 
 export function createReducer<TState = any>(store: {
   new (...args: any[]): any;
-}): (state: TState, action: Action) => TState {
+}): (state: TState, action: Action | any) => TState {
   if (!store.hasOwnProperty(NGRX_ACTIONS_META)) {
     throw new Error('A reducer can be created from a @Store decorated class only.');
   }
@@ -12,7 +12,7 @@ export function createReducer<TState = any>(store: {
   const instance = new store();
 
   return function(state: any = initialState, action: Action) {
-    const meta = actions[action.type];
+    const meta = actions[action.type || action.constructor.name];
     if (meta) {
       const result = instance[meta.fn](state, action);
       if (result === undefined) {

src/of-action.ts

@@ -7,7 +7,7 @@ export function ofAction<T extends Action>(allowedType: ActionType<T>): Operator
 export function ofAction<T extends Action>(...allowedTypes: ActionType[]): OperatorFunction<Action, T>;
 export function ofAction(...allowedTypes: ActionType[]): OperatorFunction<Action, Action> {
   const allowedMap = {};
-  allowedTypes.forEach(klass => (allowedMap[new klass().type] = true));
+  allowedTypes.forEach(klass => (allowedMap[new klass().type || klass.name] = true));
   return filter((action: Action) => {
     return allowedMap[action.type];
   });

src/public_api.ts

@@ -2,5 +2,5 @@ export { NgrxActionsModule } from './module';
 export { Action } from './action';
 export { ofAction } from './of-action';
 export { Store } from './store';
-export { Select, NgrxSelect, SelectMap } from './select';
+export { Select, NgrxSelect } from './select';
 export { createReducer } from './factory';

src/select.ts

@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core';
 import { Store, Selector } from '@ngrx/store';
-import { map } from 'rxjs/operators/map';
 
 @Injectable()
 export class NgrxSelect {
@@ -39,16 +38,24 @@ export function Select<TState = any, TValue = any>(
     } else {
       fn = selectorOrFeature;
     }
+
+    const createSelect = () => {
+      const store = NgrxSelect.store;
+      if (!store) {
+        throw new Error('NgrxSelect not connected to store!');
+      }
+      return store.select(fn);
+    };
+
     // Redefine property
+    let select;
     if (delete target[name]) {
       Object.defineProperty(target, name, {
-        get: () => {
-          // get connected store
-          const store = NgrxSelect.store;
-          if (!store) {
-            throw new Error('NgrxSelect not connected to store!');
+        get: function() {
+          if (!select) {
+            select = createSelect();
           }
-          return store.select(fn);
+          return select;
         },
         enumerable: true,
         configurable: true
@@ -57,26 +64,6 @@ export function Select<TState = any, TValue = any>(
   };
 }
 
-/**
- * Slice a state portion of the state and then map it to a new object.
- */
-export function SelectMap<TState = any, TValue = any>(fn: Selector<TState, TValue>) {
-  return function(target: any, name: string) {
-    const store = NgrxSelect.store;
-    if (!store) {
-      throw new Error('NgrxSelect not connected to store!');
-    }
-    const select = store.select(state => state).pipe(map(fn));
-    if (delete target[name]) {
-      Object.defineProperty(target, name, {
-        get: () => select,
-        enumerable: true,
-        configurable: true
-      });
-    }
-  };
-}
-
 /**
  * The generated function is faster than:
  * - pluck (Observable operator)

src/spec/index.spec.ts

@@ -69,6 +69,8 @@ describe('actions', () => {
       readonly type = 'myaction2';
     }
 
+    class MyAction3 {}
+
     @Store({ foo: true })
     class Bar {
       @Action(MyAction2)
@@ -80,11 +82,19 @@ describe('actions', () => {
       foo(state) {
         state.foo = false;
       }
+
+      @Action(MyAction3)
+      foo2(state) {
+        state.foo = true;
+      }
     }
 
     const reducer = createReducer(Bar);
     const res = reducer(undefined, new MyAction());
     expect(res.foo).toBe(false);
+
+    const res2 = reducer(undefined, new MyAction3());
+    expect(res2.foo).toBe(true);
   });
 
   it('supports multiple actions', () => {
@@ -165,9 +175,9 @@ describe('actions', () => {
       constructor(public foo: any, public bar: any) {}
     }
 
-    const action = new MyAction('foo'),
-      action2 = new MyAction2(),
-      action3 = new MyAction3('a', 0);
+    const action = new MyAction('foo');
+    const action2 = new MyAction2();
+    const action3 = new MyAction3('a', 0);
     const actions = of<NgRxAction>(action, action2, action3);
     const tappedActions: NgRxAction[] = [];
     actions.pipe(ofAction<MyAction | MyAction2>(MyAction, MyAction2)).subscribe(a => {
@@ -204,6 +214,8 @@ describe('actions', () => {
       @Select('myFeature.bar.a.b.c.d') hello$: Observable<string>; // deeply nested props
       @Select() myFeature: Observable<FooState>; // implied by name
       @Select(msBar) bar$: Observable<any>; // using MemoizedSelector
+      @Select(state => [])
+      bar2$: Observable<any[]>; // Remapping to different obj
     }
 
     const store = new NgRxStore(of(globalState), undefined, undefined);
@@ -221,6 +233,10 @@ describe('actions', () => {
         expect(n).toBe(globalState.myFeature);
       });
 
+      mss.bar2$.subscribe(n => {
+        expect(n.length).toBe(0);
+      });
+
       mss.bar$.subscribe(n => {
         expect(n).toBe(globalState.myFeature.bar);
       });

src/symbols.ts

@@ -1,3 +1,3 @@
 import { Action } from '@ngrx/store';
 
-export type ActionType<T extends Action = Action> = { new (...args: any[]): T };
+export type ActionType<T extends Action = Action | any> = { new (...args: any[]): T };