Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt, bekijk dan ons cookiebeleid.

Meer informatie
Toon posts:

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

Pagina: 1
Acties:

Vraag


  • Amras
  • Registratie: januari 2003
  • Laatst online: 21:24
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


  • Amras
  • Registratie: januari 2003
  • Laatst online: 21:24
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! :|


Apple iPhone 11 Microsoft Xbox Series X LG OLED C9 Google Pixel 4 CES 2020 Samsung Galaxy S20 4G Sony PlayStation 5 Nintendo Switch Lite

'14 '15 '16 '17 2018

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2020 Hosting door True