МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ КЫРГЫЗСКОЙ

РЕСПУБЛИКИ
МЕЖДУНАРОДНЫЙ УНИВЕРСИТЕТ КЫРГЫЗСКОЙ
РЕСПУБЛИКИ
ФАКУЛЬТЕТ ПРОГРАММНОЙ ИНЖЕНЕРИИ

Направление «Разработка программно-информационных систем»

ОТЧЕТ
По учебной практике
Тема: «TodoList - планировщик»

Выполнил: Абдымамбетов М.Т.

Группа: ПИ-2-22
Проверила: Осмонова Ж.Р.

Бишкек 2024
 Оглавление
Введение..................................................................................................................3
ГЛАВА 1. ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ И ПОДГОТОВКА К
ПРОЕКТУ...............................................................................................................5
1.1. Основы работы с JavaScript и React.......................................................5
1.2. Использование Redux Toolkit для управления состоянием................8
ГЛАВА 2. Реализация проекта.........................................................................11
2.1. Структура проекта TodoList...................................................................11
2.2. Страницы и компоненты приложения.................................................14
Заключение...........................................................................................................26
Список литературы.............................................................................................28
Приложение..........................................................................................................29
 Введение
Целью данной учебной практики являлась разработка веб-приложения
"Todolist - планировщик", предназначенного для управления списком задач,
добавления новых записей, их редактирования и удаления. Это приложение
должно было стать удобным инструментом для организации ежедневных дел
и улучшения продуктивности пользователей. Для разработки был
использован язык JavaScript и библиотека React, что позволило создать
динамичный интерфейс, обновляющийся без перезагрузки страницы,
обеспечивая мгновенное отображение изменений.
Основная цель проекта — улучшить навыки работы с JavaScript и
React, а также научиться эффективно управлять состоянием приложения. В
рамках данного проекта активно использовались хуки React, такие как
useState и useEffect, которые позволили реализовать основные функции
планировщика. Хук useState был использован для управления состоянием, то
есть для хранения и обновления списка задач. Это дало возможность
обновлять интерфейс приложения при добавлении, изменении или удалении
задач. Благодаря useEffect, удалось обеспечить сохранение списка задач в
локальном хранилище браузера, что позволяет пользователю не терять
данные после перезагрузки страницы.
Важной частью проекта стала реализация поиска по задачам.
Добавление функциональности поиска позволило пользователям быстро
находить нужные задачи по ключевым словам. Для этого был реализован
компонент, который принимает запрос от пользователя и фильтрует задачи в
соответствии с введенным текстом. Это улучшило юзабилити приложения,
сделав его более удобным для работы с большим количеством задач.
Функционал поиска был построен с использованием хуков useState и
useEffect. В компоненте для поиска реализована функция, которая реагирует
на изменения в текстовом поле, обновляя список задач в реальном времени.
Это позволило сделать поиск быстрым и интуитивным. Например, каждый
раз, когда пользователь вводит текст, список задач моментально обновляется,
3
отображая только те записи, которые соответствуют введенному запросу.
Данная функция поиска обеспечила пользователям возможность легко
управлять большим списком задач, не теряя времени на их ручной просмотр.
При этом было важно, чтобы интерфейс оставался простым и удобным для
конечного пользователя. Ввод поискового запроса мгновенно отображает
соответствующие результаты, благодаря чему приложение работает плавно и
без задержек.
Кроме того, была реализована функция сортировки задач по статусу
(выполненные или невыполненные), что дополнило возможности поиска.
Пользователи могут не только искать задачи по ключевым словам, но и
фильтровать их по степени выполнения, что особенно полезно для
упрощения управления повседневными делами.
Добавление функции поиска значительно повысило удобство
использования приложения "Todolist", позволив пользователям быстро
находить нужные записи. Это стало особенно важным при работе с
большими объемами информации. Благодаря использованию React-хуков и
правильной организации компонентов, поиск стал интегрированной частью
приложения, не требуя сложной настройки и предоставляя эффективный
инструмент для взаимодействия с задачами.
В процессе работы над этим проектом я изучил множество аспектов
разработки приложений на React, включая оптимизацию рендеринга
компонентов, правильное управление состоянием и работу с побочными
эффектами. Реализация поисковой системы и других функций планировщика
улучшила мои навыки в создании интерактивных веб-приложений и
организации удобного пользовательского интерфейса.
Таким образом, проект "Todolist" стал важным шагом в моем обучении
разработке на React и JavaScript. В будущем возможно расширение
приложения с добавлением таких функций, как сортировка задач по
приоритетам, интеграция с внешними API для синхронизации задач на
нескольких устройствах и внедрение системы уведомлений.
4
 ГЛАВА 1. ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ И ПОДГОТОВКА К
