Существует упрощенный магазин с observable.map
:
class ThStore {
constructor() {
this.store = mobx.observable.map({});
}
}
mobx.decorate(ThStore, {
_store: mobx.observable,
}
Хранилище содержит данные в этом формате (сокращенно), это литерал объекта javascript, который управляется mobx
как observable.map
. Сами данные представляют собой коллекцию элементов с ключом id
, которая имеет некоторую вложенную дочернюю коллекцию в том же формате:
{
"some-id": {
id:"some-id",
label:"some-value",
childs: {
"child-id": {...some properties},
"other-child-id": {...some properties},
}
},
"other-id": {
id:"other-id",
label:"other-value",
childs: {
...
}
}
}
Изменение всей записи в магазине работает как положено
storeInstance.store.set("some-id", newItem);
Но я не могу найти способ обновить только свойство элемента. Получение элемента дает объект Proxy, который я не знаю, как использовать для обновления некоторых его свойств.
const item = storeInstance.store.get("childs");
// item is a Proxy instance and has no `.get` method to retrive a child
Попытка обновить элемент, как это работает, но вынуждает обновлять весь элемент, а не только необходимое свойство, вызывая больше повторных визуализаций, чем необходимо.
const copiedItem = mobx.toJS(storeInstance.store.get("some-id"));
// This change does not trigger mobx
copiedItem.child["child-id"].property = someValue;
// This change does but forces updating all the item
storeInstance.set("some-id", copiedItem);
Так что я не знаю, как сделать мелкозернистые обновления в mobX
хранилище, используя observable.map
с вложенными дочерними картами.
EDIT : проблема в том, что вложенное свойство childs
не преобразуется в observable.map
на mobx
, а остается как простой объект. Как можно принудительно преобразовать вложенное свойство в observable.map
?