feat(store): deprecate selectors with props (#2993)

ngrx · Apr 22, 2021 · 7c6d4e4 · 7c6d4e4
1 parent a5a1330
commit 7c6d4e4
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 3 deletions.
diff --git a/modules/store/src/models.ts b/modules/store/src/models.ts
@@ -48,6 +48,9 @@ export interface StoreFeature<T, V extends Action = Action> {
 
 export type Selector<T, V> = (state: T) => V;
 
+/**
+ * @deprecated Selectors with props are deprecated, for more info see {@link https://github.com/ngrx/platform/issues/2980 Github Issue}
+ */
 export type SelectorWithProps<State, Props, Result> = (
   state: State,
   props: Props

diff --git a/modules/store/src/selector.ts b/modules/store/src/selector.ts
@@ -28,6 +28,9 @@ export interface MemoizedSelector<
   clearResult: () => void;
 }
 
+/**
+ * @deprecated Selectors with props are deprecated, for more info see {@link https://github.com/ngrx/platform/issues/2980 Github Issue}
+ */
 export interface MemoizedSelectorWithProps<
   State,
   Props,
@@ -122,6 +125,9 @@ export function createSelector<State, S1, Result>(
   s1: Selector<State, S1>,
   projector: (s1: S1) => Result
 ): MemoizedSelector<State, Result>;
+/**
+ * @deprecated Selectors with props are deprecated, for more info see {@link https://github.com/ngrx/platform/issues/2980 Github Issue}
+ */
 export function createSelector<State, Props, S1, Result>(
   s1: SelectorWithProps<State, Props, S1>,
   projector: (s1: S1, props: Props) => Result
@@ -130,6 +136,9 @@ export function createSelector<State, S1, Result>(
   selectors: [Selector<State, S1>],
   projector: (s1: S1) => Result
 ): MemoizedSelector<State, Result>;
+/**
+ * @deprecated Selectors with props are deprecated, for more info see {@link https://github.com/ngrx/platform/issues/2980 Github Issue}
+ */
 export function createSelector<State, Props, S1, Result>(
   selectors: [SelectorWithProps<State, Props, S1>],
   projector: (s1: S1, props: Props) => Result
@@ -140,15 +149,22 @@ export function createSelector<State, S1, S2, Result>(
   s2: Selector<State, S2>,
   projector: (s1: S1, s2: S2) => Result
 ): MemoizedSelector<State, Result>;
+/**
+ * @deprecated Selectors with props are deprecated, for more info see {@link https://github.com/ngrx/platform/issues/2980 Github Issue}
+ */
 export function createSelector<State, Props, S1, S2, Result>(
   s1: SelectorWithProps<State, Props, S1>,
   s2: SelectorWithProps<State, Props, S2>,
   projector: (s1: S1, s2: S2, props: Props) => Result
 ): MemoizedSelectorWithProps<State, Props, Result>;
+
 export function createSelector<State, S1, S2, Result>(
   selectors: [Selector<State, S1>, Selector<State, S2>],
   projector: (s1: S1, s2: S2) => Result
 ): MemoizedSelector<State, Result>;
+/**
+ * @deprecated Selectors with props are deprecated, for more info see {@link https://github.com/ngrx/platform/issues/2980 Github Issue}
+ */
 export function createSelector<State, Props, S1, S2, Result>(
   selectors: [
     SelectorWithProps<State, Props, S1>,
@@ -163,6 +179,9 @@ export function createSelector<State, S1, S2, S3, Result>(
   s3: Selector<State, S3>,
   projector: (s1: S1, s2: S2, s3: S3) => Result
 ): MemoizedSelector<State, Result>;
+/**
+ * @deprecated Selectors with props are deprecated, for more info see {@link https://github.com/ngrx/platform/issues/2980 Github Issue}
+ */
 export function createSelector<State, Props, S1, S2, S3, Result>(
   s1: SelectorWithProps<State, Props, S1>,
   s2: SelectorWithProps<State, Props, S2>,
@@ -173,6 +192,9 @@ export function createSelector<State, S1, S2, S3, Result>(
   selectors: [Selector<State, S1>, Selector<State, S2>, Selector<State, S3>],
   projector: (s1: S1, s2: S2, s3: S3) => Result
 ): MemoizedSelector<State, Result>;
+/**
+ * @deprecated Selectors with props are deprecated, for more info see {@link https://github.com/ngrx/platform/issues/2980 Github Issue}
+ */
 export function createSelector<State, Props, S1, S2, S3, Result>(
   selectors: [
     SelectorWithProps<State, Props, S1>,
@@ -189,6 +211,9 @@ export function createSelector<State, S1, S2, S3, S4, Result>(
   s4: Selector<State, S4>,
   projector: (s1: S1, s2: S2, s3: S3, s4: S4) => Result
 ): MemoizedSelector<State, Result>;
+/**
+ * @deprecated Selectors with props are deprecated, for more info see {@link https://github.com/ngrx/platform/issues/2980 Github Issue}
+ */
 export function createSelector<State, Props, S1, S2, S3, S4, Result>(
   s1: SelectorWithProps<State, Props, S1>,
   s2: SelectorWithProps<State, Props, S2>,
@@ -205,6 +230,9 @@ export function createSelector<State, S1, S2, S3, S4, Result>(
   ],
   projector: (s1: S1, s2: S2, s3: S3, s4: S4) => Result
 ): MemoizedSelector<State, Result>;
+/**
+ * @deprecated Selectors with props are deprecated, for more info see {@link https://github.com/ngrx/platform/issues/2980 Github Issue}
+ */
 export function createSelector<State, Props, S1, S2, S3, S4, Result>(
   selectors: [
     SelectorWithProps<State, Props, S1>,
@@ -223,6 +251,9 @@ export function createSelector<State, S1, S2, S3, S4, S5, Result>(
   s5: Selector<State, S5>,
   projector: (s1: S1, s2: S2, s3: S3, s4: S4, s5: S5) => Result
 ): MemoizedSelector<State, Result>;
+/**
+ * @deprecated Selectors with props are deprecated, for more info see {@link https://github.com/ngrx/platform/issues/2980 Github Issue}
+ */
 export function createSelector<State, Props, S1, S2, S3, S4, S5, Result>(
   s1: SelectorWithProps<State, Props, S1>,
   s2: SelectorWithProps<State, Props, S2>,
@@ -241,6 +272,9 @@ export function createSelector<State, S1, S2, S3, S4, S5, Result>(
   ],
   projector: (s1: S1, s2: S2, s3: S3, s4: S4, s5: S5) => Result
 ): MemoizedSelector<State, Result>;
+/**
+ * @deprecated Selectors with props are deprecated, for more info see {@link https://github.com/ngrx/platform/issues/2980 Github Issue}
+ */
 export function createSelector<State, Props, S1, S2, S3, S4, S5, Result>(
   selectors: [
     SelectorWithProps<State, Props, S1>,
@@ -261,6 +295,9 @@ export function createSelector<State, S1, S2, S3, S4, S5, S6, Result>(
   s6: Selector<State, S6>,
   projector: (s1: S1, s2: S2, s3: S3, s4: S4, s5: S5, s6: S6) => Result
 ): MemoizedSelector<State, Result>;
+/**
+ * @deprecated Selectors with props are deprecated, for more info see {@link https://github.com/ngrx/platform/issues/2980 Github Issue}
+ */
 export function createSelector<State, Props, S1, S2, S3, S4, S5, S6, Result>(
   s1: SelectorWithProps<State, Props, S1>,
   s2: SelectorWithProps<State, Props, S2>,
@@ -283,13 +320,15 @@ export function createSelector<State, S1, S2, S3, S4, S5, S6, Result>(
     Selector<State, S1>,
     Selector<State, S2>,
     Selector<State, S3>,
-
     Selector<State, S4>,
     Selector<State, S5>,
     Selector<State, S6>
   ],
   projector: (s1: S1, s2: S2, s3: S3, s4: S4, s5: S5, s6: S6) => Result
 ): MemoizedSelector<State, Result>;
+/**
+ * @deprecated Selectors with props are deprecated, for more info see {@link https://github.com/ngrx/platform/issues/2980 Github Issue}
+ */
 export function createSelector<State, Props, S1, S2, S3, S4, S5, S6, Result>(
   selectors: [
     SelectorWithProps<State, Props, S1>,
@@ -320,6 +359,9 @@ export function createSelector<State, S1, S2, S3, S4, S5, S6, S7, Result>(
   s7: Selector<State, S7>,
   projector: (s1: S1, s2: S2, s3: S3, s4: S4, s5: S5, s6: S6, s7: S7) => Result
 ): MemoizedSelector<State, Result>;
+/**
+ * @deprecated Selectors with props are deprecated, for more info see {@link https://github.com/ngrx/platform/issues/2980 Github Issue}
+ */
 export function createSelector<
   State,
   Props,
@@ -362,6 +404,9 @@ export function createSelector<State, S1, S2, S3, S4, S5, S6, S7, Result>(
   ],
   projector: (s1: S1, s2: S2, s3: S3, s4: S4, s5: S5, s6: S6, s7: S7) => Result
 ): MemoizedSelector<State, Result>;
+/**
+ * @deprecated Selectors with props are deprecated, for more info see {@link https://github.com/ngrx/platform/issues/2980 Github Issue}
+ */
 export function createSelector<
   State,
   Props,
@@ -415,6 +460,9 @@ export function createSelector<State, S1, S2, S3, S4, S5, S6, S7, S8, Result>(
     s8: S8
   ) => Result
 ): MemoizedSelector<State, Result>;
+/**
+ * @deprecated Selectors with props are deprecated, for more info see {@link https://github.com/ngrx/platform/issues/2980 Github Issue}
+ */
 export function createSelector<
   State,
   Props,
@@ -470,6 +518,9 @@ export function createSelector<State, S1, S2, S3, S4, S5, S6, S7, S8, Result>(
     s8: S8
   ) => Result
 ): MemoizedSelector<State, Result>;
+/**
+ * @deprecated Selectors with props are deprecated, for more info see {@link https://github.com/ngrx/platform/issues/2980 Github Issue}
+ */
 export function createSelector<
   State,
   Props,
@@ -545,9 +596,15 @@ export function createSelectorFactory<T = any, V = any>(
   memoize: MemoizeFn,
   options: SelectorFactoryConfig<T, V>
 ): (...input: any[]) => MemoizedSelector<T, V>;
+/**
+ * @deprecated Selectors with props are deprecated, for more info see {@link https://github.com/ngrx/platform/issues/2980 Github Issue}
+ */
 export function createSelectorFactory<T = any, Props = any, V = any>(
   memoize: MemoizeFn
 ): (...input: any[]) => MemoizedSelectorWithProps<T, Props, V>;
+/**
+ * @deprecated Selectors with props are deprecated, for more info see {@link https://github.com/ngrx/platform/issues/2980 Github Issue}
+ */
 export function createSelectorFactory<T = any, Props = any, V = any>(
   memoize: MemoizeFn,
   options: SelectorFactoryConfig<T, V>

diff --git a/modules/store/src/store.ts b/modules/store/src/store.ts
@@ -8,7 +8,8 @@ import { ReducerManager } from './reducer_manager';
 import { StateObservable } from './state';
 
 @Injectable()
-export class Store<T = object> extends Observable<T>
+export class Store<T = object>
+  extends Observable<T>
   implements Observer<Action> {
   constructor(
     state$: StateObservable,
@@ -21,6 +22,9 @@ export class Store<T = object> extends Observable<T>
   }
 
   select<K>(mapFn: (state: T) => K): Observable<K>;
+  /**
+   * @deprecated Selectors with props are deprecated, for more info see {@link https://github.com/ngrx/platform/issues/2980 Github Issue}
+   */
   select<K, Props = any>(
     mapFn: (state: T, props: Props) => K,
     props: Props
@@ -130,9 +134,15 @@ export class Store<T = object> extends Observable<T>
 
 export const STORE_PROVIDERS: Provider[] = [Store];
 
+export function select<T, K>(
+  mapFn: (state: T) => K
+): (source$: Observable<T>) => Observable<K>;
+/**
+ * @deprecated Selectors with props are deprecated, for more info see {@link https://github.com/ngrx/platform/issues/2980 Github Issue}
+ */
 export function select<T, Props, K>(
   mapFn: (state: T, props: Props) => K,
-  props?: Props
+  props: Props
 ): (source$: Observable<T>) => Observable<K>;
 export function select<T, a extends keyof T>(
   key: a

diff --git a/projects/ngrx.io/content/guide/store/selectors.md b/projects/ngrx.io/content/guide/store/selectors.md
@@ -82,6 +82,12 @@ export const selectVisibleBooks = createSelector(
 
 ### Using selectors with props
 
+<div class="alert is-critical">
+
+Selectors with props are [deprecated](https://github.com/ngrx/platform/issues/2980).
+
+</div>
+
 To select a piece of state based on data that isn't available in the store you can pass `props` to the selector function. These `props` gets passed through every selector and the projector function.
 To do so we must specify these `props` when we use the selector inside our component.