title: How to make multiple HTTP requests with RxJS and merge the response into one payload and map it to another action?
body: <p>As per the title, I've been trying to figure out a way to make multiple HTTP calls from an action payload and basically merging all results into a single array and then map the result to another action as a payload.</p>
  
  <p>Here is my existing code, it works but it seems it seem not merging both responses and only cares about last response from the request's response, perhaps I'm using the wrong operator, I'm just picking up RxJS and trying different things to learn, hopefully somebody is able to explain where I'm going wrong.</p>
  
  <p>Any help or direction is much appreciated.</p>
  
  <pre><code>
  {
      type: 'FETCH_DATA',
      payload: {
          key: 'standings',
          value: [
                  'http://url-1',
                  'http://url-2'
          ],
      })
  }
  
  
  // The epic is listening to the above action
  
  const fetchDataEpic = action$ =&gt; action$.pipe(
      ofType('FETCH_DATA'),
      mergeMap(action =&gt; {
          const { key, value } = action.payload;
          if (Array.isArray(value) &amp;&amp; value.length) {
              const makeRequest = value.map((x, i) =&gt; ajax.getJSON(value[i]))
  
              return (
                  forkJoin(
                      makeRequest,
                      response =&gt; {
                          return ({
                              type: 'FETCH_DATA_SUCCEEDED',
                              payload: {
                                  key,
                                  value: response,
                              },
                          })
                      }
                  )
              )
          }
      })
  );
  </code></pre>
  
  <p>NOTE: Both request's response is in same JSON format with same properties, but different data.</p>
  
  <p>Thanks in advance</p>