React + Mobx: как второй компонент-наблюдатель может понять (до вызова render), что первый компонент изменил наблюдаемые данные?
у меня есть два компонента:
ComponentDataManager, который на основании выбора пользователя (нажатие кнопок) формирует древовидные данныеComponentDataViewer, который отображает древовидные данные на основании выбора пользователя в виде дерева с раскрывающимися узлами, причём информацию о раскрытых узлах хранит у себя (поскольку этими данными пользуется только он и соответственно и знать о них должен только он)
оба компонента друг о друге не знают (не их дело), а знают только о данных и выборе пользователя, т.е. реализована схеме
ComponentDataManager -> {option, data} -> ComponentDataViewer
чтобы определять факт изменения данных в ComponentDataManager и после этого их отрисовывать в ComponentDataViewer я использую MobX:
- сами данные делаю наблюдаемыми (observable)
ComponentDataViewerделаю наблюдатель (observer)
И всё работает замечательно.
Проблема:
Но мне понадобилось, чтоб при смене выбора пользователя в ComponentDataManager информация о раскрытии узлов в ComponentDataViewer сбрасывалась иначе получается забавный эффект - пользователь меняет древовидные данные, а некоторые узлы отображаемого дерева остаются раскрытыми как это было в предыдущем дереве.
Подскажите как это можно сделать.
Конечно эти данные можно хранить снаружи {option, data, nodes} как остальные и сбрасывать nodes=[] в ComponentDataManager. Но разве такой подход правильный?
Ведь таким образом ComponentDataManager начинает знать о дополнительной сущности - информации о раскрытых узлах (т.е. о работе другого элемента, о существовании которого не знает), к которой он никакого отношения не имеет. А такие вещи все таки хотелось отделять и изолировать в тех компонентах, которые с ними и работают, т.е. в данном случае в ComponentDataViewer.
Как наиболее правильно поступают в таких ситуациях?
может когда MobX дергает на отрисовку ComponentDataViewer до render проверять изменились ли option и если да, то сбрасывать nodes?