A reducer turns an interaction into a next state. The function receives the current value and an action, then returns a new value without changing the previous state. This makes a capacity rule visible in one place. Every Add action must respect the same limit, even if a user clicks quickly or another control dispatches the action later.
You'll reserve places for several fictional operations teams. The starting count and capacity change between fixtures, so neither belongs as a number typed into the component. Check both boundaries: removing from zero and adding at capacity. A reset is a separate action that restores the supplied initial count. Unknown actions should leave the state unchanged instead of breaking the preview.
function reducer(state,action){switch(action.type){case 'add':return Math.min(f.limit,state+1);case 'remove':return Math.max(0,state-1);case 'reset':return f.initial;default:return state}}
function App(){const [n,dispatch]=useReducer(reducer,f.initial);return <><h1>{f.organization}</h1><output aria-label="Reserved">{n}</output><button onClick={()=>dispatch({type:'add'})}>Add</button><button onClick={()=>dispatch({type:'remove'})}>Remove</button><button onClick={()=>dispatch({type:'reset'})}>Reset</button></>}
Trace the state change and its visible boundary before building the transfer tasks.