React has become an important tool in modern web development. In particular, while there are various methods for state management, useReducer 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.
1. Project Structure
First, let’s look at the basic structure of the project. Typically, the structure of a To Do app is organized as follows:
/to-do-app
|-- /src
| |-- /components
| | |-- TodoItem.js
| | |-- TodoList.js
| | └-- TodoForm.js
| |
| |-- App.js
| └-- index.js
|-- package.json
|-- README.md
In the above structure, TodoItem represents an individual task, and TodoList shows the entire list of tasks. New tasks are added using TodoForm.
2. Introduction to useReducer
useReducer is useful when dealing with complex state, and it can be used in the following way:
const [state, dispatch] = useReducer(reducer, initialState);
state: Represents the current state, and dispatch: A function for state updates. reducer is a function that defines how the state should change.
3. Implementing a Basic To Do App
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.
import React, { useState } from 'react';
const App = () => {
const [todos, setTodos] = useState([]);
const [input, setInput] = useState('');
const addTodo = () => {
if (input.trim() !== '') {
setTodos([...todos, { text: input, completed: false }]);
setInput('');
}
};
const toggleTodo = (index) => {
setTodos(todos.map((todo, i) =>
i === index ? { ...todo, completed: !todo.completed } : todo
));
};
return (
My To Do List
setInput(e.target.value)}
placeholder="Enter a task"
/>
{todos.map((todo, index) => (
- toggleTodo(index)} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
{todo.text}
))}
);
};
export default App;
4. Managing State with useReducer
Now, let’s improve the above code using useReducer. When it is necessary to manage state in a complex manner, useReducer can be more useful.
import React, { useReducer } from 'react';
const initialState = { todos: [] };
const reducer = (state, action) => {
switch (action.type) {
case 'ADD_TODO':
return {
...state,
todos: [...state.todos, { text: action.payload, completed: false }]
};
case 'TOGGLE_TODO':
return {
...state,
todos: state.todos.map((todo, index) =>
index === action.payload ? { ...todo, completed: !todo.completed } : todo
),
};
default:
return state;
}
};
const App = () => {
const [state, dispatch] = useReducer(reducer, initialState);
const [input, setInput] = React.useState('');
const addTodo = () => {
if (input.trim() !== '') {
dispatch({ type: 'ADD_TODO', payload: input });
setInput('');
}
};
return (
My To Do List (useReducer)
setInput(e.target.value)}
placeholder="Enter a task"
/>
{state.todos.map((todo, index) => (
- dispatch({ type: 'TOGGLE_TODO', payload: index })} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
{todo.text}
))}
);
};
export default App;
5. Advantages of useReducer
Using useReducer has the following advantages:
- Complex state logic: It can maintain complex state logic clearly by managing multiple state transitions as independent actions.
- Centralized management: When there are multiple state updates, all state changes can be handled by a single reducer function.
- Performance improvement: It makes maintaining immutability easier, helping with performance optimization.
6. Component Separation
Now, let’s break the App component into smaller components to improve code readability. We will create TodoList and TodoForm components.
const TodoList = ({ todos, toggleTodo }) => (
{todos.map((todo, index) => (
- toggleTodo(index)}
style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
>
{todo.text}
))}
);
const TodoForm = ({ addTodo, input, setInput }) => (
setInput(e.target.value)}
placeholder="Enter a task"
/>
);
7. Final Code
import React, { useReducer, useState } from 'react';
const initialState = { todos: [] };
const reducer = (state, action) => {
switch (action.type) {
case 'ADD_TODO':
return {
...state,
todos: [...state.todos, { text: action.payload, completed: false }]
};
case 'TOGGLE_TODO':
return {
...state,
todos: state.todos.map((todo, index) =>
index === action.payload ? { ...todo, completed: !todo.completed } : todo
),
};
default:
return state;
}
};
const TodoList = ({ todos, toggleTodo }) => (
{todos.map((todo, index) => (
- toggleTodo(index)}
style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
>
{todo.text}
))}
);
const TodoForm = ({ addTodo, input, setInput }) => (
setInput(e.target.value)}
placeholder="Enter a task"
/>
);
const App = () => {
const [state, dispatch] = useReducer(reducer, initialState);
const [input, setInput] = useState('');
const addTodo = () => {
if (input.trim() !== '') {
dispatch({ type: 'ADD_TODO', payload: input });
setInput('');
}
};
return (
My To Do List (useReducer)
dispatch({ type: 'TOGGLE_TODO', payload: index })} />
);
};
export default App;
8. Conclusion
In this tutorial, we learned how to apply useReducer through the To Do app. useReducer helps manage complex state logic concisely, enhancing readability and maintainability. Furthermore, we were able to improve the structure of the code by breaking it into several components. This pattern can also be effectively used in more complex applications. In the next session, we will explore global state management using useContext.