feat(Store): createSelector allow props in selector

Author: timdeschryver

modules/store/spec/integration.spec.ts

@@ -5,6 +5,8 @@ import {
   select,
   Store,
   StoreModule,
+  createFeatureSelector,
+  createSelector,
 } from '@ngrx/store';
 import { combineLatest } from 'rxjs';
 import { first } from 'rxjs/operators';
@@ -173,6 +175,42 @@ describe('ngRx Integration spec', () => {
 
       expect(currentlyVisibleTodos.length).toBe(0);
     });
+
+    it('should use props to get a todo', () => {
+      const getTodosState = createFeatureSelector<TodoAppSchema, Todo[]>(
+        'todos'
+      );
+      const getTodos = createSelector(getTodosState, todos => todos);
+      const getTodosById = createSelector(
+        getTodos,
+        (state: TodoAppSchema, id: number) => id,
+        (todos, id) => todos.find(todo => todo.id === id)
+      );
+
+      let testCase = 1;
+      const todo$ = store.pipe(select(getTodosById, 2));
+      todo$.subscribe(todo => {
+        if (testCase === 1) {
+          expect(todo).toEqual(undefined);
+        } else if (testCase === 2) {
+          expect(todo).toEqual({
+            id: 2,
+            text: 'second todo',
+            completed: false,
+          });
+        } else if (testCase === 3) {
+          expect(todo).toEqual({ id: 2, text: 'second todo', completed: true });
+        }
+        testCase++;
+      });
+
+      store.dispatch({ type: ADD_TODO, payload: { text: 'first todo' } });
+      store.dispatch({ type: ADD_TODO, payload: { text: 'second todo' } });
+      store.dispatch({
+        type: COMPLETE_TODO,
+        payload: { id: 2 },
+      });
+    });
   });
 
   describe('feature state', () => {

modules/store/spec/selector.spec.ts

@@ -125,6 +125,105 @@ describe('Selectors', () => {
     });
   });
 
