Как использовать FLUX один диспетчер со многими экземплярами вложенных компонентов? - PullRequest
Новая
       10

Как использовать FLUX один диспетчер со многими экземплярами вложенных компонентов?

0 голосов
/ 09 мая 2019

Примечание

Вопрос не в React, Redux, Vue или других фреймворках или библиотеках, а только в FLUX, чтобы понять его основные принципы.

Иерархия

Ниже вы можете увидеть иерархию магазинов / моделей, которую можно увидеть на странице. 

page
    basket
    item
        materials
            1
                colors
            2
                colors
            ...
        backColors
        count
    items
        1
            materials
                1
                    colors
                2
                    colors
                ...
            backColors
            count
        2
            materials
                1
                    colors
                2
                    colors
                ...
            backColors
            count
        ...
    popupItem
        materials
                1
                    colors
                2
                    colors
                ...
        backColors
        count

Вы также можете посмотреть на «иллюстрацию», которую я создал при изучении Vue и идеологии реактивного пользовательского интерфейса в целом, если вы не против русского языка.

https://jsfiddle.net/wm74f9hb/

Ну, у нас есть:

  • root " page ".
  • Тогда одна " корзина ", содержащая продукты, которые люди хотят купить.
  • " item " содержит подробную информацию о текущем открытом товаре.
  • " items " - список других элементов, относящихся к текущему виду "Продукты, которые вам также могут понравиться:"
  • " popupItem " - это всплывающее окно с подробной информацией о другом продукте, которое появляется, когда посетитель нажимает на что-то из списка " items ".

Подробная информация о каждом элементе состоит из:

  • " материалы " - перечень материалов, из которых может быть изготовлен предмет.
  • " colors " - каждый материал имеет набор своих собственных цветов
  • " backColors " - выглядит точно так же, как " colors ", но принадлежит непосредственно элементу.
  • " count " - это количество товара, которое посетитель хочет положить в корзину.

Вопросы

Я понимаю, что если я хочу уведомить диспетчера об изменении цвета, я могу отправить событие "color_change", для изменения количества - событие "count_change".

Также я понимаю, что если есть несколько компонентов " colors " или " count ", я могу отправить событие "color_change" с полезной нагрузкой, содержащей "id" или "index" компонента.

Две вещи, которые я не могу понять, не встречаются в руководствах и не могут их погуглить:

  1. Как уведомить диспетчера о каком-либо компоненте, глубоко вложенном в другие компоненты? Например, page.items[1]materials[1].colors.
  2. Почему диспетчер передает события каждому магазину, почему магазины не могут подписаться только на те события, которые им действительно нужны?

По первому вопросу у меня лично есть следующие решения:

  • 1,1. Прикрепите какой-нибудь искусственный уникальный идентификатор к каждому магазину 1, 2, 3, 4, 5, ... и т. Д. И включите его в полезную нагрузку.
  • 1,3. Используйте несколько диспетчеров. Например, компоненты " материалы ", " цвета ", " backColors " и " count " всегда изолированы внутри " item"компоненты, поэтому кажется логичным присоединить персональный диспетчер к каждому" item"и сделать сигнал вложенным компонентам этому" диспетчеру элементов ". Во флэш-стиле это нет-нет-нет, и я совершенно не понимаю этого.

Что касается второго вопроса, я не понимаю, как это может повредить чему-либо: dispatcher.on("color_change", function (payload) { colors.setValue(payload.id) })

...