Guida per principianti a reagire / redux: come iniziare l'apprendimento e non lasciarsi sopraffare

Foto di Roman Mager su Unsplash

Disclaimer: questa è una guida per principianti scritta da un principiante React / Redux.

L'apprendimento di un nuovo framework Javascript nel 2017 può essere un compito scoraggiante. Supponiamo che tu abbia finalmente raggiunto Angular, ma tutti sono passati a questa nuova brillante novità chiamata React. Hai letto un paio di tutorial e non vedi l'ora di configurare il tuo nuovo progetto React. Aspetta, c'è un altro articolo che dice che dovresti usare Redux per gestire lo stato della tua nuova app. I principianti possono riferirsi a questo articolo. Mi considero uno sviluppatore intermedio e mi sento ancora così.

Quando ho provato ad avviare il mio progetto React / Redux, sfoglio innumerevoli articoli su come strutturare la mia directory di file: file raggruppati per tipo, raggruppati per componenti, raggruppati per dominio ... ecc.

fonte: http://gph.is/2k9DFT4

Mi sono reso conto che dovevo iniziare da qualche parte. Il momento aha sarebbe arrivato dopo. Nel processo, comprenderei i pro ei contro di ogni approccio. Potrebbe essere seguito da un doloroso refactoring, ma sarà una lezione preziosa appresa. E stavo costruendo per imparare comunque.

Passaggio 1: scegli un approccio supponente e seguilo

Ho seguito questo tutorial.

Il mio approccio all'apprendimento era iniziare a codificare la mia app seguendo il processo di pensiero dell'autore. Trovo che l'articolo sia uno dei tutorial più utili là fuori. Può ancora essere troppo per qualcuno che inizia in React / Redux, quindi ho documentato il mio viaggio e l'ho trasformato in una versione ridotta del tutorial.

Passaggio 2: iniziare in piccolo

Il mio obiettivo era molto semplice all'inizio: rendere un elenco di articoli che ho raccolto con un'app aggregatore di notizie. La risposta dal database delle notizie sarà una raccolta di articoli con la seguente struttura di dati.

Rendi un elenco di articoli su Ethereum

Passaggio 3: selezionare una piastra della caldaia