+  describe('createSelector with props', () => {
+    it('should deliver the value of selectors to the projection function', () => {
+      const projectFn = jasmine.createSpy('projectionFn');
+
+      const selector = createSelector(
+        incrementOne,
+        incrementTwo,
+        (state: any, props: any) => props.value,
+        projectFn
+      );
+
+      selector({}, { value: 47 });
+      expect(projectFn).toHaveBeenCalledWith(countOne, countTwo, 47);
+    });
+
+    it('should be possible to test a projector fn independent from the selectors it is composed of', () => {
+      const projectFn = jasmine.createSpy('projectionFn');
+      const selector = createSelector(
+        incrementOne,
+        incrementTwo,
+        (state: any, props: any) => {
+          fail(`Shouldn't be called`);
+          return props.value;
+        },
+        projectFn
+      );
+      selector.projector('', '', 47);
+
+      expect(incrementOne).not.toHaveBeenCalled();
+      expect(incrementTwo).not.toHaveBeenCalled();
+      expect(projectFn).toHaveBeenCalledWith('', '', 47);
+    });
+
+    it('should call the projector function when the state changes', () => {
+      const projectFn = jasmine.createSpy('projectionFn');
+      const selector = createSelector(
+        incrementOne,
+        (state: any, props: any) => props.value,
+        projectFn
+      );
+
+      const firstSate = { first: 'state' };
+      const props = { foo: 'props' };
+      selector(firstSate, props);
+      selector(firstSate, props);
+      expect(projectFn).toHaveBeenCalledTimes(1);
+
+      const secondState = { second: 'state' };
+      selector(secondState, props);
+      expect(projectFn).toHaveBeenCalledTimes(2);
+    });
+
+    it('should memoize the function', () => {
+      let counter = 0;
+
+      const firstState = { first: 'state' };
+      const secondState = { second: 'state' };
+      const props = { foo: 'props' };
+
+      const projectFn = jasmine.createSpy('projectionFn');
+      const selector = createSelector(
+        incrementOne,
+        incrementTwo,
+        (state: any, props: any) => {
+          counter++;
+          return props;
+        },
+        projectFn
+      );
+
+      selector(firstState, props);
+      selector(firstState, props);
+      selector(firstState, props);
+      selector(secondState, props);
+
+      expect(counter).toBe(2);
+      expect(projectFn).toHaveBeenCalledTimes(2);
+    });
+
+    it('should allow you to release memoized arguments', () => {
+      const state = { first: 'state' };
+      const props = { foo: 'props' };
+      const projectFn = jasmine.createSpy('projectionFn');
+      const selector = createSelector(
+        incrementOne,
+        (state: any, props: any) => props,
+        projectFn
+      );
+
+      selector(state, props);
+      selector(state, props);
+      selector.release();
+      selector(state, props);
+      selector(state, props);
+
+      expect(projectFn).toHaveBeenCalledTimes(2);
+    });
+  });
+
   describe('createSelector with arrays', () => {
     it('should deliver the value of selectors to the projection function', () => {
       const projectFn = jasmine.createSpy('projectionFn');
@@ -211,6 +310,104 @@ describe('Selectors', () => {
     });
   });
 
+  describe('createSelector with arrays and props', () => {
+    it('should deliver the value of selectors to the projection function', () => {
+      const projectFn = jasmine.createSpy('projectionFn');
+      const selector = createSelector(
+        [incrementOne, incrementTwo, (state: any, props: any) => props.value],
+        projectFn
+      )({}, { value: 47 });
+
+      expect(projectFn).toHaveBeenCalledWith(countOne, countTwo, 47);
+    });
+
+    it('should be possible to test a projector fn independent from the selectors it is composed of', () => {
+      const projectFn = jasmine.createSpy('projectionFn');
+      const selector = createSelector(
+        [
+          incrementOne,
+          incrementTwo,
+          (state: any, props: any) => {
+            fail(`Shouldn't be called`);
+            return props.value;
+          },
+        ],
+        projectFn
+      );
+
+      selector.projector('', '', 47);
+
+      expect(incrementOne).not.toHaveBeenCalled();
+      expect(incrementTwo).not.toHaveBeenCalled();
+      expect(projectFn).toHaveBeenCalledWith('', '', 47);
+    });
+
+    it('should call the projector function when the state changes', () => {
+      const projectFn = jasmine.createSpy('projectionFn');
+      const selector = createSelector(
+        [incrementOne, (state: any, props: any) => props.value],
+        projectFn
+      );
+
+      const firstSate = { first: 'state' };
+      const props = { foo: 'props' };
+      selector(firstSate, props);
+      selector(firstSate, props);
+      expect(projectFn).toHaveBeenCalledTimes(1);
+
+      const secondState = { second: 'state' };
+      selector(secondState, props);
+      expect(projectFn).toHaveBeenCalledTimes(2);
+    });
+
+    it('should memoize the function', () => {
+      let counter = 0;
+
+      const firstState = { first: 'state' };
+      const secondState = { second: 'state' };
+      const props = { foo: 'props' };
+
+      const projectFn = jasmine.createSpy('projectionFn');
+      const selector = createSelector(
+        [
+          incrementOne,
+          incrementTwo,
+          (state: any, props: any) => {
+            counter++;
+            return props;
+          },
+        ],
+        projectFn
+      );
+
+      selector(firstState, props);
+      selector(firstState, props);
+      selector(firstState, props);
+      selector(secondState, props);
+
+      expect(counter).toBe(2);
+      expect(projectFn).toHaveBeenCalledTimes(2);
+    });
+
+    it('should allow you to release memoized arguments', () => {
+      const state = { first: 'state' };
+      const props = { foo: 'props' };
+      const projectFn = jasmine.createSpy('projectionFn');
+      const selector = createSelector(
+        [incrementOne, (state: any, props: any) => props],
+        projectFn
+      );
+
+      selector(state, props);
+      selector(state, props);
+      selector.release();
+      selector(state, props);
+      selector(state, props);
+
+      expect(projectFn).toHaveBeenCalledTimes(2);
+    });
+  });
+
   describe('createFeatureSelector', () => {
     let featureName = '@ngrx/router-store';
     let featureSelector: (state: any) => number;

modules/store/src/models.ts

@@ -33,6 +33,9 @@ export interface StoreFeature<T, V extends Action = Action> {
   metaReducers?: MetaReducer<T, V>[];
 }
 
-export interface Selector<T, V> {
-  (state: T): V;
-}
+export type Selector<T, V> = (state: T) => V;
+
+export type SelectorWithProps<State, Props, Result> = (
+  state: State,
+  props: Props
+) => Result;