如何在NGRX Store中覆写部分Action并适配移动端Native逻辑？

Great question! This is a common scenario when bridging Web apps (running in WebView) with Native iOS/Android logic, and we can solve it using NGRX's core features and RxJS streams—no if(window.nativeFlag) hacks required. The key idea is to create a controllable action pipeline where Native can opt to take over handling of specific actions, and the Web app will gracefully skip its own logic if Native intervenes.

Option 1: Meta Reducer + RxJS Subject for Action Interception #

Meta reducers sit between your action dispatch and the root reducer, making them perfect for intercepting actions before they reach your app's state logic. We'll use a RxJS Subject to broadcast actions to Native, and wait for a signal back to decide whether to proceed with the Web's reducer logic.

Step 1: Create a Native Interaction Service #

First, encapsulate the Web-Native communication in a service to keep things clean:

// src/app/core/services/native-interaction.service.ts
import { Injectable, NgZone } from '@angular/core';
import { Subject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class NativeInteractionService {
  // Broadcast actions that Native might want to handle
  private readonly actionIntercept$ = new Subject<{ action: any; resolve: (shouldProceed: boolean) => void }>();

  constructor(private ngZone: NgZone) {
    // Expose the subject to Native via window (only once, in a controlled way)
    this.ngZone.runOutsideAngular(() => {
      (window as any).nativeActionIntercept = {
        subscribe: (callback: (action: any) => void) => {
          this.actionIntercept$.subscribe(({ action }) => callback(action));
        },
        notifyCompletion: (actionType: string, shouldProceed: boolean) => {
          // Find the pending action and resolve it
          const pending = this.pendingActions.find(p => p.action.type === actionType);
          if (pending) {
            this.ngZone.run(() => pending.resolve(shouldProceed));
            this.pendingActions = this.pendingActions.filter(p => p !== pending);
          }
        }
      };
    });
  }

  private pendingActions: Array<{ action: any; resolve: (shouldProceed: boolean) => void }> = [];

  // Method to check if Native wants to handle an action
  shouldProceedWithAction(action: any): Observable<boolean> {
    return new Observable<boolean>(resolve => {
      this.pendingActions.push({ action, resolve });
      this.actionIntercept$.next({ action, resolve });
    });
  }
}

Step 2: Implement the Meta Reducer #

Now create a meta reducer that uses the service to check if Native wants to take over:

// src/app/core/store/meta-reducers/native-intercept.meta-reducer.ts
import { ActionReducer, MetaReducer } from '@ngrx/store';
import { NativeInteractionService } from '../services/native-interaction.service';
import { inject } from '@angular/core';
import { take } from 'rxjs';

export function nativeInterceptMetaReducer(reducer: ActionReducer<any>): ActionReducer<any> {
  return (state, action) => {
    // Define which actions Native can intercept (e.g., '[Collection] Add Book')
    const interceptableActions = ['[Collection] Add Book'];
    
    if (interceptableActions.includes(action.type)) {
      const nativeService = inject(NativeInteractionService);
      let shouldProceed = true;

      // Block until Native responds (use take(1) to complete the observable)
      nativeService.shouldProceedWithAction(action).pipe(take(1)).subscribe(proceed => {
        shouldProceed = proceed;
      });

      // If Native says don't proceed, return the current state (skip reducer logic)
      if (!shouldProceed) {
        return state;
      }
    }

    // Otherwise, let the reducer handle the action as normal
    return reducer(state, action);
  };
}

export const metaReducers: MetaReducer[] = [nativeInterceptMetaReducer];

Step 3: Native Side Integration #

On the Native side (iOS/Android), you'll subscribe to the exposed subject and notify completion when done:

// iOS Example (Swift)
if let webView = webView {
  webView.evaluateJavaScript("window.nativeActionIntercept.subscribe((action) => { window.nativeActionReceived(action); })", completionHandler: nil)
  
  // Then, implement a handler for when Native receives the action
  // When you've handled the Native logic, call:
  webView.evaluateJavaScript("window.nativeActionIntercept.notifyCompletion('[Collection] Add Book', false)", completionHandler: nil)
  // Pass `false` to tell Web to skip its logic; pass `true` if you want Web to proceed
}

Option 2: NGRX Effects + TakeUntil for Business Logic Interception #

If you want to intercept at the effect level (instead of the reducer), you can use RxJS's takeUntil to cancel the Web's effect logic if Native takes over.

Step 1: Update the Native Interaction Service #

Add a completion subject for specific action types:

// In NativeInteractionService
private readonly actionCompleted$ = new Subject<{ actionType: string; handledByNative: boolean }>();

// Expose a way to listen for completion of a specific action
waitForNativeCompletion(actionType: string): Observable<boolean> {
  return this.actionCompleted$.pipe(
    filter(event => event.actionType === actionType),
    map(event => event.handledByNative),
    take(1)
  );
}

// Native will call this to notify completion
notifyActionCompleted(actionType: string, handledByNative: boolean) {
  this.actionCompleted$.next({ actionType, handledByNative });
}

Step 2: Modify Your Effect #

Update the effect that handles the action to wait for Native's signal:

// src/app/collection/store/effects/collection.effects.ts
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { CollectionActions } from './actions';
import { of, EMPTY } from 'rxjs';
import { switchMap, takeUntil, catchError } from 'rxjs/operators';
import { NativeInteractionService } from '../../core/services/native-interaction.service';

@Injectable()
export class CollectionEffects {
  addBook$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(CollectionActions.addBook),
      switchMap(action => {
        // Notify Native about the action
        this.nativeInteractionService.notifyNative(action);
        
        // Wait for Native's response
        return this.nativeInteractionService.waitForNativeCompletion(action.type).pipe(
          switchMap(handledByNative => {
            if (handledByNative) {
              // Native handled it—return EMPTY to skip Web's effect logic
              return EMPTY;
            } else {
              // Proceed with Web's normal logic
              return this.collectionService.addBook(action.book).pipe(
                map(() => CollectionActions.addBookSuccess()),
                catchError(() => of(CollectionActions.addBookFailure()))
              );
            }
          })
        );
      })
    );
  });

  constructor(
    private actions$: Actions,
    private collectionService: CollectionService,
    private nativeInteractionService: NativeInteractionService
  ) {}
}

Key Benefits of These Approaches #

• No messy conditionals: Web code doesn't need to check for window.nativeFlag—it just reacts to streams.
• Decoupled architecture: Native and Web communicate via controlled streams, not global hacks.
• Flexible control: Native can choose to handle any interceptable action, and Web will adapt automatically.
• NGRX/RxJS-native: Uses core features of both libraries, so it fits seamlessly into your existing architecture.

内容的提问来源于stack exchange，提问作者Bunyamin Coskuner