Summary  
This chapter explains how to type a reducer in TypeScript—defining a state type and using a discriminated union for action types with the useReducer hook—to enforce compile-time safety.  

General domain of usage  
Front-end state management in React applications

When you use the `useReducer` hook in React, TypeScript allows you to precisely type both your reducer's state and the actions it can handle. This ensures your reducer logic is robust and less prone to errors. Begin by defining a type for your state object, which describes the data structure your reducer manages. For example, if you are building a simple counter, you might define your state type as:

```ts
type CounterState = {
  count: number;
};
```

The next step is to define the possible actions your reducer can handle. A recommended pattern is to use a **discriminated union** for your action types. This approach lets TypeScript enforce that every action type is handled explicitly, making your reducer safer and easier to maintain.

A **discriminated union** for action typing uses a common `type` property to distinguish between different action shapes. Consider the following example for a counter reducer:

```ts
type CounterAction =
  | { type: "increment" }
  | { type: "decrement" }
  | { type: "reset"; payload: number };
```

Here, each action is an object with a `type` property, and some actions (like `"reset"`) can include additional data via a `payload` property. This structure allows TypeScript to narrow the action type inside your reducer function, providing **type safety** for both the action type and any associated data.

What is a discriminated union useful for in reducer action typing?

Why should you type both state and actions in `useReducer`?

Strengthen your React development skills by applying TypeScript to components, events, hooks, and async logic. Use the TypeScript features that matter most in real React applications to write safer, clearer, and more maintainable UI code. Build confidence with typed props, state, API calls, custom hooks, and advanced React patterns.

Build a solid foundation in the TypeScript features used most often in real React projects. Work with unions, interfaces, type aliases, narrowing, and utility types that make component logic safer and more predictable.

Apply TypeScript directly to functional components, props, state, and refs. Use typed patterns that improve clarity, prevent common mistakes, and match real-world React development workflows.

Work with React's event system by typing mouse, input, and keyboard interactions. Understand how Synthetic Events work and how to extract safe, predictable data from event handlers.

Type API responses, fetch functions, and asynchronous state updates. Use structured types for loading states, error handling, and reusable typed fetch utilities that improve data flow across your React app.

Design custom hooks with strong typings, including generics and structured return types. Create reusable state and logic patterns that scale across a React codebase with type safety.

Type advanced React architecture patterns such as Context, reducers, render props, and callback props. Apply TypeScript to real component interactions that benefit from clear contracts and maintainable structure.

Typing Reducers with useReducer

1. What is a discriminated union useful for in reducer action typing?

2. Why should you type both state and actions in `useReducer`?

Typing Reducers with useReducer

1. What is a discriminated union useful for in reducer action typing?

2. Why should you type both state and actions in useReducer?

2. Why should you type both state and actions in `useReducer`?