feat: add non-reactive version of injectSelector

Author: crutchcorn

projects/angular-redux-demo/src/app/app.component.ts

@@ -1,16 +1,17 @@
-import { Component, inject } from '@angular/core'
-import { ReduxProvider } from 'angular-redux'
+import { Component } from '@angular/core'
+import { injectSelector } from 'angular-redux'
+import { RootState } from './store'
 
 @Component({
   selector: 'app-root',
   standalone: true,
   imports: [],
   template: `
     <div>
-      {{data.message}}
+      {{count}}
     </div>
   `
 })
 export class AppComponent {
-  data = inject(ReduxProvider)
+  count = injectSelector((state: RootState) => state.counter.value)
 }

projects/angular-redux/src/lib/inject-selector.ts

@@ -1,3 +1,30 @@
-export function injectSelector() {
+import { EqualityFn } from './types'
+import { inject } from '@angular/core'
+import { ReduxProvider } from './provider'
 
+export interface UseSelectorOptions<Selected = unknown> {
+  equalityFn?: EqualityFn<Selected>
+}
+
+const refEquality: EqualityFn<any> = (a, b) => a === b
+
+// TODO: Add support for `withTypes`
+export function injectSelector<TState = unknown, Selected = unknown>(
+  selector: (state: TState) => Selected,
+  equalityFnOrOptions?: EqualityFn<Selected> | UseSelectorOptions<Selected>,
+): Selected {
+  const reduxContext = inject(ReduxProvider);
+
+  // const { equalityFn = refEquality } =
+  //   typeof equalityFnOrOptions === 'function'
+  //     ? { equalityFn: equalityFnOrOptions }
+  //     : equalityFnOrOptions
+
+  const {
+    store
+  } = reduxContext
+
+  const selectedState = selector(store.getState())
+
+  return selectedState
 }

projects/angular-redux/src/lib/provide-redux.ts

@@ -1,5 +1,5 @@
-import { Injectable } from '@angular/core'
 import type { Action, Store, UnknownAction } from 'redux'
+import { ReduxProvider } from './provider'
 
 export interface ProviderProps<
   A extends Action<string> = UnknownAction,
@@ -11,18 +11,11 @@ export interface ProviderProps<
   store: Store<S, A>
 }
 
-
-@Injectable()
-export class ReduxProvider<A extends Action<string> = UnknownAction, S = unknown> {
-  constructor(private store: Store<S, A>) {
-  }
-  message = 'Hello, world'
-}
-
 export function provideRedux<A extends Action<string> = UnknownAction, S = unknown>({
   store
 }: ProviderProps<A, S>) {
-  return [
-    new ReduxProvider<A, S>(store)
-  ]
+  return [{
+    provide: ReduxProvider,
+    useValue: new ReduxProvider(store)
+  }]
 }

projects/angular-redux/src/lib/provider.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core'
+import type { Action, Store, UnknownAction } from 'redux'
+
+@Injectable()
+export class ReduxProvider<A extends Action<string> = UnknownAction, S = unknown> {
+  constructor(public store: Store<S, A>) {
+  }
+}

projects/angular-redux/src/lib/types.ts

@@ -0,0 +1 @@
+export type EqualityFn<T> = (a: T, b: T) => boolean