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:

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:

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.