Search code examples
javascriptasynchronouspromisereduxredux-middleware

How to read from to end-points with redux-auto


I am using redux-auto but in the "init" (point 5) I want to hit two Api end-points. The documentation does not cover this case.

There is an example

export default function (user, payload, stage, result) {

  switch(stage){
    case 'FULFILLED':
    return ?? result.config + result.userData ??
      break;
    case 'REJECTED':
    console.error("problem loading user from server",result)
      break;
    case 'PENDING':
    default :
      break;
  }
  return user;
}

export function action (payload){
  var endpoints = ['//localhost:3000/api/users/507f191e810c19729de860ea',
         'https://api.mysite.com/users/settings/8B76YUTBI']

  return fetch( ? )
}

How can I call two end-point when it only takes 1 promise?

I am working from the example where they load a user from an API https://github.com/codemeasandwich/redux-auto/tree/master/example

Thanks for any help


Solution

  • You need to handly each fetch within your action function. If you have an array of urls, you can use map to transform each to fetch calls.

    export function action (payload){
      var endpoints = ['//localhost:3000/api/users/507f191e810c19729de860ea',
         'https://api.mysite.com/users/settings/8B76YUTBI']
    
     return  Promise.all(endpoints.map(url => fetch(url).then(resp => resp.json())))
                .then(([userData,config])=>({userData,config}))
    
    }
    

    The above code is

    1. Map over endpoints string to create your Ajax calls
    2. Call json on the result of each fetch
    3. Then combine all responses using Promise.all
    4. Destructor the array into 2 variables
    5. Return a new Object with 2 properties

    result in you reduct function will now have userData, config