useReducer incrementing / decrementing 2 instead of 1 - reactjs

Question

I'm just trying to learn the useReducer hook in react. Just playing around. Can someone help with an issue I'm having? When I click the button to "plus a unit" or "minus" a unit it takes 2 away. Any suggestions?
Perhaps map. is a bad method for updating the state in the reducer?
Test code below. I've put it all into one component for purpose of below, rather than posting all the context stuff and children.
Any help much appreciated :)
import React, {useReducer} from 'react'
function Test() {
const itemFile = [
{sku: '123456', description: 'item 1', stockavailable: 5},
{sku: '654321', description: 'item 2', stockavailable: 1},
{sku: '666666', description: 'item 3', stockavailable: 0},
]
const reducer = (state,action) => {
switch (action.type) {
case 'DELETE_LINE':
let newstate = state.filter(item => item.sku !== action.payload)
return newstate
case 'MINUS_ONE_UNIT':
return state.map(item => {
if(item.sku === action.payload) {
item.stockavailable = item.stockavailable-1;
}
return item;
})
case 'PLUS_ONE_UNIT':
return state.map(item => {
if(item.sku === action.payload) {
item.stockavailable = item.stockavailable+1;
}
return item;
})
default:
return state
}
}
const [liveItemFile, dispatch] = useReducer(reducer, itemFile);
return (
<>
{liveItemFile.map((item) => (
<div key={item.sku}>
{item.sku}: {item.description} - {item.stockavailable}
<button onClick={() => dispatch({type: 'DELETE_LINE', payload: item.sku})}>
DELETE LINE
</button>
<button onClick={() => dispatch({type: 'MINUS_ONE_UNIT', payload: item.sku})}>
Minus Unit
</button>
<button onClick={() => dispatch({type: 'PLUS_ONE_UNIT', payload: item.sku})}>
Plus Unit
</button>
</div>
))}
</>
);
}
export default Test;

Answer 1

Move your reducer's logic and your initial state outside of your component as with each render they get evaluated:
import React, { useReducer } from "react";
const itemFile = [
{ sku: "123456", description: "item 1", stockavailable: 5 },
{ sku: "654321", description: "item 2", stockavailable: 1 },
{ sku: "666666", description: "item 3", stockavailable: 0 },
];
const reducer = (state, action) => {
switch (action.type) {
case "DELETE_LINE":
let newstate = state.filter((item) => item.sku !== action.payload);
return newstate;
case "MINUS_ONE_UNIT":
return state.map((item) => {
if (item.sku === action.payload) {
item.stockavailable = item.stockavailable - 1;
}
return item;
});
case "PLUS_ONE_UNIT":
return state.map((item) => {
if (item.sku === action.payload) {
item.stockavailable = item.stockavailable + 1;
}
return item;
});
default:
return state;
}
};
function Test() {
const [liveItemFile, dispatch] = useReducer(reducer, itemFile);
return (
<>
{liveItemFile.map((item) => (
<div key={item.sku}>
{item.sku}: {item.description} - {item.stockavailable}
<button onClick={() => dispatch({ type: "DELETE_LINE", payload: item.sku })}>DELETE LINE</button>
<button onClick={() => dispatch({ type: "MINUS_ONE_UNIT", payload: item.sku })}>Minus Unit</button>
<button onClick={() => dispatch({ type: "PLUS_ONE_UNIT", payload: item.sku })}>Plus Unit</button>
</div>
))}
</>
);
}
export default Test;