React redux map reducer - reactjs

Question

I have looked everywhere but nothing is working. I am trying to increment/decrement position based on which one they select on screen.
I am using useSelector to try and get a slice of the code.
const leagueSettings = useSelector((state) => state.drafts.rosterSettings);
But I cannot get the mapping to work. The state never updates. I can see that I am sending in an updated count for the position and the correct position.
My action.js
export const ADD_ROSTER_SPOT = "ADD_ROSTER_SPOT";
export const REMOVE_ROSTER_SPOT = "REMOVE_ROSTER_SPOT";
export const addRosterSpot = (position, count) => {
return {
type: ADD_ROSTER_SPOT,
position: position,
amount: count
};
};
export const removeRosterSpot = (position, count) => {
return {
type: REMOVE_ROSTER_SPOT,
position: position,
amount: count
};
};
my reducer.js
import { ADD_ROSTER_SPOT, REMOVE_ROSTER_SPOT } from "../actions/draft";
let initialState = {
leagueSettings: [], // list of league settings,
rosterSettings: [
{ Position: "QB", amount: 1 },
{ Position: "WR", amount: 1 },
{ Position: "RB", amount: 1 },
{ Position: "TE", amount: 1 },
],
drafted: [], // list of players drafted by others
};
export default (state = initialState, action) => {
switch (action.type) {
case ADD_ROSTER_SPOT:
return state.rosterSettings.map(pos => {
if (pos.Position === action.position) {
return {...pos, amount: pos.amount + 1}
}
console.log(state)
return pos;
});
case REMOVE_ROSTER_SPOT:
return state.rosterSettings.map((pos) => {
if (pos.Position === action.position) {
return { ...pos, amount: pos.amount - 1 };
}
return pos;
});
default: return state;
}
};

Answer 1

You need to change the code inside the reducer because it is not updating the state correctly
try using this in the "ADD_ROSTER_SPOT" case in reducer
let filteredState = state.rosterSettings.filter((eachPos) => {
if (eachPos.Position === action.Position) {
eachPos.amount = eachPos.amount + 1;
return eachPos;
}
return eachPos;
});
let newState = Object.assign({}, state, { rosterSettings: filteredState });
return({ ...newState });

Answer 2

Please check where the drafts reducer is defined, and what is your code in rootReducer?