Injector demo

[crutchcorn]

This PR adds an example of how to add support for injecting services and such in an async thunk reducer.

@Component({ selector: 'app-root', standalone: true, // ... }) export class AppComponent { injector = inject(EnvironmentInjector); dispatch = injectDispatch<AppDispatch>(); incrementByRandomNumber = () => { this.dispatch(incrementByRandomNumber({ injector: this.injector })); }; // ... }

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'; import { inject } from '@angular/core'; import { RandomNumberService } from '../services/random-number.service'; import { asyncRunInInjectionContext, RunInInjectionContextProps, } from '../utils/async-run-in-injection-context'; export const incrementByRandomNumber = createAsyncThunk( 'counter/incrementByAmountFromService', (arg: RunInInjectionContextProps<{}>, _thunkAPI) => { return asyncRunInInjectionContext(arg.injector, async () => { const service = inject(RandomNumberService); const newCount = await service.getRandomNumber(); return newCount; }); }, );

Where asyncRunInInjectionContext is provided as a small in-house utility:

import { EnvironmentInjector, runInInjectionContext } from '@angular/core'; export const asyncRunInInjectionContext = <TReturn>( injector: EnvironmentInjector, fn: () => Promise<TReturn>, ) => { return new Promise<TReturn>((resolve, reject) => { runInInjectionContext(injector, () => { fn() .then((value) => { resolve(value); }) .catch((error) => { reject(error); }); }); }); }; export type RunInInjectionContextProps< T extends object, > = T & { injector: EnvironmentInjector; };

Addresses #12

[netlify]

✅ Deploy Preview for angular-redux-docs canceled.

Name	Link
🔨 Latest commit	66be8c7
🔍 Latest deploy log	https://app.netlify.com/sites/angular-redux-docs/deploys/66f0dd695a61e9000886e258