How can I use useReducer with TypeScript in my React app?

How can I use useReducer with TypeScript in my React app?

You can use useReducer in TypeScript by defining your state and action types. Would you like a code example?

Yes, please provide a code example.

Sure! Here's a simple example:

import React, { useReducer } from 'react';

type State = { count: number };
type Action = { type: 'increment' | 'decrement' };

const initialState: State = { count: 0 };

const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter: React.FC = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

This sets up a simple counter using useReducer.

What are the benefits of using useReducer over useState?

Using useReducer is beneficial for managing complex state logic, especially when the state depends on previous states or when you have multiple sub-values. It also helps in organizing state updates in a more predictable way.