React Hooks useReducer

`useReducer` is a built-in hook in React that allows you to manage state using a reducer function. A reducer is a function that takes the current state and an action, and returns a new state based on the action.

Here’s an example of how to use `useReducer` to manage a simple counter:

jsx
import React, { useReducer } from "react";

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();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    

      
Count: {state.count}
       dispatch({ type: "increment" })}>Increment
       dispatch({ type: "decrement" })}>Decrement
    
  );
}

In this example, we’re defining a reducer function called `reducer` that takes the current state and an action and returns a new state based on the action. We’re also defining a `Counter` component that uses `useReducer` to manage the state of the counter. We’re passing `reducer` as the first argument to `useReducer` and an initial state object (`{ count: 0 }`) as the second argument.

The `useReducer` function returns an array with two elements: the current state value (in this case, an object with a `count` property) and a `dispatch` function to update the state. We’re using the `dispatch` function to send actions to the reducer and update the count value.

You can also use `useReducer` to manage more complex state that consists of multiple values. Here’s an example of how to use `useReducer` to manage a form with multiple input fields:

jsx
import React, { useReducer } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "update":
      return { ...state, [action.name]: action.value };
    case "reset":
      return { firstName: "", lastName: "", email: "" };
    default:
      throw new Error();
  }
}

function Form() {
  const [state, dispatch] = useReducer(reducer, { firstName: "", lastName: "", email: "" });

  function handleChange(event) {
    const { name, value } = event.target;
    dispatch({ type: "update", name, value });
  }

  function handleSubmit(event) {
    event.preventDefault();
    console.log("Form submitted:", state);
    dispatch({ type: "reset" });
  }

  return (
    

      
        First name:
        
      
      
        Last name:
        
      
      
        Email:
        
      
      Submit
    
  );
}

In this example, we’re defining a reducer function called `reducer` that takes the current state and an action and returns a new state based on the action. We’re also defining a `Form` component that uses `useReducer` to manage the state of the form. We’re passing `reducer` as the first argument to `useReducer` and an initial state object (`{ firstName: “”, lastName: “”, email: “” }`) as the second argument.

The `handleChange` function updates the state based on the user’s input by dispatching an action with the input’s `name` and `value` properties. The `handleSubmit` function logs the form data to the console and resets the state by dispatching a `”reset”` action.

Overall, `useReducer` is a powerful tool in React that allows you to manage state using a reducer function and build complex and dynamic user interfaces. By using `useReducer`, you can create components that manage complex state and respond to user input in real-time.