Nell'app React/Redux, quando dovrei passare un puntello esplicitamente contro il pick up dallo stato globale usando mapStateToProps?

Question

Sto costruendo il mio primo React-Redux app e in molti casi ho una scelta di fare <PaginationBox perPage={perPage} /> o avere <PaginationBox /> e poi fare

function mapStateToProps({pagination: {page}}) { 
    return { 
    pageNumber: page + 1 
    }; 
} 

Quali sono le implicazioni di utilizzare un modo o nell'altro e quando devo preferisci uno rispetto all'altro?

Esistono buone pratiche consolidate su come raccogliere oggetti di scena? Mi sento un po 'male ogni volta che uso mapStateToProps in alcuni componenti profondamente annidati perché sembra che il componente si accoppi allo stato di una particolare pagina/app.

Answer 1

Non c'è una sola buona risposta. Per le Domande frequenti su Redux al numero http://redux.js.org/docs/FAQ.html#react-multiple-components, spetta a te decidere dove nella gerarchia dei componenti ha senso collegare un componente. Potrebbe essere al livello "LeftSidebar/RightMainPanel" o potrebbe essere molto più granulare. In alcuni casi, ad esempio tentando di ottimizzare un elenco per le prestazioni, è possibile che l'Elenco stesso sia connesso e recuperi gli ID oggetto e che ogni ListItem sia collegato e recuperi i propri dati per ID.

Per questo caso particolare, probabilmente sarei propendere per avere un <PaginationBox /> essere collegato, e rendere funzionali apolidi <PaginationItem /> componenti, se necessario, per lo più solo perché i singoli elementi non avranno bisogno di alcuna informazione reale allegata diverso da un numero di e un link per fare clic. Ma questa è solo un'opinione.

Answer 2

Se vogliamo passare valori/metodi ai componenti figlio, usiamo gli oggetti di scena. I puntelli sono utilizzati per verificare se il valore o il metodo richiesto è disponibile per il componente corrente da qualche altro componente. Supponiamo di avere due metodi uno è l'intestazione di selezione e un altro oggetto d'acquisto. Dall'intestazione di selezione seleziono tutti gli elementi dall'elenco mostrato e invialo al componente buyItems per effettuare l'acquisto. Qui il componente buyItems richiede un valore dall'intestazione di selezione e ciò è obbligatorio. Questo tipo di controllo fatto lancia oggetti di scena.

Invece di usare oggetti di scena, possiamo anche usare i mix. I mixins ci consentono di utilizzare un altro metodo componente nel componente attuale.

var selection-header = React.createClass({ 
     selectItems: function(){ 
     itemsSelectAll: true 
     }, 
     render: function(){ 
     return(
     <BuyItems /> 
     ); 
     } 
    }); 

var BuyItems = React.createClass({ 
     mixins: [selection-header], 
    render: function(){ 
     return(
     ); 
     } 
    }); 

ora nel componente buyitems possiamo usare metodi di intestazione selezione e variabili

Answer 3

Avevi già uno sguardo al modello di componenti presentatore/container? Esistono molteplici good article s attorno a questo modello, che si il più delle volte danno una buona idea di quando ad avere una componente presentatore o un contenitore

Il mio consiglio:

Inizia con un componente contenitore (che ha mapStateToProps e mapDispatchToProps) nella parte superiore della gerarchia dei componenti. Qui di seguito i componenti del presentatore che ricevono solo oggetti di scena e azioni. Ci sarà un momento in cui si nota che (A) un componente di presentatore necessita di molte proprietà/azioni o che (B) si passano proprietà/azioni per troppi livelli in basso e solo alcuni di essi vengono afferrati da componenti in mezzo.

poi si inizia a scambiare presentatore con componenti contenitore per grasso componenti (A).Quando ci sono ancora troppe azioni/proprietà passate a (B), è necessario pensare a più componenti del contenitore, che si occupano di evitare passaggi troppo profondi/azioni.

Ma la prima regola potrebbe essere: un componente contenitore in alto, tutti i componenti in basso sono presentatori.

Answer 4

Questo argomento è un po 'soggettivo e non ci sono regole rigide. Quindi ti dirò solo quello che faccio.

In genere, provo a connettermi solo al negozio nel contenitore (componente principale, componente intelligente, ecc ...). Quindi passo gli oggetti di scena dal contenitore al componente (componente stupido) che non è collegato al negozio.

Mi sforzo sempre per una gerarchia di Store -> Container -> Puntatori -> Componente.

Detto questo, non sempre ha senso attenersi a quella gerarchia in ogni momento è semplicemente che cerco sempre di fare prima.

Capisco sicuramente cosa si sta dicendo che collegare un componente al negozio che è sepolto nella gerarchia dei componenti può sembrare un po 'sporco, per non dire difficile da mantenere.

Ecco un buon articolo su componenti intelligenti/muti o contenitori/componenti: Smart and dumb components in React