MobX 관찰 가능 항목을 복제하려면 어떻게해야합니까? (변경 저장 편집) 나는 양식을 간단하게 반응 한

Question

, 내 MobX 저장소에 두 개의 관찰 가능한 :

개인 정보의 형태로합니다 (ctor에에)로드

@observable personalInfo = { 
     email: '', 
     gender: 1, 
     birthDate: null, 
     location: '' 
    }; 
@observable personalInfoInEdit = null; 

I가 메소드를 호출하고 내 상점 :

reset_PersonalInfoInEdit() { 
     this.personalInfoInEdit = observable(this.personalInfo); 
} 

단순히 "편집중인"개체를 다시 설정하고 원본 데이터의 데이터로 채우는 것입니다. 사용자가 "변경 사항 저장"을 누르면 "편집 중"개체가 원본으로 복사됩니다.

observable()을 다른 관찰 가능으로 호출하는 것이 유효합니까? 이것에 대한 부작용은 없습니까? (작동하는 것 같습니다)

그리고 그렇지 않은 경우 "편집 중"개체의 시나리오를 우아하게 처리 할 디자인 패턴이 있습니까?

Answer 1

선호 패턴은 mobx-utils의 createViewModel 유틸리티 기능을 사용하는 것입니다. 그래서 당신이 할 것 :

import { createViewModel } from 'mobx-utils' 

reset_PersonalInfoInEdit() { 
    this.personalInfoInEdit = createViewModel(this.personalInfo); 
} 

이 쉽게 원래의 데이터를 재설정하거나 원래 모델에 제출 할 수 있도록 뷰 모델에 대한 몇 가지 유틸리티 기능을 갖는 추가적인 이점이 있습니다

class Todo { 
    \@observable title = "Test" 
} 

const model = new Todo() 
const viewModel = createViewModel(model); 

autorun(() => console.log(viewModel.model.title, ",", viewModel.title)) 
// prints "Test, Test" 
model.title = "Get coffee" 
// prints "Get coffee, Get coffee", viewModel just proxies to model 
viewModel.title = "Get tea" 
// prints "Get coffee, Get tea", viewModel's title is now dirty, and the local value will be printed 
viewModel.submit() 
// prints "Get tea, Get tea", changes submitted from the viewModel to the model, viewModel is proxying again 
viewModel.title = "Get cookie" 
// prints "Get tea, Get cookie" // viewModel has diverged again 
viewModel.reset() 
// prints "Get tea, Get tea", changes of the viewModel have been abandoned