Reactjs Redux中的多态性和动作冒泡？

我正在使用Redux（+React）对层次结构进行操作，我有两个问题：

如何在Redux中实现多态性

如何让“动作泡泡”

我的问题更准确地表达了：

我正在React中使用Redux制作结构代码编辑器。所谓结构编辑器，我的意思是我有一个带有节点的树结构，我的应用程序应该在AST而不是纯文本上运行

这些节点可以有各种类型（因为它是用于编辑CSS文件的编辑器，这些类型例如：“规则”、“声明”、“属性”、“值”，但更重要的是它们确实有一些类型）。所以JS中有一些对象具有属性

type

，而它的

type

决定了它的。。。类型；）

假设我有这样的节点：

{
    type: 'property', 
    id: 4, 
    rule: '.content > ul > li', 
    children: [...blah blah......]
}

我希望能够写出这样的东西：

store.dispatch（{type:'click'，nodeId:4}）

点击。但我希望单击

规则

类型的节点会产生与单击

属性

类型的节点不同的效果。多态性（但我希望有一个react组件

，以防止代码重复）

我知道我可以通过切换/案例或创建自己的子函数（我的意思是将操作委托给函数）来实现这一点，但我不想重新发明轮子。我认为多态性的支持对许多应用程序都很有用，不仅仅是我的应用程序

那么-如何在Redux中实现多态性呢

2.，
关于行动冒泡的第二个问题。因为我得到了树形结构，例如：

{
    type: 'rule',
    rule: 'body div',
    id: 1,
    children: [
         {
              type: 'declaration',
              id: 2,
              children: [
                    {type: 'property', name: 'display', id: 3},
                    {type: 'value', value: 'block', id: 4},
              ]
         } 
    ]
}

我有适当的React组件来呈现该结构（我有基于哑函数的无状态React 0.14组件，所以我认为组件的代码现在不是很重要）。无论如何，我得到了表示单个AST节点的

组件

我希望用户可以单击id=3的节点（

{type:'property'，name:'display'，id:3}，

），操作将自动“冒泡”到节点的父节点（在本例中，是到id=2的声明节点和到id=1的规则节点）

据我所知，Redux中没有“动作冒泡”。也许应该是这样？或者我想通过其他方式实现的目标？（我所说的“动作冒泡”是指类似于浏览器中JavaScript事件中的“事件冒泡”，只是我希望

redux actions

冒泡，而我不希望DOM事件冒泡（这完全是另一回事）。我希望将动作redux到冒泡。当我写“冒泡”时强调总体设计模式，而不是实现

这是我的两个问题：）

多态性

当你提到创建小型可重用函数时，我想你已经找到了答案。我不同意多态性是一个更好的选择。Redux是关于函数式编程的，而不是庞大的继承树

动作冒泡

记住，在Redux/Flux中，你的商店是你唯一的真相来源。您的视图组件（即React元素）从存储中派生其数据。信息（即道具）自上而下地从根元素流向其子元素，然后再流向其子元素，等等

---

因此，您需要做的所有操作就是更新您的商店。其余的自己照顾自己。信息气泡，但不是直接从子对象传递到父对象。相反，它从孩子到商店（通过一个动作），然后再到父母。

我认为这是一个很好的问题，根据我对redux的理解，reducer违反了开放-关闭和单一责任原则，因为它们位于同一个reducer上，您可以处理多个事件，如果您想添加其他处理程序，则需要更改reducer代码

// This is kind of the standard approach 
// It has a big switch case that knows how to handle many actions (single responsibility violation).
// The more actions you have the bigger this function becomes, to handle an other even you need to change the reducer (open closed violation). 
export default function reducer(state = INITIAL_STATE, action) {
  switch (action.type) {
  case 'SET_ENTRIES':
    return setEntries(state, action.payload);
  case 'NEXT':
    return next(state);
  case 'VOTE':
    return vote(state, action.payload)
  }

  // return the current state if the action you try to use dont exist
  return state;
}

在上述情况下，操作将类似于

{type:'VOTE'，payload:{…}}

。。。我个人不喜欢这种方法，因为它不灵活，我认为我们可以通过使用多态性做得更好

// This is a polymorphic aprorach that conforms to all SOLID principles
// This is much simpler and will raise an error if the action does not exist
export default function reducer(state = INITIAL_STATE, action) {
  return action.handler(state, action.payload);
}

---

在上面的例子中，操作看起来像

{handler:vote，payload:{…}}

这种方法更加灵活，您甚至可以使用它创建一个可丢弃的

{handler:（state）=>{…}

。多态性不是关于继承，而是“为不同类型的实体提供单一接口”。( ). 例如，Redux reducer是多态的，因为一个reducer函数应该根据动作类型做出不同的反应：）2。我在“流自上而下”的方法中遇到了问题，因为在每次操作之后，整个树都会被重新命名，应用程序的速度非常慢。也许我做错了，但现在我连接Redux来自己做出反应（没有正式绑定），我将每个无状态元素放在智能有状态容器中，该容器侦听感兴趣的状态片段的更改，并重新启动它的无状态子元素，而不是“自上而下地流”。