How do I map an array of objects to different objects (with different properties) in a Redux Slice?

Question

Trying to asynchronously filter and transform an array of objects that I receive from my backend. I'm using Redux with React to manage store. Here's what I have now in my slice.js:

...
export const getData = createAsyncThunk('foo/bar', async (address, thunkAPI) => {
    try {
        //returns an array of objects [{}, {}, ...]
        const allData = JSON.parse(await myService.getAllData(address));
        let newData = [];
        allData.forEach(async (data) => {
           if(*some filtering logic here*) {
               newData.push(await (fetch(data.uri).then(response => response.json())));
           }
        });
        return newData;
    } catch (error) {
        //handle error
    }
});

However, my newData array seems to be unpushable/marked as unextensible. It gives the error

Uncaught (in promise) TypeError: Cannot add property 0, object is not extensible
    at Array.push (<anonymous>)

Some of the other solutions to this error (React : cannot add property 'X', object is not extensible, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible) all mention React props/editing state variables, but I can't figure out why I cannot push to an empty array newData.

can you put the `await (fetch(data.uri).then(response => response.json()))` in a variable like this `const data = await (fetch(data.uri).then(response => response.json()))` then push data in the array `newData.push(data)` — free bug coding, Mar 25 '22 at 19:35

score 1 · Accepted Answer · answered Mar 25 '22 at 19:40

You cannot do async in forEach, so you need a plain old for loop

try {
        const allData = JSON.parse(await myService.getAllData(address));
        const newData = []; // not reassigning, use const
        for (let i = 0, n = allData.length; i < n; ++i) {
          if (*some filtering logic here*) {
            newData.push(await (fetch(data.uri).then(response => response.json())));
          }
        }
        return newData;
    }

This should work

score 1 · Answer 2 · answered Mar 25 '22 at 20:16

Hey There so with regards to your question here is another way you could achieve what you are looking to achieve let me know if this helps you out for future too maybe

try {
              //returns an array of objects [{}, {}, ...]
              const allData = JSON.parse(await myService.getAllData(address));
              let newData = [];
        // this will be an array of unresolved promises and then you can have them run in parallel with the promise all below
              const promises = allData.map((objectOfData) => fetch(objectOfData.uri))
                
    //this data will be the results
              const  data = Promise.all(promises)
    //do with the data what you want
              data.forEach((item) => {
                if(*some filtering logic here*) {
                   newData.push(item);
               }
    
              })
                return newData;
            } catch (error) {
                //handle error
            }

score 1 · Answer 3 · answered Mar 25 '22 at 21:11

As for why this happens: it's a timing issue.

Since you started the asynchronous side effect in sub-functions without ever awaiting them in the main thunk function, the thunk pretty much finished before anything of your fetch calls resolved. After that, you are copying that data into your store - and it gets frozen, so after that it cannot be modified any more.

=> wait in your thunk until actually all work is done.

How do I map an array of objects to different objects (with different properties) in a Redux Slice?

3 Answers3