diff --git a/CHANGELOG.md b/CHANGELOG.md index 749cdbda5..2a471b239 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ $ npm install @ngxs/store@dev - Build(storage-plugin): Use `ngServerMode` to check whether we are in SSR [#2288](https://github.com/ngxs/store/pull/2288) - Refactor(form-plugin): Replace `takeUntil` with `takeUntilDestroyed` [#2283](https://github.com/ngxs/store/pull/2283) - Refactor(router-plugin): Reduce RxJS depedency [#2291](https://github.com/ngxs/store/pull/2291) +- Refactor(router-plugin): Change `@Selector` to `createSelector` [#2294](https://github.com/ngxs/store/pull/2294) ### 19.0.0 2024-12-3 diff --git a/integration/app/list/list.component.ts b/integration/app/list/list.component.ts index bbf29d1b0..6099ca3a1 100644 --- 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(RouterState.state); - router = this._store.selectSignal(RouterState.state); + router$ = this._store.select(RouterState.state()); + router = this._store.selectSignal(RouterState.state()); constructor(private _store: Store) {} } diff --git a/packages/router-plugin/src/router.state.ts b/packages/router-plugin/src/router.state.ts index e08b39598..85728f646 100644 --- 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(state: RouterStateModel) { - // The `state` is optional if the selector is invoked before the router - // state is registered in NGXS. - return state?.state; + static state() { + return createSelector([ROUTER_STATE_TOKEN], (state: RouterStateModel) => { + // 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 index b4be03c5c..6b9353640 100644 --- 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 index 8cb19dba9..d1a4c0849 100644 --- 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 index abb11c991..8442299ba 100644 --- 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; } } @@ -110,7 +110,7 @@ describe('RouterDataResolved', () => { expect(dataFromTheOriginalRouter).toEqual({ test }); const dataFromTheRouterState = store.selectSnapshot( - 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( - 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 index dc41c854d..e9d0d1e5d 100644 --- 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(state.router) + RouterState.state()(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) { - ctx.setState(this.store.selectSnapshot(RouterState.state)); + ctx.setState(this.store.selectSnapshot(RouterState.state())); } }