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