Как только вы начнете создавать приложения, которые начинают составлять несколько виджетов, и вы пытаетесь управлять состоянием этих виджетов, вы можете начать рассматривать Контейнеры Dojo. Контейнеры позволяют вводить значения в свойства виджета без необходимости импортировать состояние непосредственно в виджет.
Для этого Dojo предоставляет компонент более высокого порядка, аналогичный тому, что вы можете использовать с React. Этот HOC находится в папке @dojo/framework/widget-core/Container.
Допустим, вы хотели работать с потоковым API и обновлять свой виджет, когда поток возвращает новые данные. Мы хотим отобразить эти данные в виде простого списка.
Этот виджет имеет в свойствах массив items. Вы можете привязать этот виджет непосредственно к хранилищу данных и обновлять виджет при поступлении новых данных, но опять же, возможно, мы хотим, чтобы эти данные были доступны в родительском виджете или других используемых виджетах.
Давайте создадим родительский контейнер Application, который будет отображать этот виджет.
Этот конкретный контейнер не делает ничего, кроме передачи своих свойств дочернему виджету Items.
Чтобы использовать контейнер Dojo, нам нужно создать функцию getProperties, которая определяет свойства, возвращаемые в контейнер.
Теперь мы можем обернуть наш AppContainer в контейнер Dojo.
В данном случае "state" — это имя, которое я даю своему контексту, который я называю своим инжектором, поскольку он позволяет мне вводить значения в мои виджеты.
На этом этапе у вас есть возможность управлять своим состоянием. Вы можете использовать хранилища Dojo или создать класс, который принимает invalidator, и вы можете использовать этот invalidator, чтобы сообщить компоненту более высокого порядка, что состояние изменилось, и он передаст его виджету, который он обернул.
А пока давайте возьмем класс, который принимает аннулатор и назовем его контекстом для нашего контейнера. Мы можем рассказать о магазинах Dojo в другом посте.
Именно в этом Context я подписываюсь на свой поток данных и обновляю массив items при поступлении новых данных.
Хорошо, давайте свяжем все это вместе в нашем main.ts, который запускает все приложение.
Когда реестр будет передан проектору, он позаботится о том, чтобы все было подключено должным образом.
Может показаться, что это несколько шагов, но это делает управление состоянием ваших виджетов очень гибким без необходимости привязывать виджеты к источнику данных, что делает их невероятно многоразовыми.
Вы могли бы создавать контейнеры для каждого отдельного виджета в вашем приложении и управлять их состоянием независимо, это было бы очень мощно!
Вы можете увидеть образец этого приложения выше здесь:
Обязательно подпишитесь на рассылку и будьте в курсе последних новостей!
Первоначально опубликовано на сайте learn-dojo.com 15 октября 2018 г.
