Modello funzionale vs modello dati e reazione / redux

Question

Modello funzionale vs modello dati e reazione / redux

Naviga le tue risposte

#1 da (1 voti)

0

Ho un oggetto modulo, che consiste di diversi parametri e un algoritmo.

Un parametro è composto da min , max , step , label e value .

L'algoritmo del modulo esegue regolarmente un calcolo basato su un valore su ciascuno dei parametri.

Nella mia applicazione ognuno dei parametri è rappresentato da un cursore sulla GUI.

Se sei interessato, la versione di produzione di questa applicazione è qui . Il codice base è un casino e al momento sto riordinando.

La mia domanda è come la rappresento in un'architettura react / redux.

Il modulo e il suo algoritmo sono statici. Ma un utente dovrebbe essere in grado di salvare lo stato dell'applicazione, che verrà probabilmente salvato su un database JSON. Come minimo, tutto ciò che deve essere è un semplice oggetto JSON che contenga il valore di ciascuno dei parametri.

Quindi quello che voglio essere in grado di fare è, per ognuno dei moduli, elencare una serie di parametri che definiscono l'algoritmo, e la reazione solo per ogni rendering di ciascuno dei parametri. Abbastanza semplice

Come gestisco la differenziazione tra il modello funzionale, lo stato che stiamo cercando di salvare, che è solo un paio di valori? Dovrei usare il mio fare i calcoli algoritmici come parte delle azioni di spedizione? Questo elenco di parametri passa dallo stato di redux?

design-patterns redux react

posta dwjohnston 25.02.2017 - 13:16

fonte

1 risposta

Leggi altre domande sui tag design-patterns redux react

Esiste un modello di progettazione per l'aggiornamento degli elenchi? Come posso acquisire un'e-mail in arrivo con ASP.net-mvc?

score 1 · Answer 1

Questo sembra un buon caso per la riselezione della libreria helper.

Vuoi mantenere il tuo stato di Redux (e, per estensione, i riduttori) il più semplice possibile, quindi includi solo i parametri di input per il calcolo.

Quindi implementa il tuo algoritmo come uno o più selettori - funzioni pure che accettano lo stato di Redux come input e restituiscono i valori calcolati.

Riseleziona fornisce un metodo chiamato createSelector che automaticamente memoize la tua funzione, cioè memorizza nell'ultima serie di valori di input e il risultato. Se il tuo selettore viene richiamato con gli stessi input, restituisce semplicemente il risultato memorizzato nella cache anziché ripetere il calcolo.

I selettori sono componibili - puoi usare l'output di un selettore come input per un altro. Pertanto, utilizzando i selettori per selezionare le proprietà rilevanti dello stato, è possibile garantire che il calcolo principale non venga ripetuto inutilmente quando vengono modificate altre parti dello stato.

Infine, quando colleghi il tuo componente React a Redux, chiama i selettori da mapStateToProps() :

function mapStateToProps(state) { return { fooProp: myFooSelector(state), barProp: myBarSelector(state) }; }

Ciò significa che i selettori vengono richiamati su ogni rendering, il che è OK, poiché non fanno alcun lavoro a meno che le proprietà dello stato rilevanti non siano cambiate.

Ora la visualizzazione è garantita per rimanere sincronizzata con i valori di input e non devi neanche pensare alle circostanze in cui i risultati potrebbero cambiare.

Ancora meglio, l'algoritmo viene valutato pigramente - il calcolo non avviene nemmeno a meno che l'utente non guardi una pagina che lo richiede.