fix: add key$ to select observable from RxStore

Author: nartc

libs/angular-three/src/lib/stores/rx-store.ts

@@ -1,6 +1,6 @@
-import { ChangeDetectorRef, Injectable } from '@angular/core';
+import { ChangeDetectorRef, Injectable, OnDestroy } from '@angular/core';
 import { RxState } from '@rx-angular/state';
-import { combineLatest, MonoTypeOperatorFunction, Observable, startWith, tap } from 'rxjs';
+import { combineLatest, distinctUntilChanged, MonoTypeOperatorFunction, Observable, startWith, tap } from 'rxjs';
 import type { NgtAnyRecord } from '../types';
 import { is } from '../utils/is';
 
@@ -70,10 +70,10 @@ export function tapEffect<TValue>(effectFn: EffectFn<TValue>): MonoTypeOperatorF
 }
 
 @Injectable()
-export class NgtRxStore<
-    TState extends object = any,
-    TRxState extends object = TState & Record<string, any>
-> extends RxState<TRxState> {
+export class NgtRxStore<TState extends object = any, TRxState extends object = TState & Record<string, any>>
+    extends RxState<TRxState>
+    implements OnDestroy
+{
     constructor() {
         super();
         // set a dummy property so that initial this.get() won't return undefined
@@ -120,4 +120,28 @@ export class NgtRxStore<
             requestAnimationFrame(() => void cdr.detectChanges());
         });
     }
+
+    private cache: Record<string, Observable<any>> = {};
+    key$<K extends keyof TRxState>(key: K): Observable<TRxState[K]>;
+    key$<K1 extends keyof TRxState, K2 extends keyof TRxState[K1]>(key1: K1, key2: K2): Observable<TRxState[K1][K2]>;
+    key$<K1 extends keyof TRxState, K2 extends keyof TRxState[K1], K3 extends keyof TRxState[K1][K2]>(
+        key1: K1,
+        key2: K2,
+        key3: K3
+    ): Observable<TRxState[K1][K2][K3]>;
+    key$(...keys: string[]) {
+        const key = keys.join('.');
+        if (!this.cache[key]) {
+            this.cache[key] = this.select(...(keys as [any])).pipe(
+                startWith(this.get(...(keys as [any])) ?? undefined),
+                distinctUntilChanged()
+            );
+        }
+        return this.cache[key];
+    }
+
+    override ngOnDestroy() {
+        this.cache = {};
+        super.ngOnDestroy();
+    }
 }