• Простое приложение 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/.