Redux-Observable单个Epic触发多Action报错求助

Hey there! Let's break down this issue you're hitting—this error almost always means your epic isn't returning a valid Observable stream somewhere, which is a common gotcha when working with Subjects and file upload flows. Let's walk through how to fix it.

First, Let's Diagnose the Root Cause #

The error TypeError: You provided an invalid object where a stream was expected pops up when redux-observable receives something that isn't an Observable, Subject, or other stream-compatible type from your epic. For your file upload use case, this usually happens if:

• You're returning a raw action object instead of wrapping it in an Observable
• Your Subject isn't properly set up or you're not listening to it correctly
• You're missing a critical RxJS operator that keeps the stream alive

Step-by-Step Solution #

Let's build a working epic that listens to your file upload Subject and dispatches the right Redux actions.

1. Ensure Your Subject is Properly Set Up

First, double-check your Subject import and initialization (make sure it's from RxJS):

import { Subject } from 'rxjs';

// Create a single instance of your Subject for file upload events
export const fileUploadSubject = new Subject();

When your file processing code triggers events, make sure you're calling next() with a structured event object:

// Example: In your file upload service
fileUploadSubject.next({
  type: 'UPLOAD_START',
  payload: { fileName: 'photo.jpg' }
});

fileUploadSubject.next({
  type: 'UPLOAD_PROGRESS',
  progress: 65 // Percentage complete
});

2. Write the Epic to Listen to the Subject

Your epic needs to listen to the Subject and map each event to a Redux action—and it must return an Observable stream:

import { ofType } from 'redux-observable';
import { of, EMPTY } from 'rxjs';
import { map, mergeMap } from 'rxjs/operators';
import { fileUploadSubject } from './your-file-service';

export const fileUploadEpic = () => {
  // Listen to events from our Subject
  return fileUploadSubject.pipe(
    mergeMap(event => {
      // Map each upload event to the corresponding Redux action
      switch (event.type) {
        case 'UPLOAD_START':
          return of({ 
            type: 'FILE_UPLOAD_START', 
            payload: event.payload 
          });
        case 'UPLOAD_PROGRESS':
          return of({ 
            type: 'FILE_UPLOAD_PROGRESS', 
            payload: event.progress 
          });
        case 'UPLOAD_SUCCESS':
          return of({ 
            type: 'FILE_UPLOAD_SUCCESS', 
            payload: event.serverResponse 
          });
        case 'UPLOAD_ERROR':
          return of({ 
            type: 'FILE_UPLOAD_ERROR', 
            payload: event.errorMessage 
          });
        default:
          // Return an empty stream for unknown events to avoid breaking the epic
          return EMPTY;
      }
    })
  );
};

3. Common Mistakes to Avoid

• Don't return raw action objects: Always wrap actions in of() (or another Observable creator like concat() if you need multiple actions at once).
• Don't forget to handle all event types: The default case returning EMPTY prevents the epic from crashing if an unexpected event is emitted.
• Ensure your Subject is a single instance: If you create a new Subject every time you upload, the epic won't be listening to the right stream.

Bonus: Triggering Uploads via Redux Actions #

If you want to kick off the upload by dispatching a Redux action (instead of directly calling your service), modify the epic to listen for that action first:

export const fileUploadEpic = (action$) => {
  return action$.pipe(
    ofType('INITIATE_FILE_UPLOAD'),
    mergeMap(action => {
      // Call your upload service, which uses the Subject to emit events
      yourFileUploadService.startUpload(action.payload.file);
      
      // Return the stream from our Subject to map events to actions
      return fileUploadSubject.pipe(
        map(event => {
          // Same switch/case logic as before
        })
      );
    })
  );
};

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