ПРОЕКТУ
1.1. Основы работы с JavaScript и React
JavaScript — это один из самых популярных языков программирования,
используемый для разработки интерактивных веб-приложений. Его основные
преимущества — это гибкость, динамичность и поддержка работы в
браузерах. JavaScript позволяет разработчикам манипулировать элементами
DOM, создавать динамические интерфейсы, обрабатывать пользовательские
события и работать с асинхронными запросами к серверу. Эти особенности
делают его незаменимым при создании современных веб-приложений, таких
как "Todolist - планировщик", где требуется быстрое обновление контента без
перезагрузки страницы.
JavaScript является интерпретируемым языком с динамической
типизацией, что означает, что переменные могут изменять свои типы в ходе
выполнения программы. Это придает JavaScript большую гибкость, но
требует от разработчика внимания к возможным ошибкам, связанным с
преобразованием типов данных. Одной из ключевых особенностей JavaScript
является его модель событий, которая позволяет обрабатывать действия
пользователя, такие как нажатие кнопок, ввод данных в формы и другие
интерактивные элементы на странице.
В проекте "Todolist" JavaScript был использован для создания основной
логики приложения, обработки пользовательского ввода и обновления
интерфейса. Например, при добавлении новой задачи в список задачи
сохраняются в состояние приложения с использованием React-хуков, что
позволяет моментально отобразить новую задачу на экране.
React — это JavaScript-библиотека, разработанная для создания
пользовательских интерфейсов. Основной идеей React является
компонентный подход, который подразумевает создание небольших,
независимых блоков кода (компонентов), каждый из которых отвечает за
свою часть интерфейса. Эти компоненты могут быть переиспользованы и
комбинированы, что значительно упрощает разработку сложных
5
приложений.
Одним из ключевых понятий в React является "виртуальный DOM"
(Virtual DOM). Виртуальный DOM представляет собой копию реального
DOM, которая обновляется при изменениях состояния компонентов. Когда
происходят изменения в состоянии или свойствах компонентов, React
сначала обновляет виртуальный DOM, сравнивая его с предыдущей версией.
После этого библиотека вычисляет минимальное количество изменений,
которые необходимо внести в реальный DOM, и применяет их. Это делает
обновление интерфейса быстрым и эффективным.
Основные принципы React:
Компонентный подход. Каждый компонент в React можно
рассматривать как отдельную "функцию" пользовательского интерфейса. В
приложении "Todolist" каждый компонент отвечает за определенную задачу.
Например, компонент "TaskList" отображает список задач, компонент
"AddTaskForm" управляет добавлением новых задач, а компонент
"SearchTask" отвечает за поиск по задачам. Благодаря компонентной
структуре, код становится модульным и легко поддерживаемым.
Компоненты можно переиспользовать в различных частях приложения, что
улучшает структуру кода и снижает его сложность.
Односторонний поток данных. В React данные передаются сверху вниз
через иерархию компонентов. Это означает, что родительский компонент
передает данные дочерним компонентам через "props" — специальный
механизм, позволяющий передавать значения между компонентами.
Дочерние компоненты не могут изменять данные, которые они получают
через "props". Например, компонент "TaskList" получает список задач от
родительского компонента "TodolistApp", но не может изменить этот список
напрямую. Любые изменения данных выполняются в родительском
компоненте через специальные функции-обработчики.
Состояние (state). В React важное место занимает управление
состоянием компонентов. Состояние — это данные, которые могут
6
изменяться в ходе работы приложения и определяют, как компоненты
должны выглядеть и работать. Хук useState позволяет компонентам хранить
состояние и изменять его при возникновении событий. В "Todolist" список
задач хранится в состоянии главного компонента "TodolistApp", а его
изменения (например, добавление новой задачи) вызывают перерисовку
компонента. Это обеспечивает динамичное обновление интерфейса при
каждом изменении данных.
Реактивность. React автоматически обновляет пользовательский
интерфейс при изменении состояния. Это происходит благодаря хукам —
специальным функциям, которые обеспечивают взаимодействие
компонентов с жизненным циклом приложения и управлением состоянием. В
проекте "Todolist" используется хук useEffect, который реагирует на
изменения в данных и выполняет определенные действия (например,
сохранение задач в локальное хранилище браузера или фильтрацию списка
задач по поисковому запросу).
Работа с хуками в React
Хуки — это относительно новая функция React, которая позволяет
использовать функциональные компоненты для работы со состоянием и
жизненным циклом компонента. В проекте "Todolist" активно
использовались два основных хука: useState и useEffect.
useState — это хук, который позволяет компонентам сохранять и
изменять локальное состояние. В случае с проектом "Todolist", useState
используется для хранения списка задач. При добавлении новой задачи
состояние обновляется, и React автоматически перерисовывает компонент,
отображая изменения на экране.
useEffect — это хук, который используется для выполнения побочных
эффектов, таких как взаимодействие с внешними API, подписки или
сохранение данных в локальное хранилище. В "Todolist" useEffect был
использован для сохранения задач в localStorage.

