feat(store): expose abort controller on state context

ngxs · Nov 3, 2024 · 607b72a · 607b72a
1 parent f22f4cb
commit 607b72a
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 5 deletions.
diff --git a/packages/hmr-plugin/src/internal/hmr-state-context-factory.ts b/packages/hmr-plugin/src/internal/hmr-state-context-factory.ts
@@ -21,6 +21,7 @@ export class HmrStateContextFactory<T, S> {
    */
   public createStateContext(): StateContext<S> {
     return {
+      abortController: new AbortController(),
       dispatch: actions => this.store!.dispatch(actions),
       getState: () => <S>this.store!.snapshot(),
       setState: val => {

diff --git a/packages/store/src/internal/state-context-factory.ts b/packages/store/src/internal/state-context-factory.ts
@@ -23,6 +23,7 @@ export class StateContextFactory {
     const root = this._internalStateOperations.getRootStateOperations();
 
     return {
+      abortController: new AbortController(),
       getState(): T {
         const currentAppState = root.getState();
         return getState(currentAppState, path);

diff --git a/packages/store/src/internal/state-factory.ts b/packages/store/src/internal/state-factory.ts
@@ -25,7 +25,9 @@ import {
   mergeMap,
   takeUntil,
   finalize,
-  Observable
+  Observable,
+  fromEvent,
+  merge
 } from 'rxjs';
 
 import { NgxsConfig } from '../symbols';
@@ -345,7 +347,7 @@ export class StateFactory implements OnDestroy {
     const { dispatched$ } = this._actions;
     for (const actionType of Object.keys(actions)) {
       const actionHandlers = actions[actionType].map(actionMeta => {
-        const cancelable = !!actionMeta.options.cancelUncompleted;
+        const cancellable = !!actionMeta.options.cancelUncompleted;
 
         return (action: any) => {
           const stateContext = this._stateContextFactory.createStateContext(path);
@@ -384,9 +386,13 @@ export class StateFactory implements OnDestroy {
               defaultIfEmpty(undefined)
             );
 
-            if (cancelable) {
-              const notifier$ = dispatched$.pipe(ofActionDispatched(action));
-              result = result.pipe(takeUntil(notifier$));
+            if (cancellable) {
+              const cancelled = merge(
+                dispatched$.pipe(ofActionDispatched(action)),
+                fromEvent(stateContext.abortController.signal, 'abort')
+              );
+
+              result = result.pipe(takeUntil(cancelled));
             }
 
             result = result.pipe(

diff --git a/packages/store/src/symbols.ts b/packages/store/src/symbols.ts
@@ -99,6 +99,11 @@ export { StateOperator };
  * State context provided to the actions in the state.
  */
 export interface StateContext<T> {
+  /**
+   * Abort controller provided for the individual action.
+   */
+  abortController: AbortController;
+
   /**
    * Get the current state.
    */