방법의 내가 API 호출을 통해로드이 인 myObject를 유지하자 MobX 저장소

Question

에 중첩 된 객체를 추적 할 수 있습니다. 이 객체를 MobX 저장소에서 볼 수 있어야합니다 (아래 정의 할 속성).

@observer 
class App extends Component { 
    store = new Store(); 

    componentWillMount() { 
    this.store.load(); 
    } 

    render() { 
    return (
     <div> 
     {this.store.fieldA && <p>{this.store.fieldA.details}</p>} 
     {this.store.fieldB && <p>{this.store.fieldB.details}</p>} 
     </div> 
    ); 
    } 
} 

내가 MobX가 반응을 이해하려고 노력 this page를 읽을 수 있지만 아직 명확한 아이디어를 얻을하지 않았다 : 나는 가게에서 두 개의 필드를 읽고 간단한 반작용 구성 요소를 가지고있다. 특히, 아래의 4 개 매장 중 어느 것이 작동 할 것이며, 그 이유는 무엇입니까?

class Store1 = { 
    @observable myObject = {}; 

    @action setMyObject = object => { 
    this.myObject = object; 
    } 

    load =() => someAsyncStuff().then(this.setMyObject); 
} 

2/

1/

class Store2 = { 
    @observable myObject = {}; 

    @action setMyObject = object => { 
    this.myObject.fieldA = object.fieldA; 
    this.myObject.fieldB = object.fieldB; 
    } 

    load =() => someAsyncStuff().then(this.setMyObject); 
} 

3/

class Store3 = { 
    @observable myObject = { fieldA: {}, fieldB: {} }; 

    @action setMyObject = object => { 
    this.myObject = object; 
    } 

    load =() => someAsyncStuff().then(this.setMyObject); 
} 

4/

class Store4 = { 
    @observable myObject = { fieldA: {}, fieldB: {} }; 

    @action setMyObject = object => { 
    this.myObject.fieldA = object.fieldA; 
    this.myObject.fieldB = object.fieldB; 
    } 

    load =() => someAsyncStuff().then(this.setMyObject); 
} 

Answer 1

모든 위에서 용액 2 제외한 작동하는 것으로 개체에 대한 Mobx의 문서에 설명 된 이유는

가 관찰 될 것 관찰 물체의 제조시에 존재 관찰 만 특성을 통해 객체를 전달 . extendObservable을 사용하지 않는 한 나중에 개체에 추가되는 속성은 이 될 수 없습니다.

첫 번째 해결 방법에서는 반환 된 개체에 이미 속성이있는 개체를 다시 할당합니다. 3과 4에서는 두 속성으로 개체를 초기화하여 작동합니다.

또한 나는 (그것이 어떤 방식으로 작동하지 않습니다 기타)이 같이 사용하는 의미 구성 요소의 예에서 생각 :

render() { 
    const { myObject } = this.store; 

    return (
     <div> 
     {myObject && myObject.fieldA && <p>{myObject.fieldA.details}</p>} 
     {myObject && myObject.fieldB && <p>{myObject.fieldB.details}</p>} 
     </div> 
    ); 
}