reactjs - passing multiple items in an object as a payload in react-redux -

i have action called fetchratings, uses axios http client create multiple consts, , pull data , manipulate it. want pass of these consts object. code below:

import axios 'axios';  const instance = axios.create({ headers: { 'x-api-version': 2} }); const base_url = 'http://api.ratings.food.gov.uk/establishments?pagesize=5000&pagenumber=1&localauthorityid=' export const fetch_ratings = 'fetch_ratings';  export function fetchratings(authorityid) {    const pass =   instance.get(`${base_url + authorityid}`).then(function(response) {     return math.round(response.data.establishments.reduce(function (n, establishment) {       return n + (establishment.ratingvalue === "pass");     }, 0) / response.data.establishments.length * 100)   })    const fail =   instance.get(`${base_url + authorityid}`).then(function(response) {     return math.round(response.data.establishments.reduce(function (n, establishment) {       return n + (establishment.ratingvalue === "improvement required");     }, 0) / response.data.establishments.length * 100)   })    const exempt =   instance.get(`${base_url + authorityid}`).then(function(response) {     return math.round(response.data.establishments.reduce(function (n, establishment) {       return n + (establishment.ratingvalue === "exempt");     }, 0) / response.data.establishments.length * 100)   })    return {     type: fetch_ratings,     payload: {pass: pass, fail: fail, exempt: exempt}   }; } 

i have ratings reducer, looks this:

import { fetch_ratings } '../actions/fetch_ratings';  export default function(state = {}, action) {   switch(action.type) {     case fetch_ratings:       return action.payload ;   }   return state; } 

when call action in code, props in react console this:

props dispatch: fn() ratings: {…} exempt: promise{…} fail: promise{…} pass: promise{…} 

any idea why i'm not able push different items props here? structuring incorrectly?

redux-promise handle promise but

{     pass : promise,     fail : promise,     exempt : promise, } 

is not promise. have convert single promise redux-promise can handle it. think need promise.all task. try like:

const payload = promise.all([ pass, fail, exempt ])                 .then( ([ pass, fail, exempt ]) => {                    return { pass, fail, exempt }                 });  // payload single promise , can pass on normally.  return {     type: fetch_ratings,     payload: payload }; 

promise.all convert multiple promises single promise , resolve if promise resolve, else rejected.

reference: read more promise.all()