React has become an important tool in modern web development. In particular, while there are various methods for state management, useReducer<\/strong> is a React hook that helps effectively manage more complex state logic. In this tutorial, we will specifically cover how to utilize useReducer using a basic To Do app.<\/p>\n First, let’s look at the basic structure of the project. Typically, the structure of a To Do app is organized as follows:<\/p>\n In the above structure, useReducer is useful when dealing with complex state, and it can be used in the following way:<\/p>\n state<\/strong>: Represents the current state, and dispatch<\/strong>: A function for state updates. reducer<\/strong> is a function that defines how the state should change.<\/p>\n First, let’s implement a basic To Do app. The code below is a simple React app that allows users to add tasks and display the list.<\/p>\n1. Project Structure<\/h2>\n
\n\/to-do-app\n|-- \/src\n| |-- \/components\n| | |-- TodoItem.js\n| | |-- TodoList.js\n| | \u2514-- TodoForm.js\n| |\n| |-- App.js\n| \u2514-- index.js\n|-- package.json\n|-- README.md\n <\/code><\/pre>\nTodoItem<\/code> represents an individual task, and TodoList<\/code> shows the entire list of tasks. New tasks are added using TodoForm<\/code>.<\/p>\n2. Introduction to useReducer<\/h2>\n
\nconst [state, dispatch] = useReducer(reducer, initialState);\n <\/code><\/pre>\n3. Implementing a Basic To Do App<\/h2>\n
\nimport React, { useState } from 'react';\n\nconst App = () => {\n const [todos, setTodos] = useState([]);\n const [input, setInput] = useState('');\n\n const addTodo = () => {\n if (input.trim() !== '') {\n setTodos([...todos, { text: input, completed: false }]);\n setInput('');\n }\n };\n\n const toggleTodo = (index) => {\n setTodos(todos.map((todo, i) => \n i === index ? { ...todo, completed: !todo.completed } : todo\n ));\n };\n\n return (\n My To Do List<\/h1>\n setInput(e.target.value)}\n placeholder=\"Enter a task\"\n \/>\n