refactor(router-state): change @Selector to createSelector

ngxs · Jan 12, 2025 · 03977cb · 03977cb
1 parent 56b9e7d
commit 03977cb
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 22 deletions.
diff --git a/integration/app/list/list.component.ts b/integration/app/list/list.component.ts
@@ -19,8 +19,8 @@ export class ListComponent {
   hello$ = this._store.select(ListState.getHello);
   hello = this._store.selectSignal(ListState.getHello);
 
-  router$ = this._store.select<RouterStateSnapshot | undefined>(RouterState.state);
-  router = this._store.selectSignal<RouterStateSnapshot | undefined>(RouterState.state);
+  router$ = this._store.select<RouterStateSnapshot | undefined>(RouterState.state());
+  router = this._store.selectSignal<RouterStateSnapshot | undefined>(RouterState.state());
 
   constructor(private _store: Store) {}
 }
diff --git a/packages/router-plugin/src/router.state.ts b/packages/router-plugin/src/router.state.ts
@@ -10,7 +10,7 @@ import {
   NavigationEnd,
   Event
 } from '@angular/router';
-import { Action, Selector, State, StateContext, StateToken, Store } from '@ngxs/store';
+import { Action, createSelector, State, StateContext, StateToken, Store } from '@ngxs/store';
 import {
   NavigationActionTiming,
   ɵNGXS_ROUTER_PLUGIN_OPTIONS
@@ -85,17 +85,15 @@ export class RouterState {
 
   private _subscription!: Subscription;
 
-  @Selector()
-  static state<T = RouterStateSnapshot>(state: RouterStateModel<T>) {
-    // The `state` is optional if the selector is invoked before the router
-    // state is registered in NGXS.
-    return state?.state;
+  static state<T = RouterStateSnapshot>() {
+    return createSelector([ROUTER_STATE_TOKEN], (state: RouterStateModel<T>) => {
+      // The `state` is optional if the selector is invoked before the router
+      // state is registered in NGXS.
+      return state?.state;
+    });
   }
 
-  @Selector()
-  static url(state: RouterStateModel): string | undefined {
-    return state?.state?.url;
-  }
+  static url = createSelector([ROUTER_STATE_TOKEN], state => state?.state?.url);
 
   constructor() {
     this._setUpStoreListener();

diff --git a/packages/router-plugin/tests/issues/issue-1407.spec.ts b/packages/router-plugin/tests/issues/issue-1407.spec.ts
@@ -95,7 +95,7 @@ describe('#1407 issue', () => {
 
       const document = injector.get(DOCUMENT);
       const root = document.querySelector('app-root')!;
-      const routerState = store.selectSnapshot(RouterState.state);
+      const routerState = store.selectSnapshot(RouterState.state());
 
       // Assert
       expect(navigateDispatchedTimes).toBe(1);

diff --git a/packages/router-plugin/tests/issues/issue-1718-url-recognition.spec.ts b/packages/router-plugin/tests/issues/issue-1718-url-recognition.spec.ts
@@ -45,7 +45,7 @@ describe('URL recognition in guards (https://github.com/ngxs/store/issues/1718)'
   })
   @Injectable()
   class AppState {
-    @Selector([RouterState.state])
+    @Selector([RouterState.state()])
     static getActiveRoute(route: RouterStateSnapshot): ActivatedRouteSnapshot {
       let state: ActivatedRouteSnapshot = route.root;
       while (state.firstChild) {

diff --git a/packages/router-plugin/tests/router-data-resolved.spec.ts b/packages/router-plugin/tests/router-data-resolved.spec.ts
@@ -55,7 +55,7 @@ describe('RouterDataResolved', () => {
 
     constructor(store: Store) {
       this.router$ = store.select(
-        RouterState.state
+        RouterState.state()
       ) as unknown as Observable<RouterStateModel>;
     }
   }
@@ -110,7 +110,7 @@ describe('RouterDataResolved', () => {
       expect(dataFromTheOriginalRouter).toEqual({ test });
 
       const dataFromTheRouterState = store.selectSnapshot<RouterStateSnapshot | undefined>(
-        RouterState.state
+        RouterState.state()
       )!.root.firstChild!.data;
       expect(dataFromTheOriginalRouter).toEqual(dataFromTheRouterState);
     })
@@ -160,7 +160,7 @@ describe('RouterDataResolved', () => {
       expect(dataFromTheOriginalRouter).toEqual({ test });
 
       const dataFromTheRouterState = store.selectSnapshot<RouterStateSnapshot | undefined>(
-        RouterState.state
+        RouterState.state()
       )!.root.firstChild!.data;
       expect(dataFromTheOriginalRouter).toEqual(dataFromTheRouterState);
     })

diff --git a/packages/router-plugin/tests/router.plugin.spec.ts b/packages/router-plugin/tests/router.plugin.spec.ts
@@ -38,7 +38,7 @@ describe('NgxsRouterPlugin', () => {
       await ngZone.run(() => router.navigateByUrl('/testpath'));
 
       // Assert
-      const routerState = store.selectSnapshot(RouterState.state)!;
+      const routerState = store.selectSnapshot(RouterState.state())!;
       expect(routerState.url).toEqual('/testpath');
 
       const routerUrl = store.selectSnapshot(RouterState.url);
@@ -57,7 +57,7 @@ describe('NgxsRouterPlugin', () => {
       await store.dispatch(new Navigate(['a-path'])).toPromise();
 
       // Assert
-      const routerState = store.selectSnapshot(RouterState.state);
+      const routerState = store.selectSnapshot(RouterState.state());
       expect(routerState!.url).toEqual('/a-path');
     })
   );
@@ -92,7 +92,7 @@ describe('NgxsRouterPlugin', () => {
 
       // Assert
       const routerState = store.selectSnapshot(state =>
-        RouterState.state<RouterStateParams>(state.router)
+        RouterState.state<RouterStateParams>()(state.router)
       );
 
       expect(routerState!.url).toEqual('/a-path?foo=bar');
@@ -146,7 +146,7 @@ describe('NgxsRouterPlugin', () => {
         .toPromise();
 
       // Assert
-      const routerState = store.selectSnapshot(RouterState.state);
+      const routerState = store.selectSnapshot(RouterState.state());
       expect(routerState!.url).toEqual('/route1?a=10&b=20');
       expect(count).toBe(2);
     })
@@ -166,7 +166,7 @@ describe('NgxsRouterPlugin', () => {
 
         @Action(TestAction)
         testAction(ctx: StateContext<unknown>) {
-          ctx.setState(this.store.selectSnapshot(RouterState.state));
+          ctx.setState(this.store.selectSnapshot(RouterState.state()));
         }
       }