Exercise 1: Converting Counter Component to useReducer

1. Step 1: Set Up the Reducer Function

   • In your Counter.jsx component, replace the useState hook with useReducer.
   • Create a reducer function that handles the state transitions for incrementing and decrementing the count.

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

2. Step 2: Initialize State with useReducer

   • Initialize your Counter component’s state using useReducer instead of useState.

   
   import React, { useReducer } from 'react';
   
   const Counter = () => {
     const [state, dispatch] = useReducer(counterReducer, { count: 0 });
   
     return (
       <div>
         <h2>Counter</h2>
         <p>Count: {state.count}</p>
         <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
         <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
       </div>
     );
   };
   
   export default Counter;
   
   

3. Step 3: Test the Component

   • Render the updated Counter component in App.jsx.
   • Test the increment and decrement functionality to ensure that the useReducer hook is correctly managing the component’s state.

4. Step 4: Extend the Reducer

   • Add a new action type to the reducer, such as reset, to reset the count to 0.
   • Implement a reset button in the Counter component and dispatch the reset action when it is clicked.

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