redux treeview

TreeView.js

function selectNode(nodes, id) {
  const node = nodes[id]
  return {
    id,
    title: 'Loading...',
    ...node && {
      title: node.title,
      children: node.children.map((id) => selectNode(nodes, id))
    }
  }
}

const mapStateToProps = (state) =>
  selectNode(state.nodes, 'root')
const mapDispatchToProps = {
  load: nodeActions.load,
  unload: nodeActions.unload
}

@connect(mapStateToProps, mapDispatchToProps)
class TreeView extends Component {
  render() {
    return (
      <TreeViewNode {...this.props}/>
    )
  }
}

class TreeViewNode extends Component {
  componentWillMount() {
    // Fetch data from database which will update the state through a reducer and thus update the props.
    this.props.load(this.props.id)
  }

  componentWillUnmount() {
    // Unload to stop listening for changes and removing from state.
    this.props.unload(this.props.id)
  }

  render() {
    const { title = 'Loading...', children = [] } = this.props
    return (
      <div>
        <div>{title}</div>
        {children.map((child) => 
          <TreeViewNode key={child.id} { ...child }
            load={this.props.load}
            unload={this.props.unload}/>)}
      </div>
    )
  }
}