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

Question

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

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

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

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

То, что он дозирует, просто сбрасывает объект "в редактировании", заполняя его данными из исходных данных. Если пользователь нажимает "сохранить изменения", объект "в редактировании" будет скопирован в оригинал.

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

А если нет, то есть ли шаблоны проектирования для элегантной обработки этого сценария "в редактировании" объекта.

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