How can I effectively use a reducer in my React application?

How can I effectively use a reducer in my React application?

Using a reducer in React helps manage complex state logic. You can use the useReducer hook for better state management.

Can you give me an example of a reducer function?

Sure! Here's a simple counter reducer:

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

How do I integrate this reducer with a component?

You can integrate it using the useReducer hook like this:

const [state, dispatch] = useReducer(reducer, initialState);

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

What are the benefits of using a reducer over useState?

Reducers are beneficial for managing complex state logic, especially when the state depends on previous states or when you have multiple state transitions.