feat: got it working!

Author: crutchcorn

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

@@ -1,5 +1,5 @@
-import { Component, effect, signal } from '@angular/core'
-import {injectSelector, injectDispatch, injectStore} from "angular-redux";
+import { Component } from '@angular/core'
+import {injectSelector, injectDispatch} from "angular-redux";
 import { decrement, increment } from './store/counter-slice'
 import { RootState } from './store'
 
@@ -16,7 +16,7 @@ import { RootState } from './store'
         >
           Increment
         </button>
-        <span>{{ count }}</span>
+        <span>{{ count() }}</span>
         <button
           aria-label="Decrement value"
           (click)="dispatch(decrement())"
@@ -30,22 +30,6 @@ import { RootState } from './store'
 export class AppComponent {
   count = injectSelector((state: RootState) => state.counter.value)
   dispatch = injectDispatch()
-
-  store = injectStore()
-
-  val = signal(0);
-  _test = effect(() => {
-    if (this.val()) {
-      console.log((this.store.getState() as any).counter.value)
-    }
-  })
-
-  increment = () => {
-    setTimeout(() => this.val.set(this.val() + 1), 100)
-    return increment()
-  };
-  decrement = () => {
-    setTimeout(() => this.val.set(this.val() + 1), 100)
-    return decrement()
-  };
+  increment = increment
+  decrement = decrement
 }

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

@@ -1,5 +1,5 @@
 import { EqualityFn } from './types'
-import { inject } from '@angular/core'
+import { effect, inject, Signal, signal } from '@angular/core'
 import { ReduxProvider } from './provider'
 
 export interface UseSelectorOptions<Selected = unknown> {
@@ -12,7 +12,7 @@ const refEquality: EqualityFn<any> = (a, b) => a === b
 export function injectSelector<TState = unknown, Selected = unknown>(
   selector: (state: TState) => Selected,
   equalityFnOrOptions?: EqualityFn<Selected> | UseSelectorOptions<Selected>,
-): Selected {
+): Signal<Selected> {
   const reduxContext = inject(ReduxProvider);
 
   // const { equalityFn = refEquality } =
@@ -24,7 +24,17 @@ export function injectSelector<TState = unknown, Selected = unknown>(
     store
   } = reduxContext
 
-  const selectedState = selector(store.getState())
+  const selectedState = signal(selector(store.getState()))
+
+  effect((onCleanup) => {
+    const unsubscribe = store.subscribe(() => {
+      selectedState.set(selector(store.getState()))
+    })
+
+    onCleanup(() => {
+      unsubscribe()
+    })
+  })
 
   return selectedState
 }

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

@@ -1,5 +1,5 @@
 import type { Action, Store, UnknownAction } from 'redux'
-import { ReduxProvider } from './provider'
+import { createReduxProvider, ReduxProvider } from './provider'
 
 export interface ProviderProps<
   A extends Action<string> = UnknownAction,
@@ -16,10 +16,6 @@ export function provideRedux<A extends Action<string> = UnknownAction, S = unkno
 }: ProviderProps<A, S>) {
   return {
     provide: ReduxProvider,
-    useValue: (() => {
-      const provider = new ReduxProvider<A, S>();
-      provider.store = store;
-      return provider;
-    })()
+    useValue: createReduxProvider(store)
   }
 }

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

@@ -1,7 +1,26 @@
-import { Injectable } from '@angular/core'
+import { Injectable, OnDestroy } from '@angular/core'
 import type { Action, Store, UnknownAction } from 'redux'
+import { createSubscription } from './utils/Subscription'
 
 @Injectable({providedIn: null})
