Guia per a principiants per respondre / reduxir: com començar a aprendre i no deixar-se desbordar

Foto de Roman Mager a Unsplash

Exempció de responsabilitat: Aquesta és una guia per a principiants escrita per un principiant de React / Redux.

Aprendre un nou marc Javascript el 2017 pot ser una tasca descoratjadora. Suposem que per fi us heu posat al dia amb Angular, però tothom ha passat a aquesta brillant cosa nova anomenada React. Per tant, heu llegit alguns tutorials i no podeu esperar a configurar el vostre nou projecte React. Un altre article diu que heu d’utilitzar Redux per gestionar l’estat de la vostra nova aplicació. Tots els principiants poden consultar aquest article. Em considero un desenvolupador intermedi i encara em sento així.

Quan intentava iniciar el meu projecte React / Redux, vaig examinar un munt d’articles sobre com organitzar el meu directori de fitxers: fitxers agrupats per tipus, per component, per domini, etc.

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

Em vaig adonar que havia de començar per algun lloc. El moment ha arribaria més tard. En fer-ho, entendria els pros i els contres de cada enfocament. Pot ser una refactorització dolorosa de seguir, però serà una lliçó valuosa. I volia estudiar igualment.

Pas 1: adopteu un enfocament de formació d’opinions i seguiu-lo

He seguit aquest tutorial.

El meu enfocament d’aprenentatge ha estat programar la meva pròpia aplicació seguint el procés de pensament de l’autor. Trobo que l'article és un dels tutorials més útils. Encara pot ser massa per a algú que comença amb React / Redux, així que vaig documentar el meu viatge i el vaig convertir en una versió reduïda del tutorial.

Pas 2: comenceu poc

Al principi, el meu objectiu era molt senzill: representar una llista dels articles que he recopilat mitjançant una aplicació d’agregador de notícies. La resposta de la base de dades de notícies serà un recull d’articles amb la següent estructura de dades.

Rendeu una llista d'articles sobre Ethereum

Pas 3: trieu una placa de caldera

Vaig fer servir la caldera feta pels meus encantadors professors a l'Acadèmia Fullstack. (No vaig agafar el tren React / Redux allà. La meva cohort és l'última a aprendre AngularJS.) Vaig escollir aquest boilerplate perquè utilitza Javascript de pila completa: React / Redux per a frontend i Express / Sequelize / PostgreSQL per a això Backend. Als efectes d’aquest exercici, vaig endreçar una mica la caldera perquè les persones sense Express / Sequelize / PostgreSQL poguessin participar. A partir d’ara només treballem amb React / Redux.

Aquí teniu el repositori amb el punt de partida i el codi acabat d’aquest exercici.

Aquesta és l'estructura del fitxer.

src / Components / ListView.js ListRow.js Container / ArticlesIndex.js Services / articles.js Business / Articles / actions.js actionTypes.js reducer.js index.js

Abans de seguir aquest tutorial, si termes com "acció" i "reduir" no sonen, us recomano que llegiu el concepte bàsic de la documentació oficial de Redux o de l'article que he escrit:

Pas 4: comenceu amb l'estat de Redux

Quin és l'estat de la nostra aplicació? És una aplicació senzilla d’una pàgina amb una llista d’articles. Hem de desar la llista d’articles obtinguts del servidor. Si mireu el fitxer articles.js a src / services / articles, veureu una sèrie d'articles. Atès que el propòsit d’aquest exercici és familiaritzar-se amb el flux de dades de l’arquitectura React / Redux, la funció getAllArticles () retorna els articles necessaris directament. Al món real, aquesta funció serà una trucada asíncrona a una API remota.

Ara es planteja la qüestió de com podem estructurar el nostre estat. La resposta del servidor (o en aquest cas de la funció getAllArticles) és una matriu d’objectes. Ho podem posar al nostre estat.

Però, és aquesta la millor manera de modelar la condició? Imagineu l’escenari en què heu d’actualitzar una entrada d’article i l’aplicació repeteix la matriu per trobar les notícies que desitgeu. Què passa si la matriu és realment gran? Aquest enfocament no serà molt eficient.

