Простое управление состоянием для обмена данными между компонентами стало проще
В 2020 году веб-разработка основана не только на компонентных подходах, но и на использовании решений для управления состоянием.
В ранних фреймворках JavaScript, таких как Angular, состояния вашего приложения обычно встраиваются в маршруты, службы, контроллеры, локальное хранилище. и хранилище сеансов.
Даже если кажется полезным иметь так много различных решений для хранения данных, это становится проблемой, когда у вас есть большое приложение, и трудно отслеживать, что и где хранилось.
Со временем для устранения этого недостатка родились сторонние решения, такие как Redux и Vuex.
Svelte использует более упрощенный подход к управлению состоянием, устраняя необходимость в установке библиотек и предлагая магазины, которые управляют состоянием в рамках фреймворка.
В этой статье мы увидим, как Svelte управляет и обрабатывает состояния для обмена данными между компонентами.
Контекстный API
Контекстный API Svelte идеально подходит для межкомпонентного взаимодействия без необходимости усложнять кодовую базу, передавая реквизиты.
Контекстный API предоставляется с помощью 2 функций, которые предоставляются пакетом svelte: getContext и setContext.
Вы можете сделать объект или значение доступным где угодно в приложении, установив его в контексте и связав его с ключом:
Чтобы сделать someKey доступным в другом компоненте приложения, просто импортируйте его с помощью функции getContext:
Обратите внимание, что getContext можно использовать только для получения ключа в компоненте, который использовал setContext, или в компоненте в том же дереве компонентов.
Для передачи свойств и значений двух компонентов в разных деревьях Svelte использует хранилища.
Использование магазинов Svelte
Svelte store - отличный инструмент для управления состоянием вашего приложения, когда компоненты должны взаимодействовать друг с другом, не передавая слишком много реквизитов, и у вас есть некоторые свойства, к которым должны получить доступ разные компоненты.
Svelte обрабатывает этот тип свойства через хранилища, хранилище - это объект, который содержит значение и позволяет вам получать уведомление об изменении этого значения.
Представьте себе приложение с вошедшим в систему пользователем.
Было бы утомительно передавать свойство user= каждому компоненту.
В Svelte есть два типа хранилищ для обработки состояния в приложениях: writable и readable хранилища.
Записываемые магазины
Записываемые хранилища - это объекты, которые содержат значения или свойства, к которым могут обращаться различные компоненты.
Давайте воспользуемся записываемым хранилищем для хранения значения, которое мы затем можем изменить или передать нашему приложению.
Чтобы получить доступ к этому значению, вы должны экспортировать его из магазина и сохранить как файл JavaScript:
Затем импортируйте его в любой другой компонент:
Значение в доступном для записи хранилище можно изменить.
Если вам нужно изменить значение city в любом компоненте, куда он импортируется, вы можете использовать метод set():
Или вы можете использовать метод update() для запуска обратного вызова, который передает текущее значение в качестве аргумента:
Еще один способ заставить компоненты следить за изменениями значения, установленного в вашем магазине, - это использовать subscribe() метод Svelte:
Читаемые магазины
Читаемое хранилище, как следует из названия, предназначено только для чтения.
Его можно использовать, если пользователь не должен манипулировать данными, управляемыми в магазине.
Доступные для чтения хранилища особенные, потому что их нельзя обновлять извне, нет set() или update() метода.
При использовании читаемого хранилища вы должны установить его значение с момента создания.
Читаемые хранилища в основном используются для обработки данных, которые должны быть неизменными.
Давайте посмотрим на пример и сделаем счетчик, используя читаемое хранилище:
Приведенный выше счетчик можно затем импортировать в другой компонент:
Заключение
Когда дело доходит до управления состоянием, Svelte не изобретает велосипед:
Мы уже знакомы с идеей реализации управления состоянием через магазины из React, Angular и Vue.
Адаптивность Svelte делает его отличным выбором для создания небольших приложений, которые могут требовать от вас определенной степени обработки состояния.
Возможность создавать собственные хранилища позволяет сэкономить много шаблонного кода (который можно заменить библиотеками) и позволяет реализовать хранилища с логикой, зависящей от предметной области.
Конечно, мы должны увидеть больше многообещающих функций и изменений в этом с большим количеством участников репозитория Svelte на GitHub.
Спасибо за прочтение!
