chore: add inject store support

Author: crutchcorn

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

@@ -1,5 +1,6 @@
-import { Component } from '@angular/core'
-import { injectSelector } from 'angular-redux'
+import { Component, effect, signal } from '@angular/core'
+import {injectSelector, injectDispatch, injectStore} from "angular-redux";
+import { decrement, increment } from './store/counter-slice'
 import { RootState } from './store'
 
 @Component({
@@ -8,10 +9,43 @@ import { RootState } from './store'
   imports: [],
   template: `
     <div>
-      {{count}}
+      <div>
+        <button
+          aria-label="Increment value"
+          (click)="dispatch(increment())"
+        >
+          Increment
+        </button>
+        <span>{{ count }}</span>
+        <button
+          aria-label="Decrement value"
+          (click)="dispatch(decrement())"
+        >
+          Decrement
+        </button>
+      </div>
     </div>
   `
 })
 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()
+  };
 }

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

@@ -1,3 +1,12 @@
-export function injectDispatch() {
+import type { Action, Dispatch, UnknownAction } from 'redux'
+import { ReduxProvider } from './provider'
+import { inject } from '@angular/core'
 
+// TODO: Add `withTypes` support
+export function injectDispatch<AppDispatch extends Dispatch<UnknownAction> = Dispatch<UnknownAction>>(): AppDispatch {
+  const context = inject(ReduxProvider)
+  // TODO: assertInInjectionContext
+  const { store } = context
+
+  return store.dispatch as AppDispatch
 }

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

@@ -0,0 +1,10 @@
+import { inject } from "@angular/core";
+import { ReduxProvider } from './provider'
+import type { Store, Action, UnknownAction } from 'redux'
+
+export function injectStore<A extends Action<string> = UnknownAction, S = unknown>(): Store<S, A> {
+  const context = inject(ReduxProvider)
+  // TODO: assertInInjectionContext
+  const { store } = context
+  return store
+}

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

@@ -14,8 +14,12 @@ export interface ProviderProps<
 export function provideRedux<A extends Action<string> = UnknownAction, S = unknown>({
   store
 }: ProviderProps<A, S>) {
-  return [{
+  return {
     provide: ReduxProvider,
-    useValue: new ReduxProvider(store)
-  }]
+    useValue: (() => {
+      const provider = new ReduxProvider<A, S>();
+      provider.store = store;
+      return provider;
+    })()
+  }
 }

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

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

projects/angular-redux/src/public-api.ts

@@ -4,4 +4,6 @@
 
 export * from './lib/inject-dispatch';
 export * from './lib/inject-selector';
+export * from './lib/inject-store';
 export * from './lib/provide-redux';
+export * from "./lib/provider"