Create a queue of Ajax requests with redux-observable and group the results.

Shane Osbourne
InstructorShane Osbourne

Share this video with your friends

Send Tweet

With redux-observable, we have the power of RxJS at our disposal - this means tasks that would otherwise be complicated and imperative, become simple and declarative. In this lesson we’ll respond to an action by queuing up 2 separate Ajax requests that will execute sequentially. Then we’ll group the results from both into an array and produce a single action from our epic that will save the data into the redux store

Gonzalo Pozzo
Gonzalo Pozzo
~ 3 years ago

I'm trying with this code

import { fetchStories } from "../actions"

const topStories = ``
const story = id =>

const fetchStoriesEpic = action$ =>
    .switchMap(() => Observable.ajax.getJSON(topStories))
    .map(ids => ids.slice(0, 5))
    .map(ids =>
    .map(urls =>
    .mergeMap(reqs => Observable.forkJoin(reqs))

export default fetchStoriesEpic

And getting Uncaught TypeError: Cannot create property 'X-Requested-With' on number '1'

Any idea what it could be?

EDIT: Solved, it looks like when doing .map(urls => a second argument is passed to Observable.ajax.getJSON and breaks the implementation

Param Singh
Param Singh
~ 3 years ago

Why did you use mergeMap during forkJoin in the code?