3 votes

Comprendre la fusion dans rxjs6 (et redux-observable en particulier)

Contexte : J'essaie d'utiliser redux-observable con rxjs v6 pour déclencher plusieurs actions après avoir récupéré une ressource.

Problème : Je peux déclencher une action unique après avoir récupéré la ressource sans problème ; mais ma tentative de déclencher des actions multiples me laisse perplexe. Plus précisément, ma tentative illustrée ci-dessous d'utiliser rxjs merge pour déclencher des actions multiples semble tellement standard et proche des exemples documentés ( voir par exemple ici ) que je n'arrive pas à comprendre où je me trompe. Voici une décomposition de mon code avec les types de script indiqués dans les commentaires ; j'ai simplifié les choses pour la clarté du problème :

import { from } from "rxjs"; 
import { merge, mergeMap, map } from "rxjs/operators";
import { AnyAction } from "redux";

... //Setup related to rxjs-observable epics

function myEpic(
    action$: Observable<AnyAction>,
    state$: any,
    {fetchPromisedStrings}: any
) {
    return action$.pipe(
        ofType('MY_ACTION'),
        mergeMap(
            action => 
{
    const demoAction1: AnyAction = {type:'FOO1', payload:'BAR1'};
    const demoAction2: AnyAction = {type:'FOO2', payload:'BAR2'};

    const w = from(fetchPromisedStrings())     //const w: Observable<string[]>
    const x = w.pipe( map(() => demoAction1)); //const x: Observable<AnyAction> 
    const y = w.pipe( map(() => demoAction2)); //const y: Observable<AnyAction> 

    //My attempt to merge observables:
    const z = merge(x,y); // const z: OperatorFunction<{}, {} | AnyAction>

    // return x; // Works :)
    // return y; // Works :)
    return z;    // Doesn't work :(
}   
        )
    );
}    

Ce code me donne l'erreur suivante lorsque j'essaie de return z :

TypeError: You provided 'function (source) { return source.lift.call(_observable_merge__WEBPACK_IMPORTED_MODULE_0__["merge"].apply(void 0, [source].concat(observables))); }' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable

Quel est donc le problème ? Je m'attendais à ce que merge dans le code ci-dessus pour prendre les deux Observable<AnyAction> et renvoient un seul Observable<AnyAction> (ou un type plus général compatible avec le type Observable<AnyAction> dont mon épopée a besoin pour fonctionner correctement). Au lieu de cela, j'obtiens un type opaque appelé OperatorFunction<{}, {} | AnyAction> qui, de toute évidence, n'est pas compatible avec Observable<AnyAction> . Quelqu'un pourrait-il, s'il vous plaît, éclaircir ma pensée ? Est-ce que merge n'est pas l'opérateur que je suis censé utiliser ici, ou est-ce que toute ma rxjs-v6 pour l'objectif (apparemment simple) de déclencher plusieurs actions après avoir récupéré une ressource promise ?

14voto

m1ch4ls Points 11

Votre code est correct, mais vous avez importé merge au lieu de merge usine observable

Il suffit de le faire :

import { merge } from 'rxjs';

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X