Ho usato la piastra della caldaia creata dai miei adorabili istruttori alla Fullstack Academy. (Non ho preso il treno React / Redux lì. La mia coorte è l'ultima che apprende AngularJS) Ho scelto questa piastra della caldaia perché utilizza javascript fullstack: React / Redux per il front-end ed Express / Sequelize / PostgreSQL per il backend. Ai fini di questo esercizio, ho pulito un po 'la piastra della caldaia affinché le persone senza Express / Sequelize / PostgreSQL possano seguirmi. D'ora in poi lavoreremo con React / Redux.

Ecco il repository contenente il punto di partenza e il codice finito per questo esercizio.

Questa è la struttura del file.

src /
  componenti /
    ListView.js
    ListRow.js
  contenitori /
    ArticlesIndex.js
  Servizi/
    articles.js
  memorizzare/
    articoli /
      actions.js
      actionTypes.js
      reducer.js
    index.js

Prima di seguire questo tutorial, se termini come azione e riduttore non suonano alcun campanello, ti consiglio vivamente di leggere il concetto di base nella documentazione ufficiale di Redux o l'articolo che ho scritto:

Passaggio 4: iniziare con lo stato Redux

Quale stato ha la nostra app? Stiamo parlando di una semplice app di una pagina con un elenco di articoli. Dobbiamo archiviare l'elenco degli articoli recuperati dal server. Se dai un'occhiata agli articoli.js in src / services / articoli, vedrai un array popolato di articoli. Poiché lo scopo di questo esercizio è familiarizzare con il flusso di dati dell'architettura React / Redux, la funzione getAllArticles () restituisce direttamente gli articoli di cui abbiamo bisogno. Nel mondo reale, questa funzione sarà una chiamata asincrona ad alcune API remote.

Ora la domanda è come strutturare il nostro stato. La risposta dal server (o in questo caso, la funzione getAllArticles) è una matrice di oggetti. Possiamo metterlo nel nostro stato.

Ma è questo il modo migliore per modellare lo stato? Considera lo scenario in cui devi aggiornare una voce di articolo, l'app eseguirà l'iterazione attraverso l'array per trovare le notizie che stai cercando. Cosa succede se la dimensione dell'array è davvero grande? Questo approccio non sarà molto performante.

Se strutturiamo il nostro stato con un oggetto, l'accesso a un articolo diventa una ricerca. Per eseguire il rendering di articoli, possiamo archiviare un array aggiuntivo di ID.

Passaggio 5: implementare il flusso di dati per il proprio stato dall'inizio alla fine

Come aggiorniamo questo stato? È qui che entrano in gioco azione e riduttore. Considera questo diagramma di flusso:

Qual è la nostra interazione con l'utente? Vogliamo rendere l'elenco degli articoli al caricamento della pagina in modo che non si tratti di un'interazione. Per fare ciò, iniziamo con componentDidMount nella vista React. Siamo in grado di inviare un'azione per recuperare articoli e informare il riduttore. Il riduttore valuterà l'azione e aggiornerà lo stato. Lo stato aggiornato attiverà il rendering del componente.

Cominciamo definendo il tipo di azioni che la nostra app ha. È una semplice definizione costante per il recupero di articoli. In seguito possiamo sempre aggiungere più definizioni, come aggiornare una voce o eliminare una voce.

Ora andiamo all'azione. Ricorda che la risposta che otteniamo dal backend è una matrice di oggetti, la trasformiamo in un oggetto usando la funzione lodash keyBy.

Il riduttore valuta l'oggetto normale contenente il tipo di azione e il suo payload. Quindi memorizza i dati nello stato.

Passaggio 6: rendering

Connetteremo un contenitore chiamato ArticleIndex allo stato dell'articolo. AritcleIndex è un contenitore intelligente in grado di comunicare con il negozio Redux. All'interno di ArticleIndex, c'è un componente stupido chiamato ListView, scritto da Tal Kol, l'autore del tutorial Redux che ho seguito. Puoi verificare l'implementazione nella cartella dei componenti.

ListView prende gli articoliById, una matrice di ID articolo e una funzione di rendering. Quindi esegue il rendering dell'elenco di articoli.

Come possiamo ottenere articoliById e una serie di ID articolo da visualizzare? Ecco una recensione del concetto di base di Redux. La vista React è connessa allo stato Redux tramite la funzione di connessione fornita dalla libreria reag-redux.

Ecco il codice che fa ciò che questo diagramma descrive. In fondo, mappiamo lo stato di Redux e lo spediamo agli oggetti di scena React. In componentDidMount, invochiamo loadArticles, che invia l'azione fetchAllArticles. Dopo che lo stato è stato aggiornato con articoli, articlesById viene passato alla vista React da mapStateToProps.

E questo è tutto! Abbiamo un elenco di articoli nel nostro browser!

Passaggio 7: Anti-pattern da qualche parte nel codice?

Per motivi di apprendimento del flusso di dati in React / Redux, finora abbiamo trascurato un altro concetto di Redux. Il componente React dovrebbe accedere allo stato Redux tramite i selettori. I selettori si trovano di solito nei file riduzioneer.js. Sono funzioni pure che accedono allo stato Redux e restituiscono alcune proprietà dello stato. Con i selettori in atto, se si modifica uno stato Redux che interessa più di un componente, è sufficiente aggiornare il selettore.

Ecco il nostro selettore getArticles:

La funzione mapStateToProps in ArticleIndex.js diventa:

Bonus: segui lo stesso processo di pensiero e costruisci un filtro

Con un elenco di articoli, possiamo aggiungere diverse operazioni. Ad esempio, gli articoli sono tutte notizie su Ethereum. Sono classificati in due tipi: notizie dalla comunità di criptovaluta e notizie dai media mainstream. Dopo aver reso l'elenco degli articoli, ho aggiunto un filtro di tipo usando lo stesso processo di pensiero.

Risciacquo, ripetizione, rifrattore

Imparare React / Redux è come saltare in una tana di coniglio, ma mi ha cambiato da scettico a credente. Spero che questo articolo possa dare il via al tuo apprendimento.

Dal primo passo del bambino, il mio progetto di apprendimento si è trasformato in un aggregatore di notizie e un'app di tracciamento delle tendenze!

Grazie per aver letto!

Se sei su Steemit, il social media blockchain (un po 'come il figlio dell'amore di Reddit e Medium), passa qui: