Create multiple Ajax requests and group the the results.
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 in parallel. 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.
Instructor: [00:00] To demonstrate how easy it is to compose multiple asynchronous computations with RxJS, let's re-purpose this application so that instead of a search term, we're just going to return random results based on how many are selected here. We're going to replace this import with a button instead, but first we need to create an action.
[00:27] We'll copy search and we'll just call it random. It won't need any input. Now that we have that constant and action creator, we can use this in the UI. We go back to the component and we'll replace this input with a button instead. It's type button and the on click handler will call the random function.
[01:07] We'll replace search here and we'll need to bring in the action creator below here. We'll just import that. Now you can see we have this random button. If we click it, you can see we get an action dispatched into the store and no results because we need to wire it up inside our epic.
[01:31] We can re-purpose this fetch beers epic. We'll add another helper function for the API URLs. The particular API that we're using supports this endpoint random. It just gives us back a single beer. Because we're allowing the user to select how many random beers we want, we'll have to compose together multiple AJAX requests. The first thing we need to do that is the per page configuration.
[02:00] We can say requests is a new array. We use the spread trick to create an array of a certain length. We'll say config.per_page. If the user selected five, this will become an array of five elements. We don't care about the elements, we just want to map that into five different AJAX requests. We can change this for the random helper and we don't need the second two arguments.
[02:28] Now this is going to be a plain array that inside it contains a number of observables that are not making AJAX requests yet. They're just sitting there waiting to be subscribed to. Then we just need something from Rx that can take this array of observables, subscribe to them all, and give us the results back in one array. For that we can use fork join.
[03:02] We mustn't forget to change search here to random and import that constant. We also won't need this filter anymore since we're not using the text input from the user. Let's check that in the browser. We can change this to three results, hit random and see what happens. You can see we have an error here. We made three API requests.
[03:29] If we look, each API request, even though we know it's only a single beer, it's given us back that single item in an array. The problem here is that fetch fulfilled action creator here expects beers as a flat array. What we end up sending in is a nested array. We can prove that if we just put console log and run the experiment again.
[04:07] You can see before the error we have an array of three elements and each element is itself an array. We can solve that problem before it gets anywhere near the reducer by changing what we return from this getJSON. Because that is just an observable, we can use the pluck operator to access the first element.
[04:36] This means that every observable from here will just return the inner beer from the response, it won't return the outer array. With that simple change there, we can try again. There you go, we make two separate API requests to the same URL. We group the results, and we showed them all together at once.