RecoilJS — современная библиотека управления состоянием для React, разработанная командой Facebook. Вы можете спросить: Еще одна библиотека управления состоянием? Я использую Redux с Redux Toolkit. Зачем мне что-то еще?. Ответ прост. Для простого CRUD-приложения с Redux Toolkit вам нужно написать тонны кода с редьюсерами, действиями, дополнительными редьюсерами и т. д. С RecoilJS все просто. В этой статье я покажу вам, как создать CRUD-приложение с помощью React+RecoilJS и интегрировать его с серверной частью.
Основные понятия отдачи
Атомы
Атом является частью государства. Вы можете получить его значение и установить для него значение.
Селектор
Селектор является частью производного состояния. Как атомы, вы получаете и устанавливаете это.
Асинхронный селектор
Селекторы также могут представлять результат обещания. Например, вызов API для выборки данных может быть заключен в селектор.
Для рендеринга данных из асинхронных селекторов вам необходимо обернуть ваши компоненты React.Suspense, потому что данные могут не загружаться при запуске рендеринга:
Я рекомендую вам прочитать все документы с официального сайта https://recoiljs.org/docs/basic-tutorial/intro. Это займет около 15 минут вашего времени, документы очень легко читаются.
Получение данных
С помощью асинхронного селектора вы можете легко получать данные из серверной части. Но изменить эти данные нельзя, их нужно где-то хранить. Для таких случаев Recoil предоставляет интересный метод: передача асинхронного селектора в качестве значения атома по умолчанию.
Селектор загружает данные из API, а атом сохраняет их. Вот и все, никаких действий или мутаций, всего 9 строк кода.
Создавать
Для создания новой отрасли нам нужно отправить данные в серверную часть и добавить ответ в массив состояния отрасли. Я предпочитаю оборачивать повторно используемый код в виде хуков. Итак, давайте создадим хук, выполняющий операции модификации industriesState:
Обновлять
Тот же подход для обновлений, но вместо добавления мы заменяем обновленную отрасль в массиве на новую:
Удалить
А для удаления просто фильтруем отрасли:
Собираем все вместе
Теперь у нас есть все 4 CRUD-операции:
Заключение
Библиотеки должны упрощать работу разработчиков, и RecoilJS делает это. Пока она находится в экспериментальной стадии, но я уверен, что у этой библиотеки большое будущее.
Это все на сегодня! Если у вас есть вопросы, не стесняйтесь, пишите их в комментариях.
Увидимся в следующий раз! Сервус!
