Создание To-Do List в React с помощью Redux Toolkit в TypeScript

Создание To-Do List в React с помощью Redux Toolkit в TypeScript

От автора: сегодня мы узнаем, как составить список дел с помощью Redux. Redux — популярная библиотека управления состоянием, особенно в сочетании с React. Возьмем Redux Toolkit. Redux Toolkit значительно сокращает объем кода Redux, который нам придется писать, и значительно улучшает опыт разработки, как вы скоро увидите. Итак, без лишних слов, давайте погрузимся в создание нашего списка дел.

Прежде чем сделаем что-либо еще, нашим первым шагом будет создание проекта. Мы будем использовать один из шаблонов приложений create-react-app в качестве стартера для этого проекта. Выполнение следующей команды создаст стартовый проект, который мы будем использовать.

Есть шаблон для redux-typescript, но нам все равно придется удалить большую часть файлов и кода для этого проекта.

Настройка проекта

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

После того, как проект собран, вы можете открыть его в любом редакторе кода по вашему выбору. Я буду использовать VS Code, но вы можете использовать все, что удобно. Открыв проект, пора удалить ненужные файлы из папки src:

App.test.tsx

App.css

index.css

logo.svg

setupTests.ts

reportWebVitals.ts

Папка src должна выглядеть примерно так, когда мы закончим.

Создание To-Do List в React с помощью Redux Toolkit в TypeScript

После удаления всех ненужных файлов и папок пора очистить файлы App.tsx и index.tsx. Они должны выглядеть так, как показано ниже.

App.tsx

index.tsx

Последнее, что нам нужно сделать для настройки проекта, — это установить несколько пакетов. Выполнение следующей команды установит пакеты, которые нам понадобятся для создания приложения:

Или если вы используете yarn:

Описание пакетов

Мы будем использовать @ material-ui/icons и @ material-ui/core для стилизации нашего приложения, uuid для генерации уникальных идентификаторов, @ reduxjs/toolkit отвечает за управление состоянием, а response-redux будет использоваться для предоставления нашего состояния. в приложение React.

Убедитесь, что наше приложение работает

Выполните следующую команду, чтобы убедиться, что наше приложение готово к работе.

Или если вы используете yarn.

Приступим к кодированию

Создание типа To-Do

Поскольку наш проект структурирован так, как нам нужно, пришло время написать код. Я хочу начать с создания модели того, как будет структурирован наш список дел. Начнем с создания новой папки в папке src и назовем ее models. Давайте создадим файл в папке моделей, который называется Todo.ts. В нём напишем следующее:

Todo.ts

Настройка Redux в приложении

Теперь, когда создан интерфейс для нашего Todo, пришло время настроить Redux и то, что Redux Toolkit называет «срезом». Мы можем продолжить и создать новую папку в нашей папке src под названием redux . Затем давайте добавим файл todoSlice.ts в папку redux . Этот клас будет контролировать работу управления состоянием приложения и будет выглядеть следующим образом.

todoSlice.ts

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Объяснение приведенного выше кода

Начнем с пятой строки приведенного выше примера. Это довольно очевидно, но нам нужно будет установить, какое состояние будет в начале нашего приложения (в данном случае это пустой массив типа Todo). Когда мы перейдем к строке 7, мы впервые увидим Redux Toolkit в действии.

Теперь createSlice — это функция, встроенная в Redux Toolkit, которая принимает объект в качестве параметра с 3 обязательными полями.

Первое поле — это name. Oно используется для именования сгенерированных типов действий из createSlice.

Второе поле — это initialState, и, как можно понять из названия, это будет то состояние, в котором мы изначально запускаем наше приложение.

Третье поле — это reducers, в нём будет происходить различная обработка состояния. В приведенном выше коде вы можете видеть, что у меня есть 3 редуктора (для добавления, удаления и установки состояния завершения задач). Вы также заметите, что то, как я управляю состоянием, делает его изменчивым (хотя это не так). За кулисами Redux Toolkit использует библиотеку под названием Immer. Короче говоря, Immer — это просто библиотека, которая упрощает запись обработки неизменяемого состояния (меньше шаблонов). Ниже приведена ссылка на страницу документации Redux Toolkit, на которой это описано, если вам интересно.

Приведенный выше код будет контролировать состояние всего нашего приложения. Те из вас, кто пишет весь свой код redux вручную, заметят, насколько уменьшится количество шаблонов.

Следующим шагом будет настройка хранилища для Redux. Давайте начнем с создания нового файла в папке Redux под названием store.ts.

store.ts

Объяснение приведенного выше кода

Здесь особо не о чем говорить, потому что это очень просто, но Redux Toolkit предоставляет абстракцию в хранилище Redux под названием configureStore . По сути, все, что нам нужно сделать, чтобы всё сработало, — это передать наши фрагменты параметру reducer в функции configureStore . Кроме того, мы предоставляем типы, которые будут переданы в useSelector и useDispatch ( перехватчики response -redux) как способ описания типов. Ниже приведена ссылка на документацию API для configureStore для тех, кто хотел бы узнать больше.

