Managing Complex State with Context & Reducers

What should happen when a user adds the same notebook to a cart twice? A good cart shows one line with a quantity of 2, not two separate lines. With useState, that rule ends up inside the press handler of each button that adds an item, so every such button must repeat the same logic. A cart also needs rules for removing an item and for clearing everything, and those rules spread out in the same way.

React has a second state hook for this situation. useReducer moves every rule for changing a piece of state into one function, and components only describe what happened.