React + Flux naujoko klausimas del state'ų

Sveiki,

Pradėjau mokytis react + flux ir iškilo toks klausimas dėl savo vieno sprendimo. O klausimas iškilo, nes nelabai žinau ar logiškai čia darau. Taigi, savo projekte noriu padaryt tokį dalyką apie kurį pabandysiu aprašyt žingsniais, kad būtų aiškiau:

visų pirmą taip viskas atrodytų: http://i.imgur.com/tu7Lxkg.png

1. Vartotojas užeina į puslapį ir gali pasirinkt tarkim paveiksliuką.

2. Paclick'inus ant paveiksliuko vartotojas yra nukeliamas į kitą puslapį, kuriame gali pasirinkt keletą nustatymų paveiksliukui(aukštį, plotį, kokybę ir t.t.).

3. Bet tas paveiksliukas turi ir default reikšmes(aukštį, plotį, kokybę ir t.t.), kurios yra priskiriamos vos užėjus į tą kitą langą.

4. Tada vartotojas gali keist tas reikšmes ir jas išsaugoti.

5. Vartotojas taip pat gali ir reset'int savo pasirinktus nustatymus. Tuo atveju viskas turėtų grįžt į pradines default reikšmes.

Tai va taip turėtų viskas veikti. Dabar kaip aš viską darau react + flux lygmeny:

1. Tame lange, kur vartotojas yra nukeliamas pasirinkus paveiksliuką aš turiu du state'us: "default" ir "settings" viskas atrodo maždaug taip:

function getStatesFromStore() {
   return {
       settings: SettingsStore.getSettings(),
       default: SettingsStore.getDefault()
   };
}
.....
getInitialState: getStatesFromStore,
....

2. default ir settings pradžioje yra tą pati reikšmė, kuri yra nustatoma "SettingsStore" store'e. Viskas store'e atrodo maždaug taip:

....
var _settings = {};
var _default = {};
....

   getSettings: function() {
       return _settings;
   },

   getDefault: function() {
       return _default;
   },
....

       case Action.SETTINGS_UPDATE:
           _settings = action.settings;
           this.emitChange();
           break;

       case Action.DEFAULT_APPLIED:
           var defSettings = action.defSettings;
           _settings = assign({}, defSettings);
           _default = assign({}, defSettings);
           this.emitChange();
           break;
....

3. taigi kaip ir minėjau, pradžioj aš default'ui ir šiaip settings'ams store'e priskiriu tą pačią default reikšmę. O pakui, kai vartotojas ką nors keičia aš atnaujinu tik settings reikšmę store, o default neliečiu. Ir kai vartotojas ką nors keičia, yra kviečiama šį funkciją:

...
   updateSettings: function(data) {
       var settings = assign({}, this.state.settings);
       var settingsDefault = assign({},  this.state.default);

       if (data === "default" ) {
           settings = assign({}, settingsDefault);
       }
       SettingsAction.update(settings);
   }
....

esmė čia yra, kad kai vartotojas paspaudžia reset mygtuką, "data" būna lygi "default" ir yra patenkama į tą if'ą, kuriame settings kintamajam yra priskiriama settingsDefault reikšmė ir store'e atsinaujina settings'ai į tokius, kurie buvo pradžioje(default).

Tai va tokia visa esmė. Bet susiduriu su problema, kad kažkaip susimaišo man settings ir default state'ai. Ir kelis kartus pasirinkus settings'us ir paskui kelis kartus paspaudus "reset", nebegrižta settings'ai į default padėtį. Nujaučiu, kad kažkurioj vietoj(spėju updateSettings funkcijoj) man susimala objektai ir kažką aš netaip darau su tais assign'ais. Gal kas galėtų užmest akį ir padėt išspręst man šitą bėda? O gal aš apskritai ne tuo keliu einu? Būčiau dėkingas, už bet kokią pagalbą. :)

P.S. settings ir default yra "nested" objektai, kurie atrodo maždaug taip:

{
   settings: {
       options: {
           height: 500,
           width: 500,
           quality: 60
       },
       other: {
           small: true,
           mid: false,
           big: true
       }
   }
}

99% kad kas po tavo tuo assign slepiasi nedaro deep copy, kas reiskia, kad nestintu objectu reference lieka, todel galiausiai gaunasi, kad keitineji viena ir ta pati objekta. Tas tavo assign speju kad yra Object.assign polyfilas, tai gali pasiskaityt kas rasoma cia prie "Warning for Deep Clone".

99% kad kas po tavo tuo assign slepiasi nedaro deep copy, kas reiskia, kad nestintu objectu reference lieka, todel galiausiai gaunasi, kad keitineji viena ir ta pati objekta. Tas tavo assign speju kad yra Object.assign polyfilas, tai gali pasiskaityt kas rasoma cia prie "Warning for Deep Clone".

taip, tu teisus, mano tas assign yra Object.assign polyfilas. ir kaip suprantu reiktų naudot: JSON.parse(JSON.stringify(object)); bet man kažkaip labai jau toks "hackish way" atrodo tas parse/stringify. ar čia viskas ok ir čia yra standartas/good practice tokį workaraound'ą naudot? nes kažkaip norisi tvarkingai padaryt, tai galvoju dbr gal tą patį efektą, kokio aš siekiu, galima kažkaip kitaip pasiekt su react + flux? turiu omeny tą resetinimą į default settingsus. :)

Pilna budu padaryt deep kopija, ne tik tas stringify/parse, neatrodys gal taip "hackish", bet efektas bus tas pats. O del fluxo tai nezinau, nesu pats smarkiai isigilines i visokias praktikas, good/bad way, negaliu patart.

Pilna budu padaryt deep kopija, ne tik tas stringify/parse, neatrodys gal taip "hackish", bet efektas bus tas pats. O del fluxo tai nezinau, nesu pats smarkiai isigilines i visokias praktikas, good/bad way, negaliu patart.

supratau, dėkui labai už komentarus, tikrai pagelbėjai. :)