React TypeScript Tutorial - 12 - useReducer Hook

Summary

In this video, we explore how to type the `useReducer` hook in TypeScript for a counter component. The component uses `useReducer` to manage state transitions based on action types, with actions for incrementing and decrementing the count. We go step-by-step to type the state and action objects, ensuring TypeScript can infer the correct types. The tutorial highlights how to add types for the state and action, allowing TypeScript to automatically handle type inference in the component. Additionally, it discusses error checking and best practices for stricter typing of actions.

Takeaways

• 😀 useReducer is preferred over useState when dealing with complex state logic where the next state depends on the previous state.
• 😀 The focus of the lesson is on typing the useReducer hook in TypeScript rather than explaining how useReducer works.
• 😀 A reducer function typically accepts two parameters: state and action, and returns an updated state based on the action type.
• 😀 The state type should be explicitly defined in TypeScript, such as an object containing a numeric count property.
• 😀 The action type can be defined as an object containing properties like type and payload.
• 😀 TypeScript errors help identify where types need to be specified, guiding the developer in adding proper typings.
• 😀 Once state and action types are defined, TypeScript can infer the types of state and dispatch automatically.
• 😀 The dispatch function is inferred as React.Dispatch with the specified action type.
• 😀 Type inference reduces the need for manually specifying types throughout the component.
• 😀 Proper typing ensures type safety, preventing invalid action types or payload values from being dispatched.
• 😀 Developers can copy inferred types from editor tooltips when passing state or dispatch as props to other components.
• 😀 The example demonstrates that action typing can be made stricter for better type safety, which is discussed further in the next lesson.

Q & A

What is the primary difference between `useState` and `useReducer` in React?

While `useState` is great for simple state values, `useReducer` is preferred for managing complex state logic where the next state depends on the previous state. `useReducer` provides more control and is better suited for cases where the state updates involve more intricate logic.

In the example, what does the `reducer` function do?

The `reducer` function is responsible for updating the state. It takes two parameters: the current state and the action. Based on the action type (either `increment` or `decrement`), it updates the `count` value by adding or subtracting the payload specified in the action. The function returns the new state.

How does the `useReducer` hook work in the provided example?

In the example, `useReducer` is called with two arguments: the reducer function and the initial state. It returns an array with two values: `state` (which holds the current state) and `dispatch` (a function used to dispatch actions that trigger state updates).

Why do we need to explicitly type the `state` and `action` in the reducer function?

We need to explicitly type the `state` and `action` in the reducer function because TypeScript doesn't automatically infer the types for these parameters. Defining types ensures that TypeScript can perform type checking and catch potential errors in the code.

What is the role of `CounterState` and `CounterAction` types in the example?

`CounterState` defines the structure of the state object, which contains a `count` property of type `number`. `CounterAction` defines the structure of the action object, which contains a `type` (string) and `payload` (number). These types help TypeScript understand the expected shape of the state and actions.

What would happen if we did not specify types for `state` and `action`?

Without explicit types for `state` and `action`, TypeScript would infer the types based on the provided values, but it may not always provide the desired level of type safety. By specifying types, you ensure more precise checking and avoid potential issues with unexpected types.

How does TypeScript handle type inference in the `useReducer` hook?

TypeScript automatically infers the types for `state` and `dispatch` based on the reducer function passed to the `useReducer` hook. For example, `state` is inferred as `CounterState`, and `dispatch` is inferred as `React.Dispatch<CounterAction>`. This reduces the need for explicit type annotations in many cases.

What type of error does TypeScript show when the action type or payload is incorrect?

If you dispatch an action with an incorrect `type` (e.g., a boolean instead of a string), TypeScript will show an error like 'Type boolean is not assignable to type string'. Similarly, if you pass a payload with the wrong type (e.g., a string instead of a number), TypeScript will catch this error as well.

What is the advantage of using `useReducer` over `useState` for managing state?

`useReducer` is better suited for more complex state logic. When the state changes depend on the previous state or involve multiple conditions, `useReducer` provides a clearer and more maintainable approach by handling state updates through a central function (the reducer). This makes it easier to scale and manage complex state interactions.

How can we pass `state` and `dispatch` to child components in TypeScript?

To pass `state` and `dispatch` as props to a child component, you can hover over either `state` or `dispatch` to view their inferred types. Then, use these types as the prop types for the child component, ensuring type safety when the state or dispatch is passed down.