Сегодня мы узнаем, как составить список дел с помощью Redux для управления состоянием нашего приложения.
Redux - популярная библиотека управления состоянием, особенно с React, но одним из недостатков / жалоб на Redux часто является то, насколько она может быть бойкой. Войдите в Redux Toolkit. Redux Toolkit значительно сокращает объем кода Redux, который нам придется писать, и значительно улучшает опыт разработчиков, как вы скоро увидите. Итак, без лишних слов, давайте перейдем к созданию нашего списка дел.
Предпосылки
- React Knowledge
- Знание TypeScript
- Знание JavaScript
- Понимание того, как работает Redux (это поможет, но не обязательно)
Давайте начнем
Прежде чем мы сделаем что-либо еще, нашим первым шагом будет создание нашего проекта. Мы будем использовать один из шаблонов приложений create-react-app в качестве стартера для этого проекта. Выполнение следующей команды создаст стартовый проект, который мы будем использовать.
Существует шаблон для redux-typescript, но нам все равно придется удалить большую часть файлов и кода для этого проекта.
Настройка проекта
npx create-react-app redux-todo-list --template typescript
После того, как ваш проект построен, вы можете открыть его в редакторе кода по вашему выбору. Я буду использовать VS Code, но вы можете использовать все, что вам удобно.
Открыв наш проект, пора удалить ненужные файлы из папки src:
- App.test.tsx
- App.css
- index.css
- logo.svg
- setupTests.ts
- reportWebVitals.ts
Наша папка src должна выглядеть примерно так, когда мы закончим.
После удаления всех ненужных файлов и папок пора очистить файлы App.tsx и index.tsx. Он должен выглядеть так, как показано ниже.
Последнее, что нам нужно сделать для настройки нашего проекта, - это установить несколько пакетов. Выполнение следующей команды установит пакеты, которые нам понадобятся для нашего приложения.
npm install @reduxjs/toolkit react-redux @material-ui/core @material-ui/icons uuid @types/uuid
Или если вы используете пряжу.
yarn add @reduxjs/toolkit react-redux @material-ui/core @material-ui/icons uuid @types/uuid
Описание пакетов
Мы будем использовать @ material-ui / icons и @ material-ui / core для стилизации нашего приложения, uuid для создания уникальных идентификаторов, @ reduxjs / toolkit отвечает за наше управление состоянием, а response-redux будет использоваться для предоставления нашего состояния приложению React.
Убедитесь, что наше приложение работает
Идите вперед и выполните следующую команду, чтобы убедиться, что наше приложение готово к работе.
npm start
Или если вы используете пряжу.
yarn start
Приступим к программированию
Создание типа дел
Поскольку наш проект структурирован так, как нам нужно, пора написать код. Я хочу начать с создания модели того, как будет структурирован наш список дел. Начнем с создания новой папки в нашей папке src и назовем ее модели. Давайте создадим файл в папке наших моделей под названием Todo.ts. Должно получиться вот так.
Настройка Redux в приложении
Теперь, когда наш интерфейс создан для нашего Todo, пришло время настроить наш магазин Redux и то, что Redux Toolkit называет «срезом». Мы можем продолжить и создать новую папку в нашей папке src под названием redux. Затем давайте добавим в нашу папку redux файл под названием todoSlice.ts. Это будет контролировать работу нашего управления состоянием для нашего приложения и будет выглядеть следующим образом.
Объяснение приведенного выше кода:
Начнем с строки 5 приведенного выше примера. Это довольно понятно, но нам нужно будет установить, какое состояние будет в начале нашего приложения (в данном случае это пустой массив типа Todo). Когда мы перейдем к строке 7, мы впервые увидим Redux Toolkit в действии.
Теперь createSlice - это функция, встроенная в Redux Toolkit, которая принимает объект в качестве параметра с 3 обязательными полями.
Первое поле - имя. Это важно, поскольку оно используется для помощи в именовании сгенерированных типов действий из createSlice.
Второе поле - это initialState, и, как можно понять из названия, это будет то же состояние, в котором мы изначально запускаем наше приложение.
Третье поле - это наши редукторы, в которых будет происходить различная обработка состояния. В приведенном выше коде вы можете видеть, что у меня есть 3 редуктора (для добавления, удаления и установки состояния завершения задач). Вы также заметите, что способ управления состоянием делает его изменчивым (хотя это не так). За кулисами Redux Toolkit использует библиотеку под названием Immer. Короче говоря, Immer - это просто библиотека, которая упрощает запись обработки неизменяемого состояния (меньше шаблонов). Ниже приведена ссылка на страницу документации Redux Toolkit, где это обсуждается, если вам интересно.
Вот и все. Приведенный выше код будет контролировать состояние всего нашего приложения. Те из вас, кто пишет весь свой код redux вручную (действия и редукторы), заметят, насколько это меньше шаблонов.
Следующим шагом будет настройка нашего магазина для Redux. Начнем с создания нового файла в нашей папке redux с именем store.ts.
Объяснение приведенного выше кода:
Здесь не о чем говорить, потому что это очень просто, но Redux Toolkit предоставляет абстракцию в хранилище Redux под названием configureStore. По сути, все, что нам нужно сделать, чтобы это сработало, - это передать все наши фрагменты параметру reducer в функции configureStore. Кроме того, мы предоставляем типы для некоторых вещей, чтобы впоследствии сделать TypeScript счастливым. Эти типы будут переданы в useSelector и useDispatch (перехватчики response-redux) как способ описания типов. Ниже приведена ссылка на документацию API для configureStore для тех, кто хотел бы узнать больше.
Добавление Redux в наше приложение React
Для тех из вас, кто раньше использовал Redux, этот процесс остается неизменным. Здесь вступает в игру пакет, который мы установили ранее (response-redux). Все, что мы собираемся, это обернуть все наше приложение React внутри компонента, предоставляемого react-redux. Для этого мы собираемся отредактировать наш файл index.tsx.
Объяснение приведенного выше кода:
Здесь тоже нечего объяснять, но, по сути, мы оборачиваем наш компонент Provider вокруг компонента App. Это позволит нам подключиться к нашему магазину Redux из любого места в нашем приложении React, как вы сейчас увидите. Ниже приведена ссылка на документацию react-redux по компоненту Provider, если вы хотите узнать о нем больше.
Интеграция Redux в наш пользовательский интерфейс
Это будет последний шаг, и вы увидите, насколько простой Redux Toolkit позволяет нам работать с react-redux.
Вот краткое объяснение того, что мы собираемся делать, прежде чем мы начнем. Прежде всего, мы не будем писать наши собственные стили для этого приложения (хотя вы можете, если хотите). Здесь в игру вступит Material-UI. У нас будет текстовое поле и кнопка, которая будет отвечать за добавление элементов в наш список дел. Под этим текстовым полем и кнопка будет наш список элементов. Каждый элемент будет отображаться с описанием элементов задачи, флажком для отметки элемента как выполненным и кнопкой удаления для удаления задач из списка. Вот и все, поэтому давайте напишем код.
Объяснение приведенного выше кода:
Первое, что нам нужно сделать, это добавить несколько строк кода в наш файл index.tsx. Мы собираемся импортировать и добавлять компонент CSSBaseline из Material-UI. Все, что это делает, - это добавление некоторых интеллектуальных сбросов и значений по умолчанию в наш CSS.
Пришло время написать наш пользовательский интерфейс. Весь код в моем примере будет находиться в файле App.tsx, но я настоятельно рекомендую разбить все на отдельные файлы и компоненты, если вы создавали реальное приложение.
Чтобы не было путаницы, я не буду вдаваться в подробности Material-UI (для тех, кто не использовал его раньше, не нужно слишком углубляться в то, что делает каждый компонент). В приведенном выше коде важно то, как мы отправляем наши действия. Вы заметите, как называются действия в зависимости от того, как мы назвали наши редукторы (addTodo, removeTodo, setTodoStatus).
Давайте сначала поговорим о ловушке useDispatch и о том, как она подключается к различным элементам, которые мы создали в нашем файле todoSlice.ts.
В строке 46 мы отправляем действие addTodo. Это действительно очень просто, потому что нам просто нужно передать ему описание, а из-за того, как мы настроили его в нашем срезе, ID и Завершено состояние будут сгенерированы автоматически.
В строке 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.
Больше контента на plainenglish.io