-export class ReduxProvider<A extends Action<string> = UnknownAction, S = unknown> {
+export class ReduxProvider<A extends Action<string> = UnknownAction, S = unknown> implements OnDestroy {
   store!: Store<S, A>;
+  subscription!: ReturnType<typeof createSubscription>
+
+  ngOnDestroy() {
+    this.subscription.tryUnsubscribe()
+    this.subscription.onStateChange = undefined
+  }
+}
+
+// TODO: Ideally this runs in the constructor, but DI doesn't allow us to pass items to the constructor?
+export function createReduxProvider<A extends Action<string> = UnknownAction, S = unknown>(store: Store<S, A>) {
+  const provider = new ReduxProvider<A, S>()
+  provider.store = store
+  const subscription = createSubscription(store)
+  provider.subscription = subscription
+  subscription.onStateChange = subscription.notifyNestedSubs
+  subscription.trySubscribe()
+
+  return provider
 }

projects/angular-redux/src/lib/utils/Subscription.ts

@@ -0,0 +1,183 @@
+import { defaultNoopBatch as batch } from './batch'
+
+// encapsulates the subscription logic for connecting a component to the redux store, as
+// well as nesting subscriptions of descendant components, so that we can ensure the
+// ancestor components re-render before descendants
+
+type VoidFunc = () => void
+
+type Listener = {
+  callback: VoidFunc
+  next: Listener | null
+  prev: Listener | null
+}
+
+function createListenerCollection() {
+  let first: Listener | null = null
+  let last: Listener | null = null
+
+  return {
+    clear() {
+      first = null
+      last = null
+    },
+
+    notify() {
+      batch(() => {
+        let listener = first
+        while (listener) {
+          listener.callback()
+          listener = listener.next
+        }
+      })
+    },
+
+    get() {
+      const listeners: Listener[] = []
+      let listener = first
+      while (listener) {
+        listeners.push(listener)
+        listener = listener.next
+      }
+      return listeners
+    },
+
+    subscribe(callback: () => void) {
+      let isSubscribed = true
+
+      const listener: Listener = (last = {
+        callback,
+        next: null,
+        prev: last,
+      })
+
+      if (listener.prev) {
+        listener.prev.next = listener
+      } else {
+        first = listener
+      }
+
+      return function unsubscribe() {
+        if (!isSubscribed || first === null) return
+        isSubscribed = false
+
+        if (listener.next) {
+          listener.next.prev = listener.prev
+        } else {
+          last = listener.prev
+        }
+        if (listener.prev) {
+          listener.prev.next = listener.next
+        } else {
+          first = listener.next
+        }
+      }
+    },
+  }
+}
+
+type ListenerCollection = ReturnType<typeof createListenerCollection>
+
+export interface Subscription {
+  addNestedSub: (listener: VoidFunc) => VoidFunc
+  notifyNestedSubs: VoidFunc
+  handleChangeWrapper: VoidFunc
+  isSubscribed: () => boolean
+  onStateChange?: VoidFunc | null
+  trySubscribe: VoidFunc
+  tryUnsubscribe: VoidFunc
+  getListeners: () => ListenerCollection
+}
+
+const nullListeners = {
+  notify() {},
+  get: () => [],
+} as unknown as ListenerCollection
+
+export function createSubscription(store: any, parentSub?: Subscription) {
+  let unsubscribe: VoidFunc | undefined
+  let listeners: ListenerCollection = nullListeners
+
+  // Reasons to keep the subscription active
+  let subscriptionsAmount = 0
+
+  // Is this specific subscription subscribed (or only nested ones?)
+  let selfSubscribed = false
+
+  function addNestedSub(listener: () => void) {
+    trySubscribe()
+
+    const cleanupListener = listeners.subscribe(listener)
+
+    // cleanup nested sub
+    let removed = false
+    return () => {
+      if (!removed) {
+        removed = true
+        cleanupListener()
+        tryUnsubscribe()
+      }
+    }
+  }
+
+  function notifyNestedSubs() {
+    listeners.notify()
+  }
+
+  function handleChangeWrapper() {
+    if (subscription.onStateChange) {
+      subscription.onStateChange()
+    }
+  }
+
+  function isSubscribed() {
+    return selfSubscribed
+  }
+
+  function trySubscribe() {
+    subscriptionsAmount++
+    if (!unsubscribe) {
+      unsubscribe = parentSub
+        ? parentSub.addNestedSub(handleChangeWrapper)
+        : store.subscribe(handleChangeWrapper)
+
+      listeners = createListenerCollection()
+    }
+  }
+
+  function tryUnsubscribe() {
+    subscriptionsAmount--
+    if (unsubscribe && subscriptionsAmount === 0) {
+      unsubscribe()
+      unsubscribe = undefined
+      listeners.clear()
+      listeners = nullListeners
+    }
+  }
+
+  function trySubscribeSelf() {
+    if (!selfSubscribed) {
+      selfSubscribed = true
+      trySubscribe()
+    }
+  }
+
+  function tryUnsubscribeSelf() {
+    if (selfSubscribed) {
+      selfSubscribed = false
+      tryUnsubscribe()
+    }
+  }
+
+  const subscription: Subscription = {
+    addNestedSub,
+    notifyNestedSubs,
+    handleChangeWrapper,
+    isSubscribed,
+    trySubscribe: trySubscribeSelf,
+    tryUnsubscribe: tryUnsubscribeSelf,
+    getListeners: () => listeners,
+  }
+
+  return subscription
+}

projects/angular-redux/src/lib/utils/batch.ts

@@ -0,0 +1,4 @@
+// Default to a dummy "batch" implementation that just runs the callback
+export function defaultNoopBatch(callback: () => void) {
+  callback()
+}