Merge pull request #783 from /issues/694

feat(core): factories for factory selectors for ngrx 12+ #694

.gitignore

@@ -3,3 +3,5 @@ dist
 node_modules
 test-reports
 tmp
+
+*.iml

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx commitlint --edit $1

.husky/post-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+git update-index --again

.husky/pre-commit

@@ -0,0 +1,6 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged
+npm run lint
+npm run test

docs/articles/api/core/to-factory-selector.md

@@ -0,0 +1,34 @@
+---
+title: toFactorySelector
+description: Information about toFactorySelector function and how to create a factory selector function
+sidebar_label: toFactorySelector
+---
+
+`toFactorySelector` helps to create a factory selector function from a root selector.
+In this case, the produced selector can be passed directly to NGRX `store.select`.
+
+This function is useful for NGRX v12 and younger.
+
+```ts
+export class MyComponent {
+  public readonly users$: Observable<User>;
+
+  private readonly selectUser =
+    toFactorySelector(
+      rootUser(
+        relUserCompany(
+          relCompanyAddress(),
+        ),
+      ),
+    );
+
+  constructor(private store: Store) {
+    this.users$ = this.store.select(
+      // let's select current user
+      this.selectUser(
+        selectCurrentUserId,
+      ),
+    );
+  }
+}
+```

docs/articles/api/core/to-static-selector.md

@@ -0,0 +1,33 @@
+---
+title: toStaticSelector
+description: Information about toStaticSelector function and how to bind param to a root selector
+sidebar_label: toStaticSelector
+---
+
+`toStaticSelector` helps to create a selector function from a root selector.
+Its behavior very similar to [`toFactorySelector`](./to-factory-selector.md),
+with the difference that the passed params are static and cannot be changed.
+
+This function is useful for NGRX v12 and younger.
+
+```ts
+export class MyComponent {
+  public readonly users$: Observable<User>;
+
+  private readonly selectCurrentUser =
+    toStaticSelector(
+      rootUser(
+        relUserCompany(
+          relCompanyAddress(),
+        ),
+      ),
+      selectCurrentUserId,
+    );
+
+  constructor(private store: Store) {
+    this.users$ = this.store.select(
+      this.selectCurrentUser,
+    );
+  }
+}
+```

docs/articles/guide/ngrx-data.md

@@ -110,12 +110,16 @@ export class MyComponent {
       userSelectors: UserSelectorService,
   ) {
     this.user$ = store.select(
-      userSelectors.selectUser,
-      '1',
+      toStaticSelector(
+        userSelectors.selectUser,
+        '1',
+      ),
     );
     this.users$ = store.select(
-      userSelectors.selectUsers,
-      ['1', '2'],
+      toStaticSelector(
+        userSelectors.selectUsers,
+        ['1', '2'],
+      ),
     );
   }
 }

docs/articles/guide/quick.md

@@ -55,8 +55,7 @@ the only requirement is the `Dictionary` (a regular object).
 The next step is to define functions which select the state of an entity.
 In this library, they are called [**entity state selectors**](../api/core/entity-state-selector.md).
 
-```ts
-// Redux
+```ts title="Redux"
 export const selectUserState = state => state.users;
 export const selectCompanyState = state => state.companies;
 // `stateKeys` function helps in case of different names of the properties.
@@ -67,8 +66,7 @@ export const selectAddressState = stateKeys(
 );
 ```
 
-```ts
-// NGRX
+```ts title="NGRX"
 export const selectUserState =
   createFeatureSelector<fromUser.State>(
     'users',
@@ -165,8 +163,7 @@ In case of arrays, such as `company.staff`, there is [`childrenEntitiesSelector`
 Now, let's go to a component where we want to select a user with relationships,
 and create a **root selector** via the factories there:
 
-```ts
-// Redux
+```ts title="Redux"
 const selectUser = rootUser(
   relUserCompany(
     relCompanyAddress(),
@@ -182,8 +179,32 @@ const mapStateToProps = state => {
 export default connect(mapStateToProps)(MyComponent);
 ```
 