7
 1.2. Использование Redux Toolkit для управления
состоянием
Redux Toolkit — это официальный набор инструментов для
Redux, разработанный для упрощения и оптимизации управления
состоянием в приложениях. Он используется для
централизованного хранения данных, чтобы разные части
приложения могли легко получать доступ к общему состоянию и
синхронизировать его изменения. В проекте "Todolist" Redux
Toolkit управляет списком задач и облегчает их добавление,
удаление и редактирование.
Основные принципы работы Redux Toolkit
Централизованное хранилище (store). Все данные
приложения хранятся в одном месте — хранилище. В нашем случае
это список задач, доступный для всех компонентов приложения.
Хранилище позволяет избежать передачи данных между
компонентами вручную, обеспечивая доступ к ним из любого
места.
Срезы состояния (slices). Redux Toolkit объединяет логику
редюсеров и экшенов в "срезы" (slices). Каждый срез отвечает за
управление конкретной частью данных, например, списком задач.
Это упрощает структуру приложения, так как в одном месте
определяется, как данные добавляются, изменяются или удаляются.
Редюсеры и экшены. Редюсеры — это функции, которые
изменяют состояние в ответ на определенные действия (экшены).
Например, при добавлении новой задачи редюсер обновляет список
задач. Redux Toolkit автоматизирует создание экшенов и
8
редюсеров, что сокращает объем шаблонного кода.
Экшены (actions). Экшены представляют собой команды для
изменения состояния. В приложении "Todolist" действия, такие как
"добавить задачу" или "удалить задачу", отправляются через
экшены в хранилище, чтобы обновить список задач.
Хуки React для доступа к состоянию
Для взаимодействия с Redux используются хуки useSelector и
useDispatch.
useSelector — позволяет компонентам получать данные из
глобального состояния.
useDispatch — отправляет экшены для изменения данных в
хранилище.
Как это работает на практике
Когда пользователь добавляет новую задачу, в форме вводится
название задачи и нажимается кнопка "Добавить". В этот момент
компонент вызывает экшен добавления задачи и отправляет его в
Redux-хранилище через dispatch. Редюсер, связанный с этим
экшеном, обновляет список задач в хранилище, добавляя новую
запись. Поскольку состояние обновилось, все компоненты, которые
получают список задач через useSelector, автоматически рендерятся
заново и показывают изменения.
Если пользователь решает удалить задачу, компонент
отправляет экшен "удалить задачу". Редюсер в ответ на этот экшен
обновляет состояние, удаляя нужную запись. Снова все
компоненты обновляют свое отображение, показывая актуальный
список задач.
9
 Преимущества использования Redux Toolkit
