Создание приложения Todo с помощью Redux и React
В современном мире веб-разработки эффективное управление состоянием имеет решающее значение для создания динамических и интерактивных пользовательских интерфейсов. Redux, контейнер прогнозируемого состояния для приложений JavaScript, предоставляет надежное решение для управления состоянием приложения в сложных приложениях React. В этом руководстве мы рассмотрим процесс создания простого приложения Todo с использованием Redux и React, демонстрируя, как Redux может упростить управление состоянием и повысить масштабируемость приложения.
Подготовка
Прежде чем погрузиться в руководство, убедитесь, что у вас есть базовое понимание концепций React и Redux. Кроме того, убедитесь, что в вашей системе установлены Node.js и npm (менеджер пакетов Node).
Настройка проекта
Для начала давайте настроим структуру нашего проекта и установим необходимые зависимости. Мы воспользуемся Create React App для загрузки нашего приложения React, а затем интегрируем Redux для управления состоянием.
Сначала создайте новое приложение React, выполнив в терминале следующую команду:
npx create-react-app redux-todo-appПосле создания проекта перейдите в каталог проекта:
cd redux-todo-appПосле создания проекта в каталог проекта:
npm install redux react-redux @reduxjs/toolkitСоздание действий Redux, редукторов и хранилища
В Redux действия — это полезные данные, которые отправляют данные из вашего приложения в хранилище Redux. Редукторы определяют, как изменяется состояние приложения в ответ на действия. Давайте создадим действия и редукторы для добавления и удаления задач.
Внутри каталога src создайте папку действий с файлом action.js, содержащим следующий код:
// actions.js
export const addTodo = (todo) => ({
type: 'ADD_TODO',
payload: todo
});
export const removeTodo = (todoId) => ({
type: 'REMOVE_TODO',
payload: todoId
});Затем создайте папку reducer с файлом reducer.js:
// reducer.js
const initialState = {
todos: []
};
const todoReducer = (state = initialState, action) => {
switch (action.type) {
case 'ADD_TODO':
return {
...state,
todos: [...state.todos, action.payload]
};
case 'REMOVE_TODO':
return {
...state,
todos: state.todos.filter(todo => todo.id !== action.payload)
};
default:
return state;
}
};
export default todoReducer;Теперь давайте настроим хранилище Redux. Создайте папку Store с файлом Store.js:
// Store.js
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from '../reducers/reducer';
const store = configureStore({
reducer: rootReducer
});
export default store;Компоненты здания
Наше приложение Todo будет состоять из двух основных компонентов: AddTodoForm для добавления новых задач и TodoList для отображения и управления существующими задачами. Давайте создадим эти компоненты.
Создайте папку «Компоненты» внутри каталога src. Внутри него создайте два файла: AddTodoForm.js и TodoList.js.
Компонент AddTodoForm
// AddTodoForm.js
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { addTodo } from '../actions/actions';
import '../styles/AddTodoForm.css';
const AddTodoForm = () => {
const [text, setText] = useState('');
const dispatch = useDispatch();
const handleSubmit = (e) => {
e.preventDefault();
if (text.trim()) {
dispatch(addTodo({
id: Math.random(),
text
}));
}
setText('');
};
return (
<form onSubmit={handleSubmit} className='add-todo-form'>
<input type='text' value={text} onChange={(e) => setText(e.target.value)} className='todo-input' />
<button type='submit' className='add-button'>Add Todo</button>
</form>
);
};
export default AddTodoForm;Компонент TodoList
// TodoList.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { removeTodo } from '../actions/actions';
import '../styles/TodoList.css';
const TodoList = () => {
const todos = useSelector(state => state.todos);
const dispatch = useDispatch();
const handleRemoveTodo = (id) => {
dispatch(removeTodo(id));
};
return (
<ul className='todo-list'>
{todos.map(todo => (
<li key={todo.id} className='todo-item'>
{todo.text}
<button className='delete-button' onClick={() => handleRemoveTodo(todo.id)}>Delete</button>
</li>
))}
</ul>
);
};
export default TodoList;Компоненты стиля
Давайте добавим базовый стиль нашим компонентам для лучшего визуального представления. Создайте папку стилей внутри каталога src и добавьте следующие файлы CSS:
AddTodoForm.css
/* AddTodoForm.css */
.add-todo-form {
margin-bottom: 20px;
}
.todo-input {
padding: 8px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
.add-button {
padding: 8px 20px;
font-size: 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;TodoList.css
/* TodoList.css */
.todo-list {
list-style-type: none;
padding: 0;
}
.todo-item {
margin-bottom: 10px;
}
.delete-button {
margin-left: 10px;
padding: 5px 10px;
background-color: #ff5733;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}Интеграция компонентов в приложение
Теперь давайте интегрируем наши компоненты в основной компонент приложения.
// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './Store/Store';
import TodoList from './Components/TodoList';
import AddTodoForm from './Components/AddTodoForm';
import './App.css';
const App = () => {
return (
<Provider store={store}>
<div className="app-container">
<h1 className="app-title">Todo App</h1>
<AddTodoForm />
<TodoList />
</div>
</Provider>
);
};
export default App;App.css
/* App.css */
.app-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 500px;
padding: 20px;
background-color: #f9f9f9;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.app-title {
text-align: center;
margin-bottom: 20px;
}С помощью этого файла App.css мы определяем стили для основного контейнера приложения, размещая его в центре экрана с некоторыми отступами и стилями. Класс .app-title используется для оформления заголовка приложения Todo.
Заключение
В этом уроке мы узнали, как создать простое приложение Todo с использованием Redux и React. Мы рассмотрели основы действий Redux, редукторов и конфигурации хранилища, а также создания функциональных компонентов и их интеграции в приложение React. Используя Redux для управления состоянием, мы обеспечили предсказуемый и масштабируемый подход к управлению состоянием приложения, упрощая обслуживание и расширение нашего приложения Todo. Не стесняйтесь настраивать и расширять этот проект.
