How to handle tree-shaped entities in Redux reducers?

The official solution to this is to use normalizr to keep your state like this:

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

You're right that you'd need to connect() the Comment component so each can recursively query the children it's interested in from the Redux store:

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;

We think this is a good compromise. You pass comment as a prop, but component retrieves childrenComments from the store.

Your store (reducer) structure could differ from your desired view model (one you pass as props to components). You could just keep all comments in array and map them to a tree by links in mapStateToProps on high-level 'smart' component. You'll get simple state management in reducer and a handy view model for components to work with.