Упрощенная настройка — автоматизация многих процессов,
таких как создание экшенов и редюсеров, снижает объем
шаблонного кода.
Централизованное управление — все данные хранятся в
одном месте, что облегчает их доступ и синхронизацию.
Удобная интеграция с React — с помощью хуков компоненты
могут легко получать данные и изменять состояние.
Прозрачность и предсказуемость — все изменения состояния
происходят через экшены, что делает логику приложения простой и
понятной.

10
 ГЛАВА 2. Реализация проекта
2.1. Структура проекта TodoList
Приложение "Todolist" организовано так, чтобы каждая
функциональная часть находилась в своей директории. Это улучшает
читаемость кода, упрощает поддержку и способствует масштабируемости
проекта. В данной структуре особое внимание уделено разделению логики
компонентов, страниц и глобального состояния.
Обзор структуры src/
assets/ — папка для хранения статических ресурсов (например,
изображений, иконок).
components/ — включает в себя UI-компоненты и функциональные
элементы интерфейса.
pages/ — содержит страницы приложения, каждая из которых
выполняет свою задачу.
store/ — включает срезы (slices) и хранилище для управления
состоянием с помощью Redux Toolkit.
App.js и index.js — точка входа и главный компонент приложения.
App.css и index.css — глобальные и локальные стили.
Описание содержимого папок и их роли
components/ — компоненты интерфейса
Эта папка содержит как базовые UI-элементы, так и
специализированные компоненты для управления задачами.
UI/ — содержит общие элементы интерфейса:
calendar — реализует календарь для работы с датами.
checkbox — компонент для переключения задач
(выполнено/невыполнено).
datepicker — компонент для выбора даты выполнения задачи.
11
 modalAddTask — модальное окно для добавления новой задачи. Это
удобный способ ввода задач без перехода на новую страницу.
routes — организует маршрутизацию между страницами, обеспечивая
удобный переход по приложению.
search — компонент для поиска задач по ключевым словам. Он
фильтрует задачи в режиме реального времени.
sidebar — боковая панель для навигации по страницам, такой как "Мои
задачи" или "Важные задачи".
tasksList — компонент для отображения списка задач. Он получает
данные о задачах и отображает их в удобном формате.
pages/ — страницы приложения
Каждая страница приложения реализует отдельную функциональность:
completed — страница с выполненными задачами. Отображает задачи,
которые пользователь отметил как выполненные.
deleted — страница для просмотра удаленных задач, предоставляющая
возможность их восстановления.
important — страница с важными задачами, которые пользователь
пометил как приоритетные.
MyTasks — главная страница с общим списком задач. Здесь
отображаются все текущие задачи пользователя.
Result — отображает результаты поиска, если пользователь ввел запрос
в строке поиска.
store/ — хранилище и срезы Redux
Эта папка содержит срезы (slices) Redux, которые управляют
различными частями состояния приложения.
deletedTaskSlice — управляет состоянием удаленных задач. Позволяет
добавлять задачи в список удаленных и восстанавливать их.
importantTaskSlice — хранит данные о важных задачах и управляет их
статусом.
tagsSlice — управляет тегами, которые пользователь может назначать
12
задачам для удобной фильтрации и поиска.
taskSlice — основной срез для управления задачами. Он отвечает за
добавление, редактирование и удаление задач.
App.js и index.js — главный компонент и точка входа
App.js — объединяет все страницы и компоненты, подключает
маршрутизацию и Redux-хранилище. Здесь задается структура приложения и
определяется логика переходов между страницами.
index.js — точка входа в приложение, где происходит рендеринг
главного компонента в DOM. Здесь подключается Redux-хранилище и
глобальные стили.

