Le migliori pratiche per i calcoli riutilizzabili sui dati nel negozio di redux

Question

Ho appena finito di cablare un'app redux, ed è fantastico finora. Tuttavia, poiché lo stato è memorizzato in un negozio gigantesco, non hai alcun modello a cui stai accedendo dai tuoi dati.

Diciamo che ho una classe modello che memorizza alcune informazioni su un utente. Di solito aggiungo una funzione alla classe chiamata display_name che combina in modo intelligente le diverse parti del loro nome. Con questo, i miei punti di vista diversi potevano semplicemente chiamare display_name invece di dover sapere come calcolarli da soli.

Redux dice esplicitamente di non memorizzare valori calcolati nello stato, in modo da lasciare che sia definito nei componenti. Tuttavia, questo non può essere corretto, perché in questo modo si finisce per duplicare questo codice in ogni componente che ne ha bisogno.

Dove è il posto giusto per memorizzare questa logica?

Answer 1

Il metodo più semplice è quello di creare funzioni di utilità per calcolare questi dati e metterli in un modulo separato che può essere utilizzato da mapStateToProps funzioni molti componenti. Un super-semplice esempio:

import { displayName } from "./utils"; 

function mapStateToProps(state) { 
    return { 
    displayName: displayName(state.user) 
    }; 
} 

function MyComponent(props) { 
    return <div>Name: {props.displayName}</div>; 
} 

export default connect(mapStateToProps)(MyComponent); 

Answer 2

Per pagina Computing Derived Data nella documentazione Redux, l'approccio suggerito sta usando la libreria Reselect per gestire la selezione e Memoizzazione.

Se cerchi Github per i progetti Javascript che contengono il termine "createSelector", dovresti trovare un certo numero di app reali che utilizzano Riseleziona in vari modi. Ecco tre che ho visualizzato: jfurrow/flood, FH-Potsdam/shifted maps e madou/GW2 Armory