How to handle tree-shaped entities in Redux reducers?

Question

I\'m a bit stuck thinking on how to implement a reducer where its entities can have children of the same type.

Let\'s take reddit comments as an example: each comment ca

Answer 1

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.

Answer 2

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.