13
 2.2. Страницы и компоненты приложения
Компоненты в папке components:
UI/ — содержит элементы интерфейса:
calendar, checkbox, datepicker.
modalAddTask — модальное окно для добавления новой задачи:
search — строка поиска задач.
tasksList — выводит список задач.

Страницы в папке pages/

MyTasks — главная страница с текущими задачами:
import { useEffect, useState } from "react";
import ModalAddTask from "../../components/modalAddTask";
import Search from "../../components/search";
import TasksList from "../../components/tasksList";
import { useSelector } from "react-redux/es/exports";
import { useDispatch } from 'react-redux/es/exports'
import { addModalTask, dragAndDrop, removeTask, turnOnModalAdd,
deletedTasks } from "../../store/taskSlice/TaskSlice";
import '../pages.css'
import { addDeletedTask } from
"../../store/deletedTaskSlice/DeletedTaskSlice";
import { deleteImportantTask, removeImportantTask } from
'../../store/importantTaskSlice/ImportantTaskSlice';
export const sortFunc = (isProductivite, isEducation, isImportant, isHealth,
setTasks, tasksLocal) => {
const filtrering = [
{ name: isProductivite ? 'productiveTag' : '', values: [isProductivite] },
14
 { name: isEducation ? 'educationTag' : '', values: [isEducation] },
{ name: isImportant ? 'importantTag' : '', values: [isImportant] },
{ name: isHealth ? 'healthTag' : '', values: [isHealth] },
];
if (isProductivite || isEducation || isImportant || isHealth) {
const output = tasksLocal.reduce((acc, curr) => { // Сортировка по
нескольким позициям
let isNodeSatisfied = false;
filtrering.forEach((criteria) => { // Проверяем по параметру и если
существует пушим в аккум
isNodeSatisfied = isNodeSatisfied ||
criteria.values.indexOf(curr[criteria.name]) > -1;
})
if (isNodeSatisfied) {
acc.push(curr)
}
return acc;
}, []);

setTasks(output)
} else {
setTasks(tasksLocal)
}
}
const MyTasks = () => {
const { isProductivite, isEducation, isHealth, isImportant } =
useSelector(store => store.tags)
const tasksRed = useSelector(store => store.tasks.tasks)
const [tasks, setTasks] = useState([])
const dispatch = useDispatch()
15
 // При каждом изменения стора мы берем с localStorage все данные
useEffect(() => {
const tasksLocal = JSON.parse(localStorage.getItem('task'))

sortFunc(isProductivite, isEducation, isImportant, isHealth, setTasks,

tasksLocal)
}, [tasksRed, isProductivite, isEducation, isHealth, isImportant])
const deletedTask = (item) => {
dispatch(addDeletedTask(item))
dispatch(removeTask(item))
if (item.star) {
dispatch(removeImportantTask(item))
}
}
const checkTask = (item) => {
dispatch(addModalTask(item))
dispatch(turnOnModalAdd())
}
const deleteTaskModal = (item) => {
dispatch(deletedTasks(item))
dispatch(deleteImportantTask(item))
}
return (
<div className="myPage">
<Search />
<h1>Мои задачи</h1>
<TasksList
setTasks={setTasks}
checkTask={checkTask}
tasks={tasks}
16
 deletedTask={deletedTask}
dispatchFunction={(newTasks) =>
dispatch(dragAndDrop(newTasks))}
/>
<ModalAddTask deleteTask={deleteTaskModal} />
</div>
);
}

export default MyTasks;

