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

Share this video with your friends

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

~ 7 years ago

I'm trying with this code


import { fetchStories } from "../actions"

const topStories = `https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty`
const story = id =>
  `https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`

const fetchStoriesEpic = action$ =>
  action$
    .ofType(fetchStories.type)
    .switchMap(() => Observable.ajax.getJSON(topStories))
    .map(ids => ids.slice(0, 5))
    .map(ids => ids.map(story))
    .map(urls => urls.map(Observable.ajax.getJSON))
    .mergeMap(reqs => Observable.forkJoin(reqs))
    .do(console.log)
    .ignoreElements()

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 => urls.map(Observable.ajax.getJSON)) a second argument is passed to Observable.ajax.getJSON and breaks the implementation

Param Singh

~ 7 years ago

Why did you use mergeMap during forkJoin in the code?