Typed example of React useReducer hook

useReducer_example.tsx

import type { Reducer } from 'react'
import { Fragment, useReducer } from 'react'

interface IReducerState {
	name: string
	age: number
}

type IReducerAction =
	| {
			type: 'changed_age'
	  }
	| {
			type: 'changed_name'
			newName: string
	  }

const initialState: IReducerState = { name: 'Taylor', age: 42 }

function Form() {
	const [state, dispatch] = useReducer<Reducer<IReducerState, IReducerAction>>((state, action) => {
		switch (action.type) {
			case 'changed_age': {
				return {
					...state,
					age: state.age + 1,
				}
			}
			case 'changed_name': {
				return {
					...state,
					name: action.newName,
				}
			}
		}
	}, initialState)

	function handleButtonClick() {
		dispatch({ type: 'changed_age' })
	}

	const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
		dispatch({
			type: 'changed_name',
			newName: e.target.value,
		})
	}

	return (
		<Fragment>
			<input value={state.name} onChange={handleInputChange} />
			<button onClick={handleButtonClick}>Increment age</button>
			<p>
				Hello, {state.name}. You are {state.age}.
			</p>
		</Fragment>
	)
}

export default Form