Как я могу справиться с круговыми ссылками в MobX?

Question

У меня есть этот код:

var root = {}; 
var left = {}; 
rootClass.left = left; 
var right = {}; 
right.left = left; 
left.right = right; 
var o = observable(root); 

right имеет указатель на leftleft и имеет указатель на right. Когда последняя строка казнил я получаю эту ошибку:

 
RangeError: Maximum call stack size exceeded 
    at _tryDefineProperty (vendor.bundle.js:91185) 
    at Function.Object.defineProperty (vendor.bundle.js:91141) 
    at addHiddenFinalProp (vendor.bundle.js:14605) 
    at asObservableObject (vendor.bundle.js:14122) 
    at Function.IObservableFactories.object (vendor.bundle.js:12329) 
    at deepEnhancer (vendor.bundle.js:13382) 
    at new ObservableValue (vendor.bundle.js:14280) 
    at defineObservableProperty (vendor.bundle.js:14163) 
    at defineObservablePropertyFromDescriptor (vendor.bundle.js:14143) 
    at extendObservableHelper (vendor.bundle.js:12207) 
    at extendObservable (vendor.bundle.js:12178) 
    at Function.IObservableFactories.object (vendor.bundle.js:12330) 
    at deepEnhancer (vendor.bundle.js:13382) 
    at new ObservableValue (vendor.bundle.js:14280) 
    at defineObservableProperty (vendor.bundle.js:14163) 

Как я могу иметь дело с циклическими ссылками в MobX?

Answer 1

Идея MobX - это электронные таблицы Excel. Вам нужно подумать о том, какие данные могут быть получены и которые не могут быть получены.

Ссылки - отличный пример производных данных, если ваш объект имеет круговую структуру с ключами.

Что вы в итоге сделаете, просто сохраните все объекты, заданные id в объекте (или MobX Map).

Далее, вместо создания свойств слева и справа, создайте их как вычисленные геттеры и сеттеры.

Идентификатор объекта слева и справа будет сохранен в свойствах (например, leftId и rightid).

Геттер просто разрешит левое или правое положение, посмотрев на leftId в хранилище корневых объектов. Установщик просто предоставит логику для хранения идентификатора в свойстве leftId/rightId вместо хранения всего объекта.

observable({ 
    id: nextId(), // progressive id for sample 
    name, 
    leftId: null, // variables to store the id in {$ref: 1} 
    rightId: null, 
    get left(){ // getters and setters 
     return allItems.has(this.leftId) ? 
     allItems.get(this.leftId) : 
     null 
    }, 
    set left(item){ 
     this.leftId = item ? item.id : null 
    }, 
    get right(){ 
     return allItems.has(this.rightId) ? 
     allItems.get(this.rightId) : 
     null 
    }, 
    set right(item){ 
     this.rightId = item ? item.id : null 
    }, 
    }) 

Всего Fiddle Пример:https://jsfiddle.net/4ure5kak/2/