chore: add runInInjectionContextDemo

Author: crutchcorn

angular.json

@@ -125,6 +125,95 @@
           "builder": "@angular-devkit/build-angular:extract-i18n"
         }
       }
+    },
+    "angular-redux-injector-demo": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "projects/angular-redux-injector-demo",
+      "sourceRoot": "projects/angular-redux-injector-demo/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/angular-redux-injector-demo",
+            "index": "projects/angular-redux-injector-demo/src/index.html",
+            "browser": "projects/angular-redux-injector-demo/src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "projects/angular-redux-injector-demo/tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "projects/angular-redux-injector-demo/public"
+              }
+            ],
+            "styles": [
+              "projects/angular-redux-injector-demo/src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kB",
+                  "maximumError": "4kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "angular-redux-injector-demo:build:production"
+            },
+            "development": {
+              "buildTarget": "angular-redux-injector-demo:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "projects/angular-redux-injector-demo/tsconfig.spec.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "projects/angular-redux-injector-demo/public"
+              }
+            ],
+            "styles": [
+              "projects/angular-redux-injector-demo/src/styles.css"
+            ],
+            "scripts": []
+          }
+        }
+      }
     }
   }
 }

projects/angular-redux-injector-demo/public/favicon.ico

@@ -0,0 +1,27 @@
+import { Component, EnvironmentInjector, inject } from '@angular/core';
+import { injectSelector, injectDispatch } from '@reduxjs/angular-redux';
+import { incrementByRandomNumber } from './store/counter-slice';
+import { AppDispatch, RootState } from './store';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  template: `
+    <button (click)="incrementByRandomNumber()">
+      Increment by a random number
+    </button>
+    <p>{{ count() }}</p>
+    @if (isLoading()) {
+      <p>Loading...</p>
+    }
+  `,
+})
+export class AppComponent {
+  injector = inject(EnvironmentInjector);
+  count = injectSelector((state: RootState) => state.counter.value);
+  isLoading = injectSelector((state: RootState) => state.counter.isLoading);
+  dispatch = injectDispatch<AppDispatch>();
+  incrementByRandomNumber = () => {
+    this.dispatch(incrementByRandomNumber({ injector: this.injector }));
+  };
+}

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

@@ -0,0 +1,10 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRedux } from '@reduxjs/angular-redux';
+import { store } from './store';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRedux({ store }),
+  ],
+};

projects/angular-redux-injector-demo/src/app/app.config.ts

@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class RandomNumberService {
+  getRandomNumber() {
+    return new Promise<number>((resolve) => {
+      setTimeout(() => {
+        resolve(Math.floor(Math.random() * 100));
+      }, 1000);
+    });
+  }
+}

projects/angular-redux-injector-demo/src/app/services/random-number.service.ts

@@ -0,0 +1,54 @@
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import {
+  EnvironmentInjector,
+  inject,
+  runInInjectionContext,
+} from '@angular/core';
+import { RandomNumberService } from '../services/random-number.service';
+
+interface IncrementByAmountFromServiceProps {
+  injector: EnvironmentInjector;
+}
+
+export const incrementByRandomNumber = createAsyncThunk(
+  'counter/incrementByAmountFromService',
+  (arg: IncrementByAmountFromServiceProps, _thunkAPI) => {
+    return new Promise<number>((resolve, reject) => {
+      runInInjectionContext(arg.injector, () => {
+        const runValue = async () => {
+          const service = inject(RandomNumberService);
+          const newCount = await service.getRandomNumber();
+          return newCount;
+        };
+
+        runValue()
+          .then((value) => {
+            resolve(value);
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    });
+  },
+);
+
+export const counterSlice = createSlice({
+  name: 'counter',
+  initialState: {
+    value: 0,
+    isLoading: false,
+  },
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addCase(incrementByRandomNumber.fulfilled, (state, action) => {
+      state.isLoading = false;
+      state.value += action.payload;
+    });
+    builder.addCase(incrementByRandomNumber.pending, (state) => {
+      state.isLoading = true;
+    });
+  },
+});
+
+export default counterSlice.reducer;

projects/angular-redux-injector-demo/src/app/store/counter-slice.ts

@@ -0,0 +1,13 @@
+import { configureStore } from '@reduxjs/toolkit';
+import counterReducer from './counter-slice';
+
+export const store = configureStore({
+  reducer: {
+    counter: counterReducer,
+  },
+});
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>;
+// Inferred type: {counter: CounterState}
+export type AppDispatch = typeof store.dispatch;

projects/angular-redux-injector-demo/src/app/store/index.ts

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>AngularReduxInjectorDemo</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

projects/angular-redux-injector-demo/src/index.html

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));

projects/angular-redux-injector-demo/src/main.ts

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */