Как мне написать асинхронную древовидную структуру, используя Redux React?

Question

Я хочу разработать древовидную структуру, в которой при загрузке страницы загружаются только дочерние элементы первого уровня, и когда любой из этих дочерних элементов щелкает, если у них есть дочерние элементы, они также загружаются и т. Д. Дерево может проходить много уровней глубоко.

Вот пример данных, которые я использую для загрузки при загрузке страницы:

Данные контейнера :

{
      "code": "string",
    "message": "string",
    "data": {
      "comments": "string",
      "containerId": 412,
      "createdBy": "string",
      "createdDate": "2019-05-09T18:23:59.582Z",
      "discoveryAgentId": 0,
      "inheritedDiscoveryAgent": "string",
      "modifiedBy": "string",
      "modifiedDate": "2019-05-09T18:23:59.582Z",
      "name": "CRAN",
      "parentId": 0,
      "planId": 0,
      "typeId": 0,
      "depth":0,
       "children":[{
          "comments": "string",
          "containerId": 231,
          "createdBy": "string",
          "createdDate": "2019-05-09T18:23:59.582Z",
          "discoveryAgentId": 0,
          "inheritedDiscoveryAgent": "string",
          "modifiedBy": "string",
          "modifiedDate": "2019-05-09T18:23:59.582Z",
          "name": "South Central",
          "parentId": 0,
          "planId": 0,
          "typeId": 0,
          "depth":1,
          "hasChildren": false
          },{
          "comments": "string",
          "containerId": 324,
          "createdBy": "string",
          "createdDate": "2019-05-09T18:23:59.582Z",
          "discoveryAgentId": 0,
          "inheritedDiscoveryAgent": "string",
          "modifiedBy": "string",
          "modifiedDate": "2019-05-09T18:23:59.582Z",
          "name": "North East",
          "parentId": 0,
          "planId": 0,
          "typeId": 0,
          "hasChildren": true
          },{
          "comments": "string",
          "containerId": 65,
          "createdBy": "string",
          "createdDate": "2019-05-09T18:23:59.582Z",
          "discoveryAgentId": 0,
          "inheritedDiscoveryAgent": "string",
          "modifiedBy": "string",
          "modifiedDate": "2019-05-09T18:23:59.582Z",
          "name": "South East",
          "parentId": 0,
          "planId": 0,
          "typeId": 0,
          "hasChildren": false
          },{
          "comments": "string",
          "containerId": 41,
          "createdBy": "string",
          "createdDate": "2019-05-09T18:23:59.582Z",
          "discoveryAgentId": 0,
          "inheritedDiscoveryAgent": "string",
          "modifiedBy": "string",
          "modifiedDate": "2019-05-09T18:23:59.582Z",
          "name": "East West",
          "parentId": 0,
          "planId": 0,
          "typeId": 0,
          "hasChildren": true
        }]
    }

Вот некоторые пример дочерних данных :

"children":[{
            "comments": "string",
            "containerId": 231,
            "createdBy": "string",
            "createdDate": "2019-05-09T18:23:59.582Z",
            "discoveryAgentId": 0,
            "inheritedDiscoveryAgent": "string",
            "modifiedBy": "string",
            "modifiedDate": "2019-05-09T18:23:59.582Z",
            "name": "Child 1",
            "parentId": 0,
            "planId": 0,
            "typeId": 0,
            "depth":2,
            "hasChildren": false
            },{
            "comments": "string",
            "containerId": 324,
            "createdBy": "string",
            "createdDate": "2019-05-09T18:23:59.582Z",
            "discoveryAgentId": 0,
            "inheritedDiscoveryAgent": "string",
            "modifiedBy": "string",
            "modifiedDate": "2019-05-09T18:23:59.582Z",
            "name": "Child 2",
            "parentId": 0,
            "planId": 0,
            "typeId": 0,
            "depth":2,
            "hasChildren": true
            },{
            "comments": "string",
            "containerId": 65,
            "createdBy": "string",
            "createdDate": "2019-05-09T18:23:59.582Z",
            "discoveryAgentId": 0,
            "inheritedDiscoveryAgent": "string",
            "modifiedBy": "string",
            "modifiedDate": "2019-05-09T18:23:59.582Z",
            "name": "Child 3",
            "parentId": 0,
            "planId": 0,
            "typeId": 0,
            "depth":2,
            "hasChildren": false
            },{
            "comments": "string",
            "containerId": 41,
            "createdBy": "string",
            "createdDate": "2019-05-09T18:23:59.582Z",
            "discoveryAgentId": 0,
            "inheritedDiscoveryAgent": "string",
            "modifiedBy": "string",
            "modifiedDate": "2019-05-09T18:23:59.582Z",
            "name": "Child 4",
            "parentId": 0,
            "planId": 0,
            "typeId": 0,
            "depth":2,
            "hasChildren": true
        }]

на этой странице приведен «Расширить до загрузки» пример того, чего я пытаюсь достичь.Я не могу использовать этот компонент на этой странице, но мне нужна функциональность.Смотрите ссылку того, чего я пытаюсь достичь ниже.

https://2x.ant.design/components/tree/