-```ts
-// NGRX
+```ts title="NGRX 12 and younger"
+export class MyComponent {
+  public readonly users$: Observable<User>;
+
+  private readonly selectUser =
+    rootUser(
+      relUserCompany(
+        relCompanyAddress(),
+      ),
+  );
+
+  constructor(private store: Store) {
+    this.users$ = this.store.select(
+      // toStaticSelector should be used
+      // to create a selector for v12
+      toStaticSelector(
+        this.selectUser,
+        // '1' is the id of user
+        '1',
+      ),
+    );
+  }
+}
+```
+
+```ts title="NGRX 11 and older"
 export class MyComponent {
   public readonly users$: Observable<User>;
 
@@ -205,13 +226,20 @@ export class MyComponent {
 
 Of course, instead of a hardcoded id like `1`, we can pass another **selector, that selects ids** from the state.
 
-```ts
-// Redux
+```ts title="Redux"
 selectUser(state, selectCurrentUserId);
 ```
 
-```ts
-// NGRX
+```ts title="NGRX 12 and younger"
+this.store.select(
+  toStaticSelector(
+    this.selectUser,
+    selectCurrentUserId,
+  ),
+);
+```
+
+```ts title="NGRX 11 and older"
 this.store.select(this.selectUser, selectCurrentUserId);
 ```
 
@@ -234,13 +262,20 @@ const selectUsers = rootEntities(selectUser);
 
 Now we can use `selectUsers` in our components, but instead of an id, it requires an array of them.
 
-```ts
-// Redux
+```ts title="Redux"
 selectUsers(state, ['1', '2']);
 ```
 
-```ts
-// NGRX
+```ts title="NGRX 12 and younger"
+this.store.select(
+  toStaticSelector(
+    this.selectUsers,
+    ['1', '2'],
+  ),
+);
+```
+
+```ts title="NGRX and older"
 this.store.select(this.selectUsers, ['1', '2']);
 ```
 

docs/articles/index.md

@@ -19,9 +19,10 @@ The current version of `ngrx-entity-relationship` has been tested and can be use
 
 - Redux 4, React Redux 7, **try it live on [StackBlitz](https://stackblitz.com/edit/ngrx-entity-relationship-react?file=src/MyComponent.tsx)
   or [CodeSandbox](https://codesandbox.io/s/github/satanTime/ngrx-entity-relationship-react?file=/src/MyComponent.tsx)**
-
-- NGRX 10, **try it live on [StackBlitz](https://stackblitz.com/github/satanTime/ngrx-entity-relationship-angular?file=src/app/app.component.ts)
+- NGRX 12, **try it live on [StackBlitz](https://stackblitz.com/github/satanTime/ngrx-entity-relationship-angular?file=src/app/app.component.ts)
   or [CodeSandbox](https://codesandbox.io/s/github/satanTime/ngrx-entity-relationship-angular?file=/src/app/app.component.ts)**
+- NGRX 11
+- NGRX 10
 - NGRX 9
 - NGRX 8
 - NGRX 7

docs/sidebars.js

@@ -51,6 +51,8 @@ module.exports = {
                         'api/core/childentityselector-function',
                         'api/core/childrenentities-function',
                         'api/core/childrenentitiesselector-function',
+                        'api/core/to-factory-selector',
+                        'api/core/to-static-selector',
                     ],
                 },
                 {

e2e/a12/src/app/entity/entity.component.ts

@@ -1,6 +1,6 @@
 import {ChangeDetectionStrategy, Component, OnDestroy} from '@angular/core';
 import {select, Store} from '@ngrx/store';
-import {rootEntities} from 'ngrx-entity-relationship';
+import {rootEntities, toFactorySelector} from 'ngrx-entity-relationship';
 import {combineLatest, Observable} from 'rxjs';
 import {filter, map, switchMap} from 'rxjs/operators';
 import {Company} from './store/company/company.model';
@@ -29,7 +29,7 @@ import {User} from './store/user/user.model';
 export class EntityComponent implements OnDestroy {
     public readonly company$: Observable<Company | undefined>;
     // prettier-ignore
-    private readonly companyWithCrazyData = rootCompany(
+    private readonly companyWithCrazyData = toFactorySelector(rootCompany(
         relCompanyAddress(),
         relCompanyAdmin(
             relUserEmployees(),
@@ -41,36 +41,36 @@ export class EntityComponent implements OnDestroy {
                 ),
             ),
         ),
-    );
+    ));
 
     public readonly users$: Observable<Array<User>>;
     // prettier-ignore
-    private readonly users = rootEntities(
+    private readonly users = toFactorySelector(rootEntities(
         rootUser(
             relUserEmployees(
                 relUserManager(),
             ),
             relUserManager(),
         ),
-    );
+    ));
 
     constructor(protected readonly store: Store<State>, public readonly entitiesService: EntityService) {
         this.users$ = combineLatest([
-            this.store.select(this.users, selectCurrentUsersIds),
+            this.store.select(this.users(selectCurrentUsersIds)),
             this.store.pipe(
                 select(selectCurrentUsersIds),
-                switchMap(ids => this.store.select(this.users, ids)),
+                switchMap(ids => this.store.select(this.users(ids))),
             ),
         ]).pipe(
             filter(([a, b]) => a === b),
             map(([a]) => a),
         );
 
         this.company$ = combineLatest([
-            this.store.select(this.companyWithCrazyData, selectCurrentCompanyId),
+            this.store.select(this.companyWithCrazyData(selectCurrentCompanyId)),
             this.store.pipe(
                 select(selectCurrentCompanyId),
-                switchMap(id => this.store.select(this.companyWithCrazyData, id)),
+                switchMap(id => this.store.select(this.companyWithCrazyData(id))),
             ),
         ]).pipe(
             filter(([a, b]) => a === b),

e2e/a12/src/app/entity/store/entity.service.ts

@@ -1,5 +1,6 @@
 import {Injectable} from '@angular/core';
 import {Store} from '@ngrx/store';
+import {toStaticSelector} from 'ngrx-entity-relationship';
 import {filter, first, tap} from 'rxjs/operators';
 import {UpdateAddress} from './address/address.actions';
 import {Address} from './address/address.model';
@@ -15,7 +16,7 @@ export class EntityService {
 
     public changeUser(id: string): void {
         this.store
-            .select(rootUser(), id)
+            .select(toStaticSelector(rootUser(), id))
             .pipe(
                 filter((v): v is User => !!v),
                 first(),
@@ -40,7 +41,7 @@ export class EntityService {
 
     public changeCompany(id: string): void {
         this.store
-            .select(rootCompany(), id)
+            .select(toStaticSelector(rootCompany(), id))
             .pipe(
                 filter((v): v is Company => !!v),
                 first(),
@@ -65,7 +66,7 @@ export class EntityService {
 
     public changeAddress(id: string): void {
         this.store
-            .select(rootAddress(), id)
+            .select(toStaticSelector(rootAddress(), id))
             .pipe(
                 filter((v): v is Address => !!v),
                 first(),

libs/ngrx-entity-relationship/rxjs/src/operators/relationships.ts

@@ -1,9 +1,9 @@
-import {HANDLER_ROOT_ENTITIES, HANDLER_ROOT_ENTITY, ID_TYPES} from 'ngrx-entity-relationship';
+import {HANDLER_ROOT_ENTITIES, HANDLER_ROOT_ENTITY, ID_TYPES, toFactorySelector} from 'ngrx-entity-relationship';
 import {iif, Observable, of} from 'rxjs';
 import {map, switchMap} from 'rxjs/operators';
 
 export interface STORE_INSTANCE<T> {
-    select<K, Props>(mapFn: (state: T, props: Props) => K, props: Props): Observable<K>;
+    select<K>(mapFn: (state: T) => K): Observable<K>;
 }
 
 export function relationships<STORE, ENTITY>(
@@ -30,6 +30,8 @@ export function relationships<STORE, SET, TRANSFORMED, TYPES>(
     store: STORE_INSTANCE<STORE>,
     selector: HANDLER_ROOT_ENTITY<STORE, SET, SET | TRANSFORMED, TYPES>,
 ): (next: Observable<SET>) => Observable<undefined | SET | TRANSFORMED> {
+    const factory = toFactorySelector(selector);
+
     return next =>
         next.pipe(
             switchMap(input => {
@@ -48,7 +50,7 @@ export function relationships<STORE, SET, TRANSFORMED, TYPES>(
                             }
                             return selector.idSelector(set) as any as TYPES;
                         }),
-                        switchMap(id => store.select(selector, id)),
+                        switchMap(id => store.select(factory(id))),
                     ),
                 );
             }),