Hobbyist coder here, new to reducers.
I have an app that adds objects into an array, with reducers that capture the quantity of each object's value of position.
The below works to an extent, that when I add two 'Att' entities the quantity of totalAtt equates to two, but when I add another position value the totalAtt quantity is reset to zero. Likewise for all values of position.
Discovered the && operator is resetting my initial value to false, given its boolean nature.
Anyone know how to tweak the code to capture the quantites without the values resetting?
const totalGK = get(team).reduce(
(a, b) => b.position === "GK" && a + b.qty,
0
);
const totalDef = get(team).reduce(
(a, b) => b.position === "Def" && a + b.qty,
0
);
const totalMid = get(team).reduce(
(a, b) => b.position === "Mid" && a + b.qty,
0
);
const totalAtt = get(team).reduce(
(a, b) => b.position === "Att" && a + b.qty,
0
);
return {
totalGK,
totalDef,
totalMid,
totalAtt
};
}
When reducing, you always return the new value of the accumulator. In your case, you add a value to the previous accumulator to get the new value. So you should always take a (the accumulator), and add 0 (b.position === something is false, so it's casted to 0) or the number if the condition is true.
const totalGK = get(team).reduce(
(a, b) => a + (b.position === "GK" && b.qty),
0
);
const totalDef = get(team).reduce(
(a, b) => a + (b.position === "Def" && b.qty),
0
);
const totalMid = get(team).reduce(
(a, b) => a + (b.position === "Mid" && b.qty),
0
);
const totalAtt = get(team).reduce(
(a, b) => a + (b.position === "Att" && b.qty),
0
);
However, there is a shorter and more readable way to approach this, reduce the team to an object, using the position values as keys, and add the qty to the previous value of the key. To get the consts, destructure the object created by reduce, and use 0 as the default values.
Example:
const get = arr => arr;
const team = [{ position: 'GK', qty: 2 }, { position: 'GK', qty: 2 }, { position: 'GK', qty: 2 }, { position: 'Att', qty: 3 }, { position: 'Att', qty: 3 }, { position: 'Att', qty: 3 }];
const {
GK: totalGK = 0,
Def: totalDef = 0,
Mid: totalMid = 0,
Att: totalAtt = 0,
} = get(team).reduce((acc, obj) => ({
...acc,
[obj.position]: (acc[obj.position] || 0) + obj.qty
}), {});
console.log(totalGK); // 6
console.log(totalDef); // 0
console.log(totalMid); // 0
console.log(totalAtt); // 9It would work better using a ternary operator, so you always return a value from your function. Something like this
const totalGK = get(team).reduce(
(a, b) => b.position === "GK" ? a + b.qty : a,
0
);