Как я могу клонировать наблюдаемый MobX? (Редактирование сохранения изменений)

Question

Я просто реагировать формы, и две наблюдаемых в моем MobX магазине:

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

Когда форма личной информации загружается (в CTOR) Я звоню метод на моем магазин:

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

Что такое доза, просто перезагружает объект «in edit», заполняя его данными из исходных данных. Если пользователь нажимает «сохранить изменения», объект «в редактировании» будет скопирован в оригинал.

Действительно ли вызывает наблюдаемое() с другим наблюдаемым? Любые побочные эффекты? (кажется, работает)

И если нет, существуют ли шаблоны проектирования, чтобы элегантно обработать этот сценарий объекта «в редактировании».

Answer 1

Предпочитаемый шаблон должен был бы использовать функцию полезности createViewModel от mobx-utils. Так что вы могли бы сделать:

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