How do I manage state in a React app using TypeScript and reducers?

How do I manage state in a React app using TypeScript and reducers?

You can manage state in a React app using the useReducer hook. It allows you to handle complex state logic.

Can you show me a simple example of using useReducer with TypeScript?

Sure! Here's a basic 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 code sets up a simple counter using useReducer.

What are the benefits of using useReducer over useState?

useReducer is beneficial for managing complex state logic, especially when the next state depends on the previous one. It also helps in organizing state updates in a more predictable way.