Un sito web di React che sto costruendo avrà queste sezioni: Hero , Projects , Courses , Skills e poche altre. La sezione Skill eseguirà l'iterazione attraverso un elenco di abilità e visualizzerà un componente React SkillCard per ciascun elemento (come puoi vedere nello schizzo). SkillCard aprirà un componente SkillDetail quando si fa clic. Il SkillDetail appare come un modale e visualizza i dati di Projects e Courses ad esso associati. Anche le sezioni Project e Courses , nella loro sezione, stampano un elenco e quando si fa clic apriranno un componente ProjectDetail o CourseDetail . Quindi è tutto collegato dinamicamente. Il progetto e la sezione dei corsi hanno ciascuno uno schizzo simile come sotto.
Penso che GraphQL potrebbe essere una scelta meravigliosa per questo. La domanda principale è: ho bisogno di Redux?
Quindi, prima di poter rispondere a questa domanda, è pertinente che io capisca come impostare il mio progetto. Quindi ecco uno schizzo che ho fatto che può aiutarti a vedere. Concentriamoci solo sulla sezione Abilità.
TheReactModalèladomanda.Mipiacerebbechesaltassefuorioccupandocircail70%delloschermoesfocarelosfondoperunbell'effetto.QuindipensocheidettaglidelleabilitàdovrebberoesserecaricatidalcomponenteSkill.
LaSkillCardpotrebbeaverequesteinformazioni:
Skill{idnameaboutstars}IlcomponenteSkillDetailpotrebbecontenerequesteinformazioni:
SkillDetail(id:String){skillNameProject{idnameurl}Course{idnameurl}}Questaèsoloun'appasingolapaginaementrescorriversoilbassovedraiHero,Abilità,Progetti,Corsiealtresezioni.
PrimadiGraphQL,pensereichel'interaappsiauncontenitorechehainviato3+richiesteperottenereelenchidi:competenze,progetti,corsiealtro.QuestoèciòchefareiconReduxequestiriduttoripossonomemorizzarenellacachelarisposta(finoalcaricamentodellapagina).OramichiedosehopersinobisognodiRedux.
Pensodidoverprimacapiredovesonoicontenitori...
Modules--/Componentsapp.js(maincontainer)----/SkillsSkill.js(listofCards)SkillDetail.js(modalpopup)----/Projects(listofCards)ProjectDetail.js(modalpopup)----/CoursesCourses.js(listofCards)CourseDetail.js(modalpopup)- QualcheideasuseusaresoloGraphQLhasenso?
- Devousareredux?
- Pensicheognicomponente*Detail.jsdovrebbeessereilsuocontenitoreGraphQL?
modifica:quiApp.jsgraphqlconnect
exportdefaultcompose(graphql(queries.getSkillList(),{name:"skills"
}),
graphql(queries.getProjectList(), {
name: "projects"
}),
graphql(queries.getCourseList(), {
name: "courses"
}),
)(App);
Tecnicamente, queste 3 query di root hanno TUTTE le informazioni necessarie ai componenti di dettaglio, ma hanno solo bisogno di essere ordinate. C'è bisogno di più richieste al server? GraphQL utilizza questi dati invece di richiedere endpoint specifici dal server?
Sto davvero cercando di farlo nel modo giusto e sono aperto a qualsiasi feedback. Grazie.