2015-12-13 21 views
7

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.Le migliori pratiche per i calcoli riutilizzabili sui dati nel negozio di redux

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?

risposta

7

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);