initialization in async reduce

Question

  const handleFileChange = async (e) => {
        const target = e?.target?.files;
        const attachments = await Array.from(target).reduce(async (acum, file) => {
            file.id = uniqid();
            // const format = file.name.split('.').pop();
            // if (IMAGE_FORMATS.includes(format)) {
            setIsLoading(true);
            if (file.type.startsWith('image/')) {
                const response = await channel.sendImage(file);
                file.src = response.file;
                acum.images.push(file);
            } else {
                const response = await channel.sendFile(file);
                file.src = response.file;
                acum.files.push(file);
            }
            setIsLoading(false);
            return acum;
        }, Promise.resolve({ files: [], images: [] }));
        setFilesList(prev => {
            console.log('files', [...prev, ...attachments.files]);
            return [...prev, ...attachments.files];
        });
        setImagesList(prev => {
            console.log('images', [...prev, ...attachments.images]);
            return [...prev, ...attachments.images];
        });
    };

In the above code I got the following error It looks it's cause by my initialization of array, but how should I address it?

Why are you trying to use Promises here (your example doesn't do anything asynchronous)? If you remove the `async`/`await` and `Promise.resolve()` it should work as expected — Nick Parsons, Jun 13 '22 at 09:22
There isn't anything async happening. What's with all the `async` and `await`s? — VLAZ, Jun 13 '22 at 09:24
`Promise.resolve()` returns a Promise. So actually you are not passing `{ files: [] ...}` as initial value but a Promise. And a promise doesn't have a `files` property ... — derpirscher, Jun 13 '22 at 09:26
`Array.reduce` isn't aware of async functions and doesn't await or handle them. You can build a promise chain with it though: `.reduce((a, f) => a.then(... => f), Promise.resolve())`. — deceze, Jun 13 '22 at 09:26
Also, why use a `reduce` over a simple loop? Doesn't seem like it's any simpler. — VLAZ, Jun 13 '22 at 09:26

Nick Parsons · Accepted Answer · 2022-06-13T13:02:27.957

An async function returns Promise, which makes it difficult to work with when using .reduce() as you would need to await your accumulator each iteration to get your data. As an alternative, you can create an array of Promises using the mapper function of Array.from() (which you can think of as using .map() directly after Array.from()). The idea here is that the map will trigger multiple asynchronous calls for each file by using sendImage/sendFile. These calls will run in parallel in the background. The value that we return from the mapping function will be a Promise that notifies us when the asynchronous call has successfully completed (once it resolves). Moreover, the mapping function defines what the promise resolves with, in our case that is the new object with the src property:

const isImage = file => file.type.startsWith('image/');
const filePromises = Array.from(target, async file => {
  const response = await (isImage(file) ? channel.sendImage(file) : channel. sendFile(file));
  return {...file, type: file.type, src: response.file};
});

Above filePromises is an array of Promises (as the async mapper function returns a Promise implicitly). We can use Promise.all() to wait for all of our Promises to resolve. This is faster than performing each asynchronous call one by one and only moving to the next once we've waited for the previous to complete:

setIsLoading(true); // set loading to `true` before we start waiting for our asynchronous work to complete
const fileObjects = await Promise.all(filePromises);
setIsLoading(false); // complete asynchronous loading/waiting

Lastly, fileObjects is an array that contains all objects, both files and images. We can do one iteration to partition this array into seperate arrays, one for images, and one for files:

const attachments = {files: [], images: []};
for(const fileObj of fileObjects) {
  if(isImage(fileObj)) 
    attachments.images.push(fileObj);
  else
    attachments.files.push(fileObj);
}

Hi, I use your code, got some errors, modified the question to reflect that — william007, Jun 13 '22 at 12:51
It seems like it's due to `{...file}` but overall your direction is great and well explained — william007, Jun 13 '22 at 13:00
@william007 thank you. The error could have been because the `type` property is on the prototype of your `file` object. I've modified my code add `type` as an own property to the newly returned object. Otherwise, you can also do `file.src = respons.file;` and then return `file` from the array.from mapper callback, but keep in mind this will also modify your original objects within `target`. — Nick Parsons, Jun 13 '22 at 13:04
Hi Nick, I have documented that here: https://stackoverflow.com/questions/72603404/spreading-the-object — william007, Jun 13 '22 at 13:08
@william007 FWIW, [here](https://jsfiddle.net/3veqsjo5/) was my answer to your question before it was closed. — Nick Parsons, Jun 13 '22 at 13:27

score 0 · Answer 2 · answered Jun 13 '22 at 11:53

The reduce is not really necessary at this point:

Here is a solution with a map to transform the elements in promises and then Promise.all to wait for the exectution

const channel = {
 sendImage: async (file) => {return {file}},
 sendFile: async (file) => {return {file}}
 }

const uniqid = () => Math.floor(Math.random() * 100);

const input = {
  target: {
    files: [{
      src: 'src',
      type: 'image/123'
      },
      {
      src: 'src',
      type: 'image/321'
      },
      {
      src: 'src',
      type: '123'
      },
      {
      src: 'src',
      type: '321'
      }]
    }
  }
  
const setIsLoading = () => null;
 

const handleFileChange = async (e) => {
  const target = e?.target?.files;

   setIsLoading(true);
    const attachments = {
      images: [],
      files: [],
    }
        
   await Promise.all(Array.from(target).map((file) => {
      file.id = uniqid();
      return new Promise(async (resolve) => {
        if (file.type.startsWith('image/')) {
            const response = await channel.sendImage(file);
            file.src = response.file;
            attachments.images.push(file);
        } else {
            const response = await channel.sendFile(file);
            file.src = response.file;
            attachments.files.push(file);
        }
        resolve();
      });
    }));
    
  setIsLoading(false)

  return attachments;
};

handleFileChange(input).then(res => console.log(res))

Note that using making a Promise executor function `async` is an anti-pattern: [Is it an anti-pattern to use async/await inside of a new Promise() constructor?](https://stackoverflow.com/q/43036229) — Nick Parsons, Jun 13 '22 at 12:06
Hi Greedo, I got error in ESlint saying that this is not a suggest practice, here's the details: https://eslint.org/docs/rules/no-async-promise-executor — william007, Jun 13 '22 at 12:52
It was for the sake of example, you can transform it to another Promise (or the promise to an async/await) — Greedo, Jun 13 '22 at 15:21

initialization in async reduce

2 Answers2