Архитектура: коммуникация child-to-parent и хранение состояния?

Question

[Данил Чекалин]

Что есть: реализованный компонент для создания ReservItem (1 на картинке). Его сабкомпоненты: ClientageBlock (2) и AboutLocationBlock (3).



Вообще компонент ReservItem имеет шаги, кнопка "Далее" на картинке (4). То есть на втором шаге тоже есть какие-то контролы. Собственно как это все работает.
Есть стор (ProcessStore) в виде plain object, задача которого исключительно хранить состояние всех данных, со всех шагов. Как для для последующей передачи в экшен, так и для переключения между шагами, например если со второго шага на вернуться на первый и подкорректировать данные (на блоках ClientageBlock или AboutLocationBlock). Есть один нюанс в реализации, дело в том о ProcessStore знает каждый компонент в дереве, то есть вся коммуникаци строиться исключительно через внесения данных в стор и оповещения об этом всех компонентов в дереве (конечно есть разграничение в виде разных экшенов: clientageUpdate, aboutLocationUpdate (но не суть в этом)). То есть стор захардкоден в компоненты.

Проблема: сейчас необходимо реализовать компонент (то же форма, то есть на create операцию), где должен быть компонент ClientageBlock, то есть он должен быть reusable. Это основная проблема, как сделать его reusable.

Из выше написаного я понял, что стор ProcessStore нафиг не нужен, ибо все состояние можно хранить и в RootComponent. ProcessStore мне облегчел получение данных, но он и прибавил дичайшую связность. О reusable в такой реализации и речи не может быть.

А теперь, что именно я не понимаю.

Представим есть компоненты:

RootComponent
---> ColBootstrap
-------> ClientageBlock
-------> AnotherFormBlock
---> ColBootstrap
-------> AnotherFormBlock
-------> ....

Я не могу понять как мне сделать коммуникацию child -> parent (RootComponent). Как мне собственно накапливать состояние в parent с его child компонентов.

Answer 1

[Roman_Kh]

1. Лучше всего написать правильный универсальный store, который будет накапливать информацию о бизнес-логике, а не о состоянии компонент (которое лучше хранить в state).
Тут придется как следует подумать, зато и результат будет удобнее и функционально богаче.

2. Но можно и просто по цепочке спустить в потомков ссылку на функцию предка, которая будет реагировать на изменение состояния потомков.

class RootComponent {
  ....
  collectData(someData){
      // обработать данные от потомка 
      // (указание на конкретного потомка можно вставить в структуру someData)
  }
  ....
  render(){
      ....
      <ColBootstrap ... onStateChange={this.collectData} />
      ....
  }
}

class ColBootstrap {
  ....
  render(){
      ....
      <ClientageBlock... onStateChange={this.props.onStateChange} />
      ....
  }
}

class ClientageBlock {
  ....
  someAction(){
      ....
      if(this.props.onStateChange)
          this.props.onStateChange(someData)
      ....
  }
}

Этот вариант обычно быстрее в реализации, но он хуже с точки зрения универсальности, дальнейшего развития и поддержки.