Completed — отображает выполненные задачи:
import { useEffect, useState } from "react";
import ModalAddTask from "../../components/modalAddTask";
import Search from "../../components/search";
import TasksList from "../../components/tasksList";
import { useSelector } from "react-redux/es/exports";
import { useDispatch } from 'react-redux/es/exports'
import { addModalTask, deletedTasks, dragAndDrop, removeTask,
turnOnModalAdd } from "../../store/taskSlice/TaskSlice";
import '../pages.css'
import { addDeletedTask } from
"../../store/deletedTaskSlice/DeletedTaskSlice";
import { deleteImportantTask, removeImportantTask } from
'../../store/importantTaskSlice/ImportantTaskSlice';
import { sortFunc } from "../MyTasks";
const Completed = () => {
const { isProductivite, isEducation, isHealth, isImportant } =
useSelector(store => store.tags)
const tasksRed = useSelector(store => store.tasks.tasks)
const [tasks, setTasks] = useState([])
17
 const dispatch = useDispatch()
// При каждом изменения стора мы берем с localStorage все данные и
фильтруем по выполненным

useEffect(() => {
const tasksLocal = JSON.parse(localStorage.getItem('task'))?.filter(item
=> item.isCompleted === true)
sortFunc(isProductivite, isEducation, isImportant, isHealth, setTasks,
tasksLocal)
}, [tasksRed, isProductivite, isEducation, isHealth, isImportant])
const deletedTask = (item) => {
dispatch(addDeletedTask(item))
dispatch(removeTask(item))
if (item.star) {
dispatch(removeImportantTask(item))
}
}
const checkTask = (item) => {
dispatch(addModalTask(item))
dispatch(turnOnModalAdd())
}
const deleteTaskModal = (item) => {
dispatch(deletedTasks(item))
dispatch(deleteImportantTask(item))
}
return (
<div className="myPage">
<Search />
<h1>Выполненные</h1>
<TasksList
18
 checkTask={checkTask}
tasks={tasks}
deletedTask={deletedTask}
dispatchFunction={(newTasks) =>
dispatch(dragAndDrop(newTasks))}
/>
<ModalAddTask deleteTask={deleteTaskModal} />
</div>
);
}
export default Completed;
Important — показывает задачи с высоким приоритетом:
import { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux/es/exports";
import ModalAddTask from "../../components/modalAddTask";
import Search from "../../components/search";
import TasksList from "../../components/tasksList";
import { addDeletedTask } from
"../../store/deletedTaskSlice/DeletedTaskSlice";
import { deleteImportantTask, dragAndDropImportant,
removeImportantTask } from
'../../store/importantTaskSlice/ImportantTaskSlice';
import { addModalTask, deletedTasks, removeTask,
turnOnModalAdd } from "../../store/taskSlice/TaskSlice";
import { sortFunc } from "../MyTasks";
import '../pages.css'
const Important = () => {
const { isProductivite, isEducation, isHealth, isImportant } =
useSelector(store => store.tags)
const tasksRed = useSelector(store =>
19
store.importantTasks.importantTasks)
const [tasks, setTasks] = useState([])

const dispatch = useDispatch()

// При каждом изменения стора мы берем с localStorage все
данные
useEffect(() => {
const tasksLocal =
JSON.parse(localStorage.getItem('importantTask'))
sortFunc(isProductivite, isEducation, isImportant, isHealth,
setTasks, tasksLocal)
}, [tasksRed, isProductivite, isEducation, isHealth, isImportant])
const deletedTask = (item) => {
dispatch(addDeletedTask(item))
dispatch(removeTask(item))
dispatch(removeImportantTask(item))
}
const checkTask = (item) => {
dispatch(addModalTask(item))
dispatch(turnOnModalAdd())
}
const deleteTaskModal = (item) => {
dispatch(deletedTasks(item))
dispatch(deleteImportantTask(item))
}
return (
<div className="myPage">
<Search />
<h1>Важные</h1>
<TasksList
20
 importPage={true}
checkTask={checkTask}
tasks={tasks}
deletedTask={deletedTask}
dispatchFunction={(newTask) =>
dispatch(dragAndDropImportant(newTask))}
/>
<ModalAddTask deleteTask={deleteTaskModal} />
</div>
);
}
export default Important;
Deleted — страница для управления удаленными задачами:
import ModalAddTask from "../../components/modalAddTask";
import Search from "../../components/search";
import TasksList from "../../components/tasksList";
import { useSelector, useDispatch } from "react-redux/es/exports";
import { useEffect, useState } from "react";
import '../pages.css'
import { dragAndDropDeleted, resetDeletedTask } from
"../../store/deletedTaskSlice/DeletedTaskSlice";
import { addTask } from "../../store/taskSlice/TaskSlice";
import { addImportantTask } from
'../../store/importantTaskSlice/ImportantTaskSlice';
import { sortFunc } from "../MyTasks";
const Deleted = () => {
const { isProductivite, isEducation, isHealth, isImportant } =
useSelector(store => store.tags)
const tasksRed = useSelector(store =>
store.deletedTasks.deletedTasks)
21
 const [tasks, setTasks] = useState([])
const dispatch = useDispatch()
useEffect(() => {
const tasksLocal =
JSON.parse(localStorage.getItem('deletedTask'))
sortFunc(isProductivite, isEducation, isImportant, isHealth,
setTasks, tasksLocal)
}, [tasksRed, isProductivite, isEducation, isHealth, isImportant])
const deletedTask = (item) => {
dispatch(resetDeletedTask(item))
dispatch(addTask(item))
if (item.star) {
dispatch(addImportantTask(item))
}
}
return (
<div className="myPage">
<Search />
<h1>Удаленные</h1>
<TasksList
tasks={tasks}
deletedTask={deletedTask}
dispatchFunction={(newTask) =>
dispatch(dragAndDropDeleted(newTask))}
deletedPage={true}
/>
<ModalAddTask />
</div>
);
}
22
 export default Deleted;

Result — выводит результаты поиска:

import { useEffect, useState } from "react";
import ModalAddTask from "../../components/modalAddTask";
import Search from "../../components/search";
import TasksList from "../../components/tasksList";
import { useSelector } from "react-redux/es/exports";
import { useDispatch } from 'react-redux/es/exports'
import { addModalTask, dragAndDrop, removeTask,
turnOnModalAdd } from "../../store/taskSlice/TaskSlice";
import '../pages.css'
import { addDeletedTask } from
"../../store/deletedTaskSlice/DeletedTaskSlice";
import { removeImportantTask } from
'../../store/importantTaskSlice/ImportantTaskSlice';
import { sortFunc } from "../MyTasks";
const Result = () => {
const { isProductivite, isEducation, isHealth, isImportant } =
useSelector(store => store.tags)
const { searchValue } = useSelector(store => store.tasks)
const tasksRed = useSelector(store => store.tasks.tasks)
const [tasks, setTasks] = useState([])
const dispatch = useDispatch()
useEffect(() => {
const tasksLocal = JSON.parse(localStorage.getItem('task'))
if (searchValue) {

23
 const searchTasks = tasksLocal.filter(item =>
item.title.toLowerCase().indexOf(searchValue.toLowerCase()) != -1)
sortFunc(isProductivite, isEducation, isImportant, isHealth,
setTasks, searchTasks)

} else {
setTasks([])
}
}, [tasksRed, searchValue, isProductivite, isEducation, isHealth,
isImportant])
const deletedTask = (item) => {
dispatch(addDeletedTask(item))
dispatch(removeTask(item))
if (item.star) {
dispatch(removeImportantTask(item))
}
}
const checkTask = (item) => {
dispatch(addModalTask(item))
dispatch(turnOnModalAdd())
}
// Все совпадающие буквы оборачивает в тег b для жирного
шрифта
const makeBold = (item) => {
const re = new RegExp(searchValue, "g")
return item.replace(re, "<b>" + searchValue + "</b>")
};
return (
<div className="myPage">
<Search />
24
 <h1>Результаты</h1>
<TasksList
isResult={true}
makeBold={makeBold}
setTasks={setTasks}
checkTask={checkTask}
tasks={tasks}
deletedTask={deletedTask}
dispatchFunction={(newTasks) =>
dispatch(dragAndDrop(newTasks))}
/>
<ModalAddTask />
</div>
);
}
export default Result;

25
 Заключение
В ходе выполнения учебной практики я разработал веб-приложение
"Todolist", которое позволило мне на практике освоить ключевые аспекты
фронтенд-разработки с использованием JavaScript, React и Redux Toolkit.
Проект обеспечил глубокое понимание компонентного подхода, управления
состоянием и взаимодействия между компонентами.
Одной из важнейших частей работы стало использование Redux Toolkit
для централизованного управления состоянием. Это позволило упростить
логику приложения, сделать его код более структурированным и
поддерживаемым. Благодаря централизованному хранилищу, все данные
приложения доступны любому компоненту без необходимости передачи их
через пропсы. Работа с экшенами и редюсерами дала мне четкое понимание
принципов иммутабельности и предсказуемости в управлении состоянием.
Использование хуков useSelector и useDispatch позволило
интегрировать Redux Toolkit с React и упростить доступ к данным из любого
компонента. Такой подход помог эффективно обрабатывать
пользовательские действия, такие как добавление или удаление задач, а
также переключение их статуса. Кроме того, я освоил работу с побочными
эффектами с помощью useEffect, что позволило мне добавлять в приложение
функции, такие как синхронизация данных с локальным хранилищем
браузера.
Приложение было построено на основе гибкой архитектуры.
Разделение на модули — страницы, компоненты, UI-элементы и срезы
состояния — обеспечило высокую читаемость и масштабируемость кода.
Благодаря четкой организации папок и файлов стало проще добавлять новые
26
функции и поддерживать существующий код. Например, возможность
организовать задачи по важности, статусу выполнения и тегам делает
приложение более универсальным для различных сценариев использования.
Проект также научил меня принципам создания интуитивно понятного
интерфейса. Важно было не только реализовать основную
функциональность, но и создать удобную для пользователя систему
навигации и поиска. Такие элементы, как боковая панель (sidebar) и
поисковая строка, сделали приложение простым и эффективным в
использовании даже при большом количестве задач.
В процессе разработки я столкнулся с некоторыми сложностями,
такими как правильная организация состояния и маршрутизация между
страницами. Однако благодаря использованию Redux Toolkit и грамотной
структуре приложения эти задачи были успешно решены. Я также освоил
основы маршрутизации в React, что позволит в будущем добавлять в
приложение новые страницы и функции, такие как авторизация и
синхронизация данных с сервером.
Проект "Todolist" можно развивать и дальше. В будущем планируется
добавить авторизацию пользователей, чтобы каждый пользователь мог
хранить свои задачи и управлять ими. Также возможна интеграция с
сервером, чтобы данные могли синхронизироваться между различными
устройствами. Еще одной полезной функцией станет уведомление о
дедлайнах, что сделает приложение более полезным для организации
рабочего процесса.
Таким образом, данный проект не только расширил мои знания в
области веб-разработки, но и предоставил практический опыт создания
масштабируемого приложения с интуитивным интерфейсом. Полученные
навыки и знания будут полезны мне в дальнейшей учебе и карьере
разработчика.

27
 Список литературы
1) Flanagan, D. JavaScript: The Definitive Guide. O'Reilly Media, 2020.
2) Abramov, D., & Clark, A. Redux: Managing State with React.
O'Reilly Media, 2019.
3) React Documentation: https://reactjs.org/
4) Redux Toolkit Documentation: https://redux-toolkit.js.org/

28
Приложение

29