如何将FLUX单调度程序与许多嵌套组件实例一起使用？

Question

注意

问题不是关于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和反应式UI意识形态时创建的“插图”。

https://jsfiddle.net/wm74f9hb/

好吧，我们有

• 根“ 页面”。
• 然后是一个“ 购物篮”，其中包含人们想要购买的产品。
• “ 项目”包含有关当前打开的产品的详细信息。
• “ 项目”是与当前类型的“您可能还会喜欢的产品”相关的其他项目的列表。
• “ popupItem ”是一个弹出窗口，其中包含有关其他产品的详细信息，当访问者单击“ 项目”列表中的内容时，就会显示该弹出窗口。

每个项目的详细信息包括：

• “ 材料”-可以制成该物料的材料列表。
• “ 颜色”-每种材料都有一套自己的颜色
• “ backColors ”-看起来与“ 颜色”完全一样，但直接归商品所有。
• “ 计数”是访客希望放入购物篮中的产品数量。

问题

我知道，如果要通知调度员有关颜色的更改，我可以调度“ color_change”事件，以进行计数更改-“ count_change”事件。

我也了解，如果有多个“ 颜色”或“ 计数”组件，则可以分派“ color_change”事件，并保留“ id”或“ index”。

两件我无法理解，手册中没有碰到的内容以及无法谷歌搜索的内容：

1. 如何通知调度程序某个组件深深嵌套在另一个组件中？例如，page.items[1]materials[1].colors。
2. 为什么调度员向每个商店广播事件，为什么商店不能只订阅他们真正需要的事件？

对于第一个问题，我个人有以下解决方案：

• 1.1。将一些人工唯一ID附加到每个商店。 1、2、3、4、5，...等，并将其包含在有效载荷中。
• 1.2。以某种方式通过有效负载传递整个“ page.items[1]materials[1].colors”路径。
• 1.3。使用多个调度程序。例如，“ 材料”，“ 颜色”，“ 背景色”和“ 计数”组件始终为隔离在“ 项目”组件内部，因此将个人调度程序附加到每个“ 项目”并使嵌套的组件向该“项目调度程序”发出信号似乎是合乎逻辑的。以FLUX的方式，这是一个禁忌，我完全不明白这一点。

关于第二个问题，我不知道这会以什么方式伤害任何事物：dispatcher.on("color_change", function (payload) { colors.setValue(payload.id) })