Quan estructurem el nostre estat amb un objecte, accedir a un article es converteix en una cerca. Podem emmagatzemar una matriu addicional d’identificadors per a la representació d’elements.

Pas 5: implementeu el flux de dades del vostre estat de principi a fi

Com actualitzem aquest estat? Aquí és on entren en joc l'acció i els reductors. Penseu en aquest diagrama de flux:

Quina és la nostra interacció amb l’usuari? Volem representar la llista d'elements quan es carrega la pàgina perquè no hi hagi molta interacció. Per fer-ho, comencem per componentDidMount a la vista React. Podem fer una acció per aconseguir articles i notificar-ho al reductor. El reductor avalua l’acció i actualitza l’estat. L'estat actualitzat activa el component a representar.

Comencem definint el tipus d’accions a la nostra aplicació. És una definició constant i senzilla de com obtenir articles. Més endavant sempre podem afegir més definicions, p. Ex. B. actualitzeu una entrada o suprimiu-la.

Ara anem a l'acció. Recordeu que la resposta que obtenim del dorsal és una matriu d’objectes que convertim en objecte mitjançant la funció lodash keyBy.

El reductor avalua l'objecte simple que conté el tipus d'acció i la seva càrrega útil. A continuació, desa les dades a l’estat.

Pas 6: renderització

Connectarem un contenidor anomenat ArticleIndex a l’estat de l’article. AritcleIndex és un contenidor intel·ligent que pot comunicar-se amb la botiga Redux. Hi ha un component estúpid a ArticleIndex anomenat ListView, escrit per Tal Kol, l'autor del tutorial de Redux que vaig seguir. Podeu consultar la implementació a la carpeta de components.

ListView utilitza articlesById, un conjunt d’identificadors d’articles i una funció de representació. A continuació, es mostrarà la llista d'articles.

Com aconseguim que articlesById i diversos identificadors d'articles es mostrin? Aquí teniu una visió general del concepte bàsic de Redux. La vista React està vinculada a l’estat de Redux mitjançant la funció de connexió de la biblioteca React Redux.

Aquí teniu el codi que realitza les funcions descrites en aquest diagrama. A la zona inferior assignem l'estat de Redux i l'enviament als accessoris React. A componentDidMount anomenem loadArticles, que desencadena l'acció fetchAllArticles. Després d’actualitzar l’estat amb articles, mapStateToProps passa articlesById a la vista Respondre.

I ja està! Tenim una llista d'articles al nostre navegador.

Pas 7: anti-patró en algun lloc del codi?

Per conèixer el flux de dades a React / Redux, fins ara hem passat per alt un altre concepte de Redux. El component de reacció hauria d’accedir a l’estat de Redux mitjançant selectors. Normalment, els selectors es troben als fitxers reducer.js. Són funcions pures que accedeixen a l'estat de Redux i retornen algunes propietats d'estat. Si canvieu un dels vostres estats de Redux per a selectors existents que afecten més d'un component, només haureu d'actualitzar el selector.

Aquí teniu el nostre selector getArticles:

La funció mapStateToProps a ArticleIndex.js es converteix en:

Bonificació: seguiu el mateix procés de pensament i creeu un filtre

Amb una llista d’elements podem afegir diverses operacions diferents. Per exemple, els articles són notícies sobre Ethereum. Es divideixen en dos tipus: notícies de la comunitat de criptomonedes i notícies dels mitjans de comunicació principals. Després de representar la llista d'elements, he afegit un filtre de tipus.

Esbandir, repetir, remodelar

Aprendre React / Redux és com saltar a un forat de conill, però em va convertir en escèptic en creient. Espero que aquest article t’acceleri l’aprenentatge.

Des del principi, el meu projecte d’aprenentatge s’ha convertit en un agregador de notícies i una aplicació de seguiment de tendències.

Gràcies per llegir!

Si esteu a Steemit, les xarxes socials blockchain (similars a Reddit and Medium's love child), doneu una ullada aquí: