Javascript 如何在Redux还原器中处理树形实体？

我一直在思考如何实现一个reducer，它的实体可以有相同类型的子对象

让我们以reddit评论为例：每个评论都可以有子评论，子评论本身也可以有评论，等等。 出于简化原因，注释是类型为

{id，pageId，value，children}

的记录，其中

pageId

是reddit页面

围绕这一点，我们将如何对减速器进行建模？我在考虑让reducer成为注释的map->id，您可以使用

pageId

按页面进行过滤

问题是，例如，当我们想要向嵌套的注释添加注释时：我们需要在映射的根上创建记录，然后在父-子属性中添加其id。要显示我们需要获取所有注释的所有注释，请过滤顶部的注释（例如，这些注释将作为orderedList保存在页面缩减器中），然后对它们进行迭代，在遇到子对象时使用递归从注释对象获取

---

有没有比这更好的方法或者它有缺陷？

您的商店（reducer）结构可能与您想要的视图模型（作为道具传递给组件的模型）不同。您可以将所有注释保留在数组中，并通过高级“智能”组件上MapStateTrops中的链接将它们映射到树中。您将在reducer中获得简单的状态管理和方便的视图模型供组件使用。

官方解决方案是使用以下方式保持您的状态：

{
  comments: {
    1: {
      id: 1,
      children: [2, 3]
    },
    2: {
      id: 2,
      children: []
    },
    3: {
      id: 3,
      children: [42]
    },
    ...
  }
}

您是对的，您需要

connect（）

注释

组件，这样每个组件都可以从Redux存储中递归地查询它感兴趣的
子组件
：

class Comment extends Component {
  static propTypes = {
    comment: PropTypes.object.isRequired,
    childComments: PropTypes.arrayOf(PropTypes.object.isRequired).isRequired
  },

  render() {
    return (
      <div>
        {this.props.comment.text}
        {this.props.childComments.map(child => <Comment key={child.id} comment={child} />)}
      </div> 
    );
  }
}

function mapStateToProps(state, ownProps) {
  return {
    childComments: ownProps.comment.children.map(id => state.comments[id])
  };
}

Comment = connect(mapStateToProps)(Comment);
export default Comment;

类注释扩展组件{
静态类型={
注释：PropTypes.object.isRequired，
childComments:PropTypes.arrayOf（PropTypes.object.isRequired）.isRequired
},
render（）{
返回(
{this.props.comment.text}
{this.props.childComments.map（child=>）}
);
}
}
函数mapStateToProps（状态，ownProps）{
返回{
childComments:ownProps.comment.children.map（id=>state.comments[id]）
};
}
注释=连接（MapStateTops）（注释）；
导出默认注释；

我们认为这是一个很好的妥协。您将
注释作为道具传递，但组件从商店中检索
子组件
。
我想您可以试试Normalizer：我自己没有使用过，所以我不确定它是否对您有帮助。我了解Normalizer，我更想知道在组件中如何处理它是否有一个“公认”的解决方案。除非您连接（）每个注释，否则您将需要在每次更改上执行与normalizer相反的操作，即使您确实连接了看起来有点混乱的注释，但对于模式，您实际上是如何做到这一点的？请给出一个例子，这个例子使用normalizer:。此外，normalizer还有一些测试，希望能够展示如何使用它。但如果您的数据不是来自API呢？我是否应该像normalizer那样对数据建模？一般来说，我会推荐它，是的。另见