如何在Redux reducers中处理树形实体？
我有点纠结于如何实现一个reducer，其中它的实体可以有相同类型的子类。
让我们以reddit评论为例:每个评论都可以有子评论，子评论本身也可以有评论等等。为了简化起见，评论是{id, pageId, value, children}类型的记录，pageId是reddit页面。
如何对减速器进行建模？我在考虑让reducer成为评论的地图-> id，这样你就可以使用pageId按页面进行过滤。
问题是，例如，当我们想要向嵌套的注释添加注释时:我们需要在映射的根上创建记录，然后在父子属性中添加它的id。要显示我们需要获取所有注释的所有注释，请过滤顶部的注释(例如，这些注释将作为orderedList保存在页面缩减程序中)，然后迭代它们，当我们遇到使用递归的子级时，从comments对象中获取。
有没有比这更好的方法，还是有缺陷的？
回答 2
Stack Overflow用户
发布于 2015-10-03 21:41:36
官方的解决方案是使用normalizr来保持这样的状态：
{
comments: {
1: {
id: 1,
children: [2, 3]
},
2: {
id: 2,
children: []
},
3: {
id: 3,
children: [42]
},
...
}
}您说得对，您需要对Comment组件执行connect()操作，以便每个组件都可以从Redux存储中递归地查询它感兴趣的children：
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;我们认为这是一个很好的折衷方案。您将comment作为一个道具传递，但是组件从存储中检索childrenComments。
Stack Overflow用户
发布于 2015-10-03 21:29:12
您的存储(reducer)结构可能与您想要的视图模型(作为道具传递给组件的模型)不同。您只需将所有注释保存在数组中，并通过高级“智能”组件上的mapStateToProps中的链接将它们映射到树。您将在reducer中获得简单的状态管理和一个方便的视图模型以供组件使用。
https://stackoverflow.com/questions/32798193
复制相似问题