Share
React è una libreria JavaScript per costruire interfacce utente che ha preso d'assalto il mondo dello sviluppo web. Tuttavia, in una comunità che favorisce la scelta e la flessibilità, può essere difficile sapere da dove iniziare!
Non preoccuparti: alcuni modelli e moduli sono emersi come best practice. Uno di questi è Redux per la gestione dello stato dell'applicazione.
In questo video del mio corso su App Web moderne con React e Redux, ti mostrerò come utilizzare il reagire-redux pacchetto.
È una buona pratica nelle applicazioni Redux per fare una distinzione tra componenti di presentazione e componenti del contenitore. In questo video, spiegherò cosa sono e come possiamo usarli.
Mi riferirò al codice che abbiamo già creato nelle parti precedenti del corso, ma dovresti essere in grado di seguire e vedere cosa sto facendo. Puoi trovare il codice sorgente completo per il corso su GitHub.
Accentsconagua
reagire-redux Pacchettoreagire-redux?Nelle parti precedenti di questo corso, abbiamo creato un'app di esempio utilizzando React e Redux. Tuttavia, quasi tutti i nostri componenti devono lavorare con lo store, sia leggendo stati specifici sia rimandando le azioni allo store. Ricorda, il negozio Redux mantiene tutto lo stato per l'intera applicazione. Ciò significa che la maggior parte, se non tutti, i nostri componenti devono essere in grado di accedere al negozio in qualche modo.
Finora, abbiamo un oggetto negozio globale a cui possiamo accedere direttamente nella sezione in cui stiamo assegnando le proprietà alla nostra barra laterale.
Tuttavia, avere un negozio globale come questo non è eccezionale per molte ragioni. Uno dei motivi più semplici è che non è in realtà globale: è accessibile solo da questo file. Ciò significa che dovremmo usarlo da questo file o dovremmo iniziare a passarlo da questo file ad altri file, che diventerà molto disordinato.
Inoltre, se abbiamo molti componenti nidificati, significa che se un componente intermedio non ha realmente bisogno del negozio ma uno dei suoi figli lo fa, dovremo passarlo comunque a quel componente intermedio perché ne ha bisogno in modo che possa passarlo a suo figlio.
Ora sarebbe bello se ci fosse un modo in cui potremmo dare a tutti i nostri componenti l'accesso allo store senza avere una variabile globale, e senza passarla manualmente in giro.
E la verità è che c'è un modo. Possiamo usare un pacchetto chiamato reagire-redux. Puoi leggere un po 'di più sulle idee alla base di questo pacchetto se vai alla documentazione di Redux.
reagire-redux LavoriUna delle idee principali alla base di questo pacchetto è l'idea di componenti di presentazione e componenti del contenitore. Fondamentalmente, possiamo rompere la nostra applicazione in due gruppi di componenti.
Il primo set sono i componenti di presentazione. Questi sono interessati a come appaiono le cose. Non devono assolutamente essere a conoscenza di Redux. Semplicemente leggono i dati dalle loro proprietà e possono modificare i dati richiamando i callback che assegniamo anche come proprietà.
I contenitori, d'altra parte, sono a conoscenza di Redux e si iscrivono in modo specifico allo stato di Redux e inviano azioni Redux. Possiamo creare un componente contenitore semplicemente avvolgendo un componente di presentazione con alcune di queste istruzioni.
Ora tuffiamoci e vediamo come può funzionare. Utilizzeremo la barra laterale come esempio di un componente che possiamo suddividere in componenti di presentazione e di contenitore.
Ora, potresti essere un po 'confuso qui come stiamo andando a dividere la nostra barra laterale in due componenti separati. Ma la verità è che i componenti del container saranno sempre avvolti in componenti di presentazione. Infatti, spesso è possibile avere un componente di presentazione che ha un solo lavoro e che deve essere racchiuso da uno specifico componente contenitore. Questo è esattamente ciò che faremo con la barra laterale.
reagire-redux Ovviamente, dovremo iniziare installando la libreria react-redux. Quindi facciamolo installazione npm --save react-redux.
Una volta installato, possiamo procedere e importarlo usando importare Provider da 'react-redux'; nel nostro file principale, app.js. In questo file, in realtà abbiamo solo bisogno del componente del provider che ci viene dato da react-redux.
Ora, il componente provider è in realtà la parte di react-redux che prenderà il nostro negozio e lo passerà a questi diversi componenti. In realtà ciò che accade è, dietro le quinte, il provider sta utilizzando la funzione di contesto di React. Quindi, se hai un'esperienza React un po 'più avanzata e hai già giocato con il contesto precedente, ciò potrebbe darti un'idea di come funziona esattamente il provider.
Il provider rende davvero molto semplice utilizzare il negozio ovunque. Tutto ciò che dobbiamo fare è racchiudere il nostro componente applicativo di primo livello in un componente del provider, come mostrato qui:
E ora la nostra applicazione sta usando il provider react-redux.
Collegare() FunzioneOra apriamo il nostro file della barra laterale e importiamo il file Collegare() funzione da reagire-redux. Il Collegare() funzione ci permette di definire esattamente quali proprietà e funzioni vogliamo che un componente container abbia, e quindi possiamo prendere quella definizione, applicarla a un componente di presentazione e ottenere un componente React completo.
Ora capisco che suona un po 'confuso. Quindi vediamo come questo è fatto.
La bellezza della barra laterale che abbiamo già scritto è che in realtà è già una componente di presentazione.
Prima di tutto, la nostra barra laterale è davvero interessata a come appaiono le cose. Ci dà ovviamente lo stile del markup e non è a conoscenza di Redux. Abbiamo questi metodi che chiamiamo showAddDeck, addDeck, e hideAddDeck, ma quei metodi sanno di Redux. La barra laterale di per sé non sa nulla di Redux. Infatti, se volessimo rimuovere Redux da questo progetto e utilizzare qualche alternativa, potremmo semplicemente modificare le definizioni di queste funzioni, e questo componente della barra laterale non deve assolutamente cambiare. Chiama solo queste funzioni.
Come legge i dati? Bene, legge solo i dati dalle proprietà che gli abbiamo dato. Che ne dici di cambiare i dati? Beh, invoca solo i callback che provengono dalle proprietà. Abbiamo tre metodi e quando invoca quelli, i dati vengono modificati nello store. E infine, certo, sì, è scritto a mano. E come vedrai in un secondo, i componenti del container saranno generati da react-redux.
Quindi abbiamo già uno dei due pezzi di cui abbiamo bisogno: questa barra laterale è una componente di presentazione. La prossima cosa che vogliamo fare è prendere queste definizioni di proprietà che stiamo dando alla barra laterale, e invece di definirle qui, le definiremo come parte del nostro componente contenitore.
Quindi ho intenzione di copiare queste righe:
E li incollerò in alto qui:
Ora queste proprietà sono in realtà suddivise in due gruppi: le proprietà che sono dati e le proprietà che sono chiamate da chiamare, che eseguono azioni che cambiano lo store.
Quindi quello che dobbiamo fare ora è creare due funzioni che mapperanno lo stato a queste proprietà. Tradizionalmente all'interno di React, vengono chiamate queste funzioni mapStateToProps e mapDispatchToProps.
Quindi andiamo avanti e iniziamo mapStateToProps. Questa è una funzione che riceverà lo stato più recente dal negozio.
Abbiamo solo bisogno di restituire un oggetto, che avrà due proprietà e, come abbiamo già visto, sono le ponti e addingDeck proprietà. Quindi in realtà posso semplicemente copiarli e incollarli qui perché sono praticamente gli stessi dati - abbiamo solo bisogno di convertire la sintassi in sintassi letterale dell'oggetto invece della sintassi JSX.
Quindi questo è il nostro mapStateToProps funzione. Fondamentalmente, prende solo lo stato attuale dall'archivio e restituisce qualsiasi dato o componente di presentazione avrà bisogno. Quindi ha bisogno del ponti e il addingDeck proprietà, e quindi restituiamo quelli all'interno di un oggetto.
Possiamo fare alcune cose per pulire un po 'questo. Prima di tutto, potremmo effettivamente sbarazzarci di queste parentesi graffe che sono il blocco per questa funzione perché abbiamo solo una dichiarazione che stiamo restituendo. Ma poi, dato che abbiamo solo quella riga, possiamo sbarazzarci dell'istruzione return.
Tuttavia, ora abbiamo delle parentesi graffe attorno al letterale dell'oggetto e JavaScript penserà che questo sia un blocco funzione, quindi le racchiuderemo tra parentesi.
Possiamo accorciarlo un po 'di più, perché non abbiamo bisogno dell'intero oggetto di stato, quindi possiamo semplicemente usare la sintassi destrutturante e dire che vogliamo solo il ponti proprietà e il addingDeck proprietà da questo oggetto.
Certo, quindi, all'interno di questa funzione, non diciamo state.decks, diciamo solo ponti. E non lo diciamo state.addingDeck, diciamo solo addingDeck. E ora penso che puoi vedere dove stiamo andando con questo - perché la chiave e la proprietà hanno lo stesso nome, possiamo sbarazzarci di uno di questi e possiamo solo dire ponti e addingDeck.
E questa è la versione più breve della nostra funzione grazie a ES6.
Quindi, ora? mapDispatchToProps? Bene, anche questa è una funzione, e ci vorrà spedizione come il suo unico parametro. Ora la spedizione, naturalmente, è la funzione di spedizione del negozio.
Ancora una volta, restituiremo un oggetto letterale, quindi non dimenticare quelle parentesi e all'interno abbiamo bisogno delle tre proprietà che abbiamo in cima: addDeck, showAddDeck, e hideAddDeck. Quindi ora abbiamo una funzione che associa la funzione di spedizione ai tre callback di cui abbiamo bisogno per una barra laterale.
Quindi ora abbiamo tutto ciò di cui abbiamo bisogno per creare il nostro componente container. Abbiamo due funzioni che mapperanno il nostro oggetto stato nella nostra funzione di invio alle proprietà di cui questa funzione ha bisogno. E abbiamo un componente di presentazione che si aspetta queste proprietà.
Ora il Collegare() la funzione è ciò che possiamo usare per connettere queste due funzioni di mappatura con un componente di presentazione. E ciò che questa funzione di connessione restituirà è il nostro componente contenitore. In realtà non scriveremo un altro componente qui, ma passiamo questi tre pezzi al Collegare() funzione, e restituirà il nostro componente contenitore.
Quindi, in basso, anziché esportare la barra laterale, esportiamo una chiamata a Collegare(). Passeremo due parametri: il mapStateToProps e mapDispatchToProps Funzioni e Collegare() restituirà una nuova funzione.
esportazione predefinita connect (mapStateToProps, mapDispatchToProps) (barra laterale);
Ora ciò che viene effettivamente esportato da questo file non è una barra laterale di presentazione, ma è il nostro nuovo componente contenitore, al quale al di fuori di questa funzione potremmo ancora fare riferimento come
Quindi questo è il reagire-redux pacchetto in azione. Puoi controllare i file sorgente del corso su GitHub per vedere come funziona il codice per intero.
Nel corso completo, Modern Web Apps con React e Redux, ti mostrerò come iniziare a creare moderne applicazioni web con React e Redux.
A partire dal nulla, utilizzerai queste due librerie per creare un'applicazione web completa. Inizierai con l'architettura più semplice possibile e creerai lentamente l'app, funzione per caratteristica. Imparerai concetti di base come strumenti, riduttori e routing. Scoprirai anche alcune tecniche più avanzate come componenti intelligenti e stupidi, componenti puri e azioni asincrone. Alla fine, avrai creato un'app completa per le flashcard per l'apprendimento tramite ripetizione spaziale.
Lungo il percorso, avrai la possibilità di affinare le tue abilità ES6 (ECMAScript 2015) e apprendere i modelli e i moduli che funzionano meglio con React e Redux!
Puoi anche sviluppare la tua conoscenza di React con questi corsi:
