Wie kann ich ein MobX Observable klonen? (Edit Änderungen speichern)

Question

Ich habe eine einfache Form reagieren, und zwei Observablen in meinem MobX Speicher:

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

Wenn die Form der persönlichen Daten ist geladen (im Ctor) ich eine Methode nenne meine speichern:

Was es dosiert ist einfach das "in Bearbeitung" -Objekt zurückzusetzen, füllen Sie es mit Daten aus den ursprünglichen Daten. Wenn der Benutzer "Änderungen speichern" drückt, wird das Objekt "In Bearbeitung" in das Original kopiert.

Ist Observable() mit einer anderen Observable zu bezeichnen? Irgendwelche Nebenwirkungen dazu? (Es scheint zu funktionieren)

Und wenn nicht, gibt es Entwurfsmuster, um dieses Szenario von "in Bearbeitung" -Objekt elegant zu behandeln.

Answer 1

Das bevorzugte Muster wäre createViewModel Dienstprogrammfunktion von mobx-utils zu verwenden. So würden Sie tun:

import { createViewModel } from 'mobx-utils' 

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

dies hat einen zusätzlichen Vorteil auf dem View-Modell einige Hilfsfunktionen, die, mit denen Sie leicht auf Originaldaten zurücksetzen oder legen sie Urmodell:

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