fix(store): run plugins in injection context

In this commit, we enable plugin functions to run within the injection context. This allows plugin
functions (but not classes) to call `inject` and access dependencies.

Additionally, we've moved `compose` to the `Dispatcher` class since it was only used once.
Keeping it in the `Dispatcher` ensures it isn't used elsewhere and can be safely inlined if needed.

CHANGELOG.md

@@ -6,7 +6,7 @@ $ npm install @ngxs/store@dev
 
 ### To become next patch version
 
-- ...
+- Fix(store): Run plugins in injection context [#2256](https://github.com/ngxs/store/pull/2256)
 
 ### 18.1.5 2024-11-12
 

packages/store/src/internal/dispatcher.ts

@@ -1,11 +1,10 @@
-import { Injectable, NgZone } from '@angular/core';
+import { inject, Injectable, Injector, NgZone, runInInjectionContext } from '@angular/core';
 import { EMPTY, forkJoin, Observable, of, Subject, throwError } from 'rxjs';
 import { exhaustMap, filter, map, shareReplay, take } from 'rxjs/operators';
 
 import { getActionTypeFromInstance } from '@ngxs/store/plugins';
 import { ɵPlainObject, ɵStateStream } from '@ngxs/store/internals';
 
-import { compose } from '../utils/compose';
 import { ActionContext, ActionStatus, InternalActions } from '../actions-stream';
 import { PluginManager } from '../plugin-manager';
 import { InternalNgxsExecutionStrategy } from '../execution/internal-ngxs-execution-strategy';
@@ -23,6 +22,8 @@ export class InternalDispatchedActionResults extends Subject<ActionContext> {}
 
 @Injectable({ providedIn: 'root' })
 export class InternalDispatcher {
+  private _injector = inject(Injector);
+
   constructor(
     private _ngZone: NgZone,
     private _actions: InternalActions,
@@ -72,7 +73,7 @@ export class InternalDispatcher {
     const prevState = this._stateStream.getValue();
     const plugins = this._pluginManager.plugins;
 
-    return compose([
+    return compose(this._injector, [
       ...plugins,
       (nextState: any, nextAction: any) => {
         if (nextState !== prevState) {
@@ -117,3 +118,33 @@ export class InternalDispatcher {
       .pipe(shareReplay());
   }
 }
+
+type StateFn = (...args: any[]) => any;
+
+/**
+ * Composes a array of functions from left to right. Example:
+ *
+ *      compose([fn, final])(state, action);
+ *
+ * then the funcs have a signature like:
+ *
+ *      function fn (state, action, next) {
+ *          console.log('here', state, action, next);
+ *          return next(state, action);
+ *      }
+ *
+ *      function final (state, action) {
+ *          console.log('here', state, action);
+ *          return state;
+ *      }
+ *
+ * the last function should not call `next`.
+ */
+const compose =
+  (injector: Injector, funcs: StateFn[]) =>
+  (...args: any[]) => {
+    const curr = funcs.shift()!;
+    return runInInjectionContext(injector, () =>
+      curr(...args, (...nextArgs: any[]) => compose(injector, funcs)(...nextArgs))
+    );
+  };

packages/store/tests/plugins.spec.ts

@@ -1,3 +1,4 @@
+import { assertInInjectionContext } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { NgxsModule, NGXS_PLUGINS, Store } from '@ngxs/store';
 import { tap } from 'rxjs/operators';
@@ -16,6 +17,8 @@ describe('Plugins', () => {
       action: any,
       next: (state: any, action: any) => Observable<any>
     ) {
+      assertInInjectionContext(logPlugin);
+
       if (action.constructor && action.constructor.type === 'Foo') {
         pluginInvoked++;
       }