Redux thunk - Nesting dispatched functions / actions

Question

I'm using redux-thunk to perform async actions in my react app, like so:

export const fetchImages = (objects) => dispatch => {
   const promises = objects.map(obj => axios
       .get(`${API_URL}/files/${obj.img ? vendor.img : 'default.png'}`, {responseType: 'arraybuffer'})
       .then( res => obj.imgData = 'data:;base64,' + convertArrayBufferToBase64(res.data))
   );
   return Promise.all(promises).then (() => Promise.resolve(objects));
}

this works entirely fine when I use it in any of my components. However if I use it in another action like so:

export const fetchAllObjects = () => dispatch => axios.get(`${API_URL}/objects?limit=50`)
   .then(res => fetchImages(res.data.docs).then(objects => 
       dispatch({
           type: FETCH_ALL_OBJECTS,
           payload: objects
       });
   ));

it fails. I expect it to return a promise, however it returns "dispatch => ..." and hence the then() fails on the returned value.

Melchia Melchia · Accepted Answer · 2019-11-10T22:56:12

I just noticed that fetchImages is a function that returns a function:

export const fetchAllObjects = () => dispatch => axios.get(`${API_URL}/objects?limit=50`)
   .then(res => fetchImages(res.data.docs)(dispatch).then(objects => 
       dispatch({
           type: FETCH_ALL_OBJECTS,
           payload: objects
       });
   ));

Redux thunk - Nesting dispatched functions / actions

1 Answers