Node async map not excecuting properly inside redux action - reactjs

Question

I connect to an API which is returning data in this format:
[
{
"id": 23,
"name": "11:40AM July 2",
"airplayEnabled": false,
"airplayCodeEnabled": true,
"type": 0,
"groups": [
{
"id": 4,
"name": "Hallway",
"notes": "Any devices present in the hallway",
"_pivot_device_id": 23,
"_pivot_group_id": 4
},
{
"id": 5,
"name": "Middle school",
"notes": "In classrooms 6-8",
"_pivot_device_id": 23,
"_pivot_group_id": 5
}
],
"mac": "123456789ABC"
},
{
"id": 26,
"name": "1:54PM July 5",
"airplayEnabled": false,
"airplayCodeEnabled": true,
"type": 0,
"groups": [
{
"id": 5,
"name": "Middle school",
"notes": "In classrooms 6-8",
"_pivot_device_id": 26,
"_pivot_group_id": 5
}
],
"mac": "123456789ABC"
}
]
I want to modify each returned item and remove the excess data, so it will end up like this:
[
{
"id": 23,
"name": "11:40AM July 2",
"airplayEnabled": false,
"airplayCodeEnabled": true,
"type": 0,
"groups": [4, 5],
"mac": "123456789ABC"
},
{
"id": 26,
"name": "1:54PM July 5",
"airplayEnabled": false,
"airplayCodeEnabled": true,
"type": 0,
"groups": [5],
"mac": "123456789ABC"
}
]
I created the following code to remove the excess data:
const deleteExcessInfo = async function(group) {
if(group.id) {
return group.id;
} else {
return null;
}
}
const modGroups = async function(device) {
async.map(device.groups, deleteExcessInfo, function(err, res) {
device.groups = res;
});
return device;
}
var newDevices;
async.map(devices, modGroups, (error, results) => {
console.log("results are " + JSON.stringify(results));
});
When I execute this code in a stand-alone node program (run from the command line), I get the expected output with the excess data removed. However, it does not work when I put it in a redux action, like this:
export function getDevices() {
return function(dispatch) {
return fetch("http://my-awesome-api:1357/device", {mode: "cors"})
.then(handleErrors)
.then(json)
.then(function(data) {
async.map(data, fixGroups, async function(error, res) {
console.log("dispatching...");
console.log(JSON.stringify(res));
dispatch({
type: "GET_DEVICES",
devices: res
});
});
}).catch((err) => {
dispatch({
type: "GET_DEVICES_ERROR",
error: err
});
alert("Oh shoot we have an error " + err);
return(err);
});
}
};
I do not see "dispatching..." or the res printed to the console, so it appears the callback function is not being executed for some reason. Any ideas on why it's not working, and on how to fix it? Thanks!
What I've tried
I tried implementing a promise as Moonjsit recommended, but it did not work. I have also tried implementing a promise in my Redux action, like this:
export function getDevices() {
return function(dispatch) {
return fetch("http://localhost:1357/device", {mode: "cors"})
.then(handleErrors)
.then(json)
.then(function(data) {
return new Promise((resolve, reject) => {
async.map(data, fixGroups, (error, results) => {
console.log("results are " + JSON.stringify(results));
resolve(dispatch({
type: "GET_DEVICES",
devices: results
});
});
});
}).catch((err) => {
dispatch({
type: "GET_DEVICES_ERROR",
error: err
});
alert("Oh shoot we have an error " + err);
return(err);
});
}
};
Either way, the code inside the callback does not execute.

Answer 1

Hey so you have a problem in your code.
const modGroups = async function(device) {
async.map(device.groups, deleteExcessInfo, function(err, res) {
device.groups = res;
});
return device;
}
Calling function above immediately starts async.map which is asynchronus, and then returns unchanged device variable. So effectively it gives same reults as:
const modGroups = async function(device) {
return device;
}
To fix it you can eg. wrap it in Promise:
const modGroups = async function(device) {
return new Promise((resolve, reject) => {
async.map(device.groups, deleteExcessInfo, function(err, res) {
if (err) {
reject(err);
} else {
device.groups = res;
resolve(device);
});
})
}