[TS/Redux/Observables] Originele action in dispatch loop

Pagina: 1
Acties:

Vraag


Acties:
  • 0 Henk 'm!

  • Amras
  • Registratie: Januari 2003
  • Laatst online: 07-07 13:40
Om een polling functionaliteit in onze webapp te implementeren wil ik gebruik maken van redux-observables. Ik krijg echter het basisscenario niet werkend, omdat de action die het pollen moet starten steeds opnieuw aan naar de redux store gedispatcht wordt. Waarschijnlijk zie ik iets eenvoudigs over het hoofd, na een paar uur troubleshooten en experimenteren ben ik echter niets opgeschoten. Misschien zien jullie waar het probleem zit?

Hieronder de code, zoveel mogelijk uitgekleed. Ik heb de imports even achterwege gelaten om de snippets zo kort mogelijk te houden.

De Epic die uiteindelijk een API gaat pollen:
In de filter methode log ik of de verstuurde action de juiste is. Als ik de epic run dan zie je dat er netjes false wordt gelogd voor alle actions van een ander type. Komt er één action van type StartPollingExportJobs langs dan blijft hij (zonder delay) true printen in de console, deze lijkt dus steeds opnieuw aan de epic te worden aangeboden. Binnen een paar seconden hangt de browser.

De action in mapTo is een bogus action waarop verder niet geluisterd wordt, ik heb het ook geprobeerd met een andere action (StopPollingExportJobs) met - helaas - hetzelfde resultaat.
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
export const exportJobPollingEpic: Epic<IAction<void>, IAction<void>> = action$ => action$.pipe(
    filter(action => {
        const match = isType(action, StartPollingExportJobs);
        console.log(match);
        return match;
    },
    mapTo(() => ({ type: "Hallo "})),
));

export const rootEpic = combineEpics(
    exportJobPollingEpic,
);


Initialisatie
Hieronder de relevante delen van de store configuration.
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const epicMiddleware = createEpicMiddleware();

function configureStore() {
    // code removed.

    const middlewares = [ thunkMiddleware, logger, connectedRouter, epicMiddleware ];

     // code removed.   

    return createStore(rootReducer(history), composeEnhancers(applyMiddleware(...middlewares)));
}

const store = configureStore();
export default store;

epicMiddleware.run(rootEpic);


Het scenario lijkt mij redelijk simpel, vandaar dat ik verbaasd ben dat het niet werkt. Misschien dat jullie zien wat er mis gaat?

Alle reacties


Acties:
  • +1 Henk 'm!

  • Amras
  • Registratie: Januari 2003
  • Laatst online: 07-07 13:40
Na nog een half uur staren vanmorgen heb ik het probleem gevonden: het sluithaakje van de filter methode staat verkeerd, waardoor de mapTo methode het tweede argument wordt van de filter methode i.p.v. de pipe methode.

Geen compile error natuurlijk, want de filter methode heeft een tweede argument van type any. Leve frontend development! :|