Riduce i riduttori nidificati o lo stato di normalizzazione?

Question

Sto creando un componente di modulo con React e desidero memorizzare lo stato di moduli e campi con Redux.

Quindi ho un riduttore di forma e un riduttore di forma.

Ho seguito per la prima volta il mio istinto e ho provato ad annidare il riduttore di campo nel riduttore di forma. Questo in pratica significava avere i casi di interruttori relativi al campo di forma sia nel riduttore di forma che nel riduttore di forma.

Mi sono sentito un po 'in disordine (codice ripetuto), quindi ho letto di più nella documentazione e ho scoperto che è consigliabile normalizzare lo stato. Così ho portato via i campi dei campi nidificati e li ho messi allo stesso livello dei moduli.

Ciò ha reso il riduttore bello e pulito, ma ora recuperare i campi modulo per un modulo specifico risulta orribile. Fondamentalmente sto facendo il giro di tutti i campi dei form ogni volta e restituisco solo quelli con il parametro "formId" corretto.

La documentazione di Redux afferma che si dovrebbe trattare lo stato come un database normalizzato, ma non ha dimenticato che non si ha il lusso di poter interrogare per i risultati?

Mi sono perso qualcosa qui? Qual è il modo consigliato per risolvere questo?

Answer 1

Suona come si mantiene formFields stato come un array, ma desidera eseguire una query come un oggetto con formId è la chiave:

Ciò ha reso il riduttore di bello e pulito, ma ora il recupero dei formfields per una specifica la forma si sente orribile. Fondamentalmente sto facendo il giro di tutti i campi dei form ogni volta e restituisco solo quelli con il parametro "formId" corretto.

Se si cambia formFields Stato ad essere un oggetto, sarà molto più facile da interrogare: formFields[fieldId].

Come indicato nell'altra risposta, è possibile utilizzare per scrivere "selettori" componibili che definiscono come compute derived state. Quindi il codice dei componenti sarà semplice perché tutto il sollevamento pesante della preparazione delle maniglie dei dati in selettori piccoli e componibili.

È possibile controllare i riduttori ei selettori nell'esempio shopping-cart per avere un'idea migliore di come lo stato è strutturato nelle app di Redux idiomatiche. Si noti che questo esempio utilizza le funzioni di vaniglia per i selettori, ma si consiglia di utilizzare Riseleziona per prestazioni migliori.

Answer 2

Da quello che ho capito il tuo problema riguarda l'interrogazione dei dati derivati. (, ovvero i campi che appartengono alla forma X).

C'è anche uno strumento di utilità chiamato reselect, il tuo caso d'uso sembra adattarsi a ciò che risolve.

Avresti solo bisogno di scrivere un selettore che si aspetta un formId e restituirebbe una matrice di campi modulo.