- Простое приложение React Create React App
- Пример приложения ToDo с использованием useState
(i) Создание службы API
(ii) Создание контейнера с отслеживанием состояния
(iii) Создание компонента дизайна - Переход на Recoil
(i) Настройка корня
(ii) Создание атомов
(iii) Создание селекторов
(iv) Хуки в контейнере
Простое приложение React Create React App
Во-первых, давайте создадим базовое приложение для реагирования, используя create-react-app и машинописный текст:
$ npx create-react-app recoil-sample --template typescript
Это создаст нам базовое реагирующее приложение с необходимыми пакетами.
Пример приложения ToDo с использованием useState
Далее мы создадим образец приложения ToDo. Для этого мы будем использовать бесплатный онлайн-интерфейс API: https://jsonplaceholder.typicode.com/
Создание службы API
Мы будем использовать axios для вызова API.
Создание контейнера с отслеживанием состояния
Затем нужно создать контейнер, который имеет некоторую примерную логику для вызова всех ToDos при инициализации и вызова Update API при установке флажка, чтобы установить элемент ToDo для завершения.
В конечном счете, вы бы сделали эту бизнес-логику в вспомогательном файле / utils / service / saga, но это только для примера / только для целей тестирования.
Не качество производства :(
Создание компонента дизайна
В вашем TodosComponent я только что создал список задач, переданных из его контейнера, и сделал его таким:
OnClick/OnChange флажка вызывает функцию onCompleteToggle.
Итак, на данном этапе у нас есть выход. Список ToDos вызывается на странице, а изменение состояния флажка вызывает API-интерфейс put и обновляет последнее состояние контейнера.
Переход на отдачу
Прежде чем приступить к этому, сначала давайте разберемся, что такое Recoil:
Recoil — это библиотека управления состоянием для React.
Раньше мы использовали Redux, Mobx или даже простую архитектуру Container-Component для управления состоянием. Я еще не очень много исследовал внутреннюю работу Recoil, но сначала хотел попробовать, сколько кода необходимо изменить.
Настройка рута
$ npm install recoil
Компоненты, использующие состояние отдачи, должны
RecoilRoot
появляться где-то в родительском дереве. Хорошее место, чтобы поместить это в ваш корневой компонент
Мы используем вызов API, когда приложение загружается так:
Что он будет отображать до того, как обещание будет разрешено? Recoil предназначен для работы с React Suspense для обработки ожидающих обработки данных. Обертывание вашего компонента границей приостановки захватит всех потомков, которые все еще находятся на рассмотрении, и отобразит резервный пользовательский интерфейс.
Создание атомов
Атомы содержат источник истины для состояния нашего приложения. В нашем todo-списке источником правды будет массив объектов, каждый из которых представляет элемент todo.
Как видим, по умолчанию будет пустой массив.
Создание селекторов
Селектор представляет часть производного состояния. Вы можете думать о производном состоянии как о результате передачи состояния чистой функции, которая каким-то образом изменяет данное состояние.
Итак, что мы здесь делаем?
Всякий раз, когда происходит изменение состояния, срабатывает функция get. Я знаю, что это не код производственного уровня, но я просто хочу попробовать. При первой загрузке длина массива будет равна 0, поэтому вызывается fetchAllTodos. При обновлении ToDo с помощью функции set функция get обновляет массив allTodos и возвращает обновленный список.
Крючки в контейнере
Подобно useState в React, здесь у нас есть useRecoilState. И код выглядит следующим образом:
Вы можете заметить, что useEffect исчез. todosQuery позаботится об этом во время загрузки приложения.
Наконец, мы имеем тот же результат, что и раньше.
Более подробное сравнение между Classic React и при использовании Recoil из этого запроса на слияние с Github:
https://github.com/jerrythimothyj/recoil-sample/pull/2/files
Отдача все еще является экспериментальной технологией. Более подробную документацию можно найти здесь: https://recoiljs.org/.