Добавление Redux в наше приложение React

Для тех из вас, кто раньше использовал Redux, этот процесс остается неизменным. Здесь в игру вступает установленный нами ранее пакет react-redux. Все, что нам нужно, это обернуть приложение React внутри компонента, предоставляемого react-redux. Для этого мы собираемся отредактировать файл index.tsx.

index.tsx

Объяснение приведенного выше кода

Здесь тоже нечего объяснять, но, по сути, мы оборачиваем компонент Provider вокруг компонента App. Это позволит нам подключиться к хранилищу Redux из любой точки приложения React, как вы сейчас увидите. Ниже приведена ссылка на документацию response-redux по компоненту Provider, если вы хотите узнать о нем больше.

Интеграция Redux с пользовательским интерфейсом

Это будет последний шаг, и вы увидите, насколько просто Redux Toolkit позволит нам работать с react-redux.
Вот краткое объяснение того, что мы собираемся делать, прежде чем мы начнем. Прежде всего, мы не будем писать собственные стили для этого приложения (хотя вы можете, если хотите). Здесь в игру вступит Material-UI. У нас будет текстовое поле и кнопка, которая будет отвечать за добавление элементов в наш список дел. Под этим текстовым полем и кнопкой будет наш список элементов. Каждый элемент будет отображаться с описанием элементов задачи, флажком для отметки элемента как выполненным и кнопкой удаления (соответственно — для удаления задач из списка). Вот и все, поэтому давайте напишем код.

index.tsx

Объяснение приведенного выше кода

Первое, что нам нужно сделать, это добавить несколько строк кода в файл index.tsx . Мы собираемся импортировать и добавлять компонент CSSBaseline из Material-UI. Все, что он делает, — это добавление некоторых интеллектуальных сбросов и значений по умолчанию в наш CSS.

Пришло время написать пользовательский интерфейс. Весь код в моем примере будет находиться в файле App.tsx, но я настоятельно рекомендую разбить все на отдельные файлы и компоненты, если вы работаете над реальным приложением.

App.tsx

Чтобы избежать путаницы, я не буду углубляться в детали Material-UI (для тех, кто не использовал его раньше, вам не нужно слишком подробно разбираться с тем, что делает каждый компонент). В приведенном выше коде важно то, как мы отправляем действия. Вы заметите зависимость названия действий от того, как мы назвали редукторы (addTodo, removeTodo, setTodoStatus).

Давайте сначала поговорим о хуке useDispatch и о том, как он подключается к различным элементам, которые мы создали в нашем файле todoSlice.ts.

В строке 46 мы отправляем действие addTodo. Нам нужно передать ему описание, и из-за того, как мы настроили его в срезе, ID и состояние Completed будут сгенерированы автоматически.

В строке 65 мы отправляем действие removeTodo. В этом сценарии нам нужно передать ему только идентификатор элемента задачи. Внутри преобразователя для удаления задачи у нас есть код, который будет соединять элемент задачи с элементом в массиве основе индекса.

В строке 75 мы отправляем действие setTodoStatus . В этом сценарии мы должны передать объект, который был определён в преобразователях в файле todoSlice.ts . Объект содержит как идентификатор, так и статус завершения, который мы хотим установить для элемента задачи. Нам нужны эти два элемента, потому что мы должны иметь возможность найти элемент списка дел в массиве, а также установить статус завершения на основе его значения.

Это объясняет, как мы используем диспетчеризацию, но теперь нам нужно понять, как хук useSelector работает в строке 25. Это важно, потому что мы используем этот хук для создания нашего списка.

В строке 25 вы увидите, что мы передаем стрелочную функцию в качестве параметра хуку useSelector. По сути, эта стрелочная функция описывает, как будут выглядеть данные, которые мы возвращаем. В этом случае мы хотим вернуть все состояние, поэтому я просто возвращаю состояние с другой стороны функции стрелки. Еще одна важная вещь для TypeScript — это стрелочная функция; параметр состояния имеет тип RootState, который мы определили ранее. По сути, это динамически генерируемый тип, полностью основанный на элементах, которые мы передаем в хранилище. Подводя итог, наша переменная todoList будет иметь тип Todo[] который мы можем сопоставить, чтобы сгенерировать список. Вы видите код для этого в строке 53.

И это почти все. У нас есть полностью функционирующее приложение с адаптивным состоянием с использованием Redux. Ниже приведён код на Github, если вы хотите клонировать мой репозиторий и использовать его для сравнения.

Заключение

Redux — это интересная и популярная библиотека, которую используют многие разработчики React. Даже если вы не планируете использовать его в своих проектах, может быть полезно знать и понимать его. По моему мнению, Redux Toolkit — это будущее многих приложений Redux. Он значительно сокращает количество шаблонов и в настоящее время является рекомендуемым подходом Redux. Надеюсь, вы получили полезную информацию из этого руководства о том, насколько удобным может быть Redux Toolkit.

Автор: Brian Francis

Источник: javascript.plainenglish.io

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

React JS с Нуля до Профи

React JS. Полное руководство для современной веб-разработки

Подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.