Cannot propagate a value after mergeMap with Redux Observable

Question

I have the very basic code below (totally functional), that you can find here as well:

https://stackblitz.com/edit/typescript-mergemap-deprecated?file=index.ts

import { merge, of } from "rxjs";
import { mergeMap, map, tap } from "rxjs/operators";

const loadQuestion = () =>
  new Promise(resolve => resolve({
    title: 'How are you?',
    options: [ 'Excellent', 'Good', 'Bad' ],
  }))
;

const action$ = of({
  payload: {
    eventName: 'AskQuestionEvent'
  }
});

action$.pipe(
  mergeMap(action => merge(
    of(action).pipe(
      tap(({ payload: eventName }) => {
        console.log(eventName);
      }),
      map(({ payload: { eventName} }) => eventName),
      mergeMap(() => loadQuestion(), (eventName, questionImport) => ({
        eventName,
        questionImport
      })),
      map(({ eventName, questionImport }) => ({
        eventName,
        question: questionImport
      })),
      tap(({ eventName, question }) => {
        console.log(eventName);
        console.log(question);
      }),
    ),
  )),
).subscribe();

It works as expected but my problem is that the inner mergeMap seems to be deprecated.

I'm getting the error:

@deprecated — resultSelector no longer supported, use inner map instead

as you can see on the image below:

Any idea on how to get rid of that deprecation warning?

If possible, could you please, fork my StackBlitz above and apply your approach?

Thank you in advance!

Answer 1

To get rid of deprecation warning, you need to stop using resultSelector param.

Your code with resultSelector:

mergeMap(() => loadQuestion(), (eventName, questionImport) => ({
  eventName,
  questionImport
})),

Updated code without: StackBlitz

mergeMap(eventName => from(loadQuestion()).pipe(
  map(questionImport => ({eventName, questionImport}))
)),

P.S. - You don't need your second map if you just rename your questionImport to just question: StackBlitz #2.