2015-08-17 16 views
9

Sto cercando di costruire un complesso di app completamente dinamico con Redux. Voglio dire che la mia App ha molti moduli generati dinamicamente con campi-componenti generati al volo. Voglio memorizzare nei miei dati visivi Redux-store anche i miei componenti. Ma come dovrei farlo senza mescolare dati reali con i dati dei componenti visivi?dati Redux strutturano

Per esempio se devo struttura come questa

Store { 
    visual: {...deeply nested visual-data-tree...}, 
    data: {...deeply-nested real-data-tree...} 
} 

È difficile rendere componente perché ho bisogno di cercare dati visivi, poi reagire "valore" componente in due alberi.

Ma se hanno una struttura simile a questo:

Store { 
    form { 
    visual: {...form visual data...}, 
    data: { 
     //Ok here the form "data" - widgets. Or it must to be visual? :) 
     widget1 { 
     visual: {type:"ComboBox", opened: true}, 
     data: 1 
     } 
    } 
    } 
} 

Si vede il problema, ora ho i dati visivi all'interno di dati reali di widget del form.

(forma - dati - widget1 - visivi)

dati visivi all'interno i dati reali è fuori del concetto.

come si fa a risolvere ragazzi stessi problemi di miscelazione dei dati?

Davvero dispiace per il mio povero inglese. Spero di aver spiegato chiaramente il problema.

+1

Questo è attualmente in discussione nella comunità Redux - potete seguirlo Progresso/discussione qui https://github.com/rackt/redux/issues/159. –

+0

Grazie per la risposta, quindi la seguirò – Hassaki

risposta

14

non è la distinzione superficiale? Penso che una regola più importante sia che i dati nello stato dovrebbero essere normalizzati. Ad esempio, se si dispone di Combobox widget di consentendo di scegliere gli utenti, i dati modellare meglio essere

{ 
    chosenUserId: 10, // Good! 
    users: { 
    10: { name: 'Alice' } 
} 

piuttosto che

{ 
    chosenUser: { name: 'Alice' }, // Bad! 
    users: { 
    10: { name: 'Alice' } 
} 

Se i dati vengono duplicati nella struttura dello stato, è difficile per aggiornare correttamente ed evitare incongruenze.

Fintanto che si mantengono i dati normalizzati, non vedo la reale necessità di dividere visual e data. Si potrebbe desiderare di avere cache di entità di livello superiore che si presenta come un database (ad es entities che comprende users, posts, o qualsiasi altra cosa Data Objects tua applicazione utilizza), ma a parte questo, andare con qualsiasi forma di stato si sente più comodo durante il recupero del relativo stato.

+0

C'è quindi un modo semplice per tornare dai dati normalizzati a una struttura nidificata quando effettivamente i dati vengono visualizzati in DOM? –

+0

Vorrei solo scrivere ["selettori"] (http://redux.js.org/docs/recipes/ComputingDerivedData.html) manualmente e usarli da 'mapStateToProps' dei componenti. –

+0

Sì, questo è fondamentalmente quello che sto facendo in questo momento. Mi stavo chiedendo se questo potesse essere automatizzato in qualche modo. Ad esempio implementando qualcosa come 'normalizr.denormalize()' che sostituirà gli ID di entità con gli oggetti reali (usati solo prima di passare alla visualizzazione per il rendering). –