어떤 MobX 패턴을 사용하여 변경 사항을 감지하고 다른 관찰 가능 항목을 변경합니까?

Question

나는 autorun과 reaction의 설명을 여러 번 읽었지만 하나의 관찰 가능 항목에서 변경 사항을 감지 할 때 어떤 패턴을 사용하는지 그리고 다른 관측 항목을 업데이트하려고하는지는 여전히 내게 명확하지 않습니다.

예 I는 어드레스 오브젝트 아래 보여 주었다. 국가가 변경 될 때마다 다른 모든 필드를 재설정하거나 다시 초기화하려고합니다. 이를 수행하는 한 가지 방법은 다른 관찰 가능 항목을 설정하는 Address 클래스 내에 @action setCountry() {...} 클래스를 갖는 것입니다. 그러나 내 UI가 일반적인 기술을 사용하여 저장소 특성을 업데이트하기 때문에 즉, _.set(entity, attr, value)이라는 사치품이 없습니다. 그래서 autorun 같은 것을 사용하여 변경 사항을 감지하고 나머지 observables를 업데이트하고 싶습니다. 이 작업을 수행하는 올바른 방법은 무엇입니까?

class Address { 
    @observable name; 
    @observable line1; 
    @observable line2; 
    @observable city; 
    @observable state; 
    @observable zip; 
    @observable country; 
    ... 
} 

Answer 1

사용 사례로는 observe처럼 들릴 것입니다.

예 (JSBin)

class Address { 
    @observable name = ''; 
    @observable line1 = ''; 
    @observable line2 = ''; 
    @observable city = ''; 
    @observable state = ''; 
    @observable zip = ''; 
    @observable country = ''; 
} 

const address = new Address(); 

observe(address, change => { 
    if (change.name === 'country' && change.newValue === 'Sweden') { 
    address.city = 'Stockholm'; 
    } 
}); 

autorun(() => { 
    console.log(toJS(address)); 
}); 

setTimeout(() => { 
    address.country = 'Sweden'; 
}, 2000);