Updating the state reducer pattern to use TypeScript

The premise: A stateful component (or hook) uses useReducer to keep track of state. The consumer of this stateful component (or hook) can pass in its own reducer, which is then passed to useReducer and used instead of the stateful component's (or hook's) default one. In this way, the consumer can control state updates from the "outside". This is an example of inversion of control.

This older example using React 16 is pretty much still what this pattern would look like using React 19, but the React 19 version would probably use TypeScript in lieu of the actionTypes variable for type safety.

Here is what it might look like if you were using React 19.