Voi construi o mică aplicație pentru pur și simplu evaluarea întrebărilor. Acesta este conceput ca un proiect de exerciții pentru React și Redux, deoarece încă nu îl înțeleg.
➡️ Github Repo este disponibil aici ⬅️
📄 Cuprins
- „Motivație pentru acest articol”
- „Modularizarea bazei”
- „Adăugarea Redux”
- „Tipuri de acțiuni”
- „Reductoare”
- „Acțiuni și creatori de acțiuni”
- „Creează magazinul Redux”
- „Conectează containerul la magazin”
- „Adăugați o altă componentă în aplicația Redux”
- „Implementează rațe”
- „Chrome Redux DevTools”
„Totul este practică.”
— Pele
Motivație pentru acest articol
O altă aplicație mică pentru a înțelege Redux și React. Se pare că este a 100-a aplicație care încearcă să înțeleagă Redux. Dar 1 lună fără Redux și începi practic de la nimic din nou. Eu sunt de genul: „Da, am auzit despre asta” – și atât. Action, Action Creatori, Reduceri, Dispatch, blabla. Prea multe lucruri de înțeles :D Deci încă o dată ↗️
Modularizarea bazei
Structurați componentele pentru a se potrivi perfect într-o aplicație Redux.
- componenta cronometrului are propriul său stat local, nu depinde de alte componente
- statisticile și componentele contorului depind de alte componente
- AddQuestionForm este dependent de alte componente și conține, de asemenea, informații logice
- componentele antet și întrebare
Modularizarea ajută la
- izolați responsabilitățile, ceea ce înseamnă testare și depanare mai ușoare
- scala mai bine aplicația și mai ușor pentru utilizarea Redux
- organizați mai bine între echipe
Adăugarea Redux
Tipuri de acțiuni
Decideți ce componente ar trebui să participe la magazinul Redux. -› În această aplicație, numai întrebările trebuie să fie disponibile tuturor componentelor.
Găsiți ce evenimente se întâmplă în aplicația dvs. pentru această stare specifică. -› În această aplicație este
- schimbarea scorului
- adaugand intrebari
- eliminarea întrebărilor
Reductoare
Reductoarele sunt funcții pure, care își schimbă starea în funcție de tipul de acțiune.
Funcția de reducere oferă diferite instrucțiuni de comutare privind schimbarea stării. (Asigurați-vă că nu schimbați niciodată starea în sine! Ar trebui să fie o funcție pură! #imuabilitate)
De exemplu:
export default function Player(state = initialState, action) { switch (action.type) { case QuestionActionTypes.ADD_PLAYER: return [ ...state, { name: action.name, score: 0, }, ]; case QuestionActionTypes.REMOVE_QUESTION: return [...state.slice(0, action.index), ...state.sclice(action.index + 1)]; case QuestionActionTypes.UPDATE_QUESTION_SCORE: return state.map((question, index) => { if (index === action.index) { return { ...question, score: question.score + question.score, }; } return question; }); default: return state; } }
Acțiuni și creatori de acțiuni
Trimiterea unei acțiuni către Redux
- creatorii de acțiuni generează o acțiune (acțiune = un eveniment care va avea ca rezultat o schimbare de stare)
- acțiunea este trimisă în magazinul Redux
- un reductor transmite acțiunea unei componente și returnează noua stare
De exemplu, pentru adăugarea unei întrebări:
export const addQuestion = name => ({ type: QuestionActionTypes.ADD_QUESTION, name, });
Creați magazinul Redux
Creați un magazin în index.js, trecându-i reductorul principal și înfășurați-l în jurul componentei tabloului de bord pentru a oferi magazinul întregii aplicații.
Conectați recipientul la magazin
- utilizați
mapStateToProps
pentru a atribui starea unei valori de recuzită -› atribuiți starea întrebărilor ca elemente de recuzită - pentru acțiunile de expediere automată, care sunt create, utilizați:
const {dispatch, questions} = this.props; const addQuestion = bindActionCreators(QuestionActionCreators.addQuestion, dispatch); const removeQuestion = bindActionCreators(QuestionActionCreators.removeQuestion, dispatch); const updateQuestionScore = bindActionCreators(QuestionActionCreators.updateQuestionScore, dispatch);
- actualizați în consecință gestionatorii de evenimente ale componentelor (componente contor, întrebare și tablou de bord)
- antetul și componentele cronometrului nu au nevoie de modificări, deoarece nu participă la ciclul Redux
Adăugați o altă componentă în aplicația Redux
Acum vrem să afișăm detalii pentru fiecare întrebare
- adăugați un nou tip de acțiune (selectați o întrebare)
- extindeți reductorul cu o nouă carcasă a comutatorului și o stare suplimentară
- adăugați un nou creator de acțiuni pentru selectarea unei întrebări
- creați un nou bindActionCreator în componenta tabloului de bord
- actualizați mapStateToProps cu indexul întrebărilor selectate
- creați o componentă QuestionDetail pentru a afișa detalii
- actualizați handlerul de evenimente pe componenta întrebare
➡️ Vezi commit-ul cu implementarea componentei de detaliu pe Github ⬅️
Implementați rațe
Pentru aplicațiile mai mici, „conceptul rațe” poate ajuta la dezvoltarea mai rapidă a unei aplicații Redux. Practic, în loc să păstrăm totul modular (acțiuni, reductoare, actionCreators), le putem păstra și într-un singur fișier pentru a avea o imagine de ansamblu mai bună.
Acest fișier arată astfel:
// Actions const ADD_QUESTION = 'question/ADD_QUESTION'; const REMOVE_QUESTION = 'question/REMOVE_QUESTION'; const UPDATE_QUESTION_SCORE = 'question/UPDATE_QUESTION_SCORE'; const SELECT_QUESTION = 'question/SELECT_QUESTION'; // Reducers const initialState = { questions: [ { name: 'Do you like AI?', score: 31, created: '00:00', updated: '00:00', }, { name: 'Do you like Engineering?', score: 20, created: '00:00', updated: '00:00', }, { name: 'How many Redux Apps?', score: 50, created: '00:00', updated: '00:00', }, ], selectedQuestionIndex: -1, }; export default function Question(state = initialState, action) { const date = `${new Date().getHours()}:00`; switch (action.type) { case ADD_QUESTION: const addQuestionList = [ ...state.questions, { name: action.name, score: 0, created: date, }, ]; return { ...state, questions: addQuestionList, }; case REMOVE_QUESTION: const removeQuestionList = [ ...state.questions.slice(0, action.index), ...state.questions.slice(action.index + 1), ]; return { ...state, questions: removeQuestionList, }; case UPDATE_QUESTION_SCORE: const updateQuestionList = state.questions.map((question, index) => { if (index === action.index) { return { ...question, score: question.score + action.score, updated: date, }; } return question; }); return { ...state, questions: updateQuestionList, }; case SELECT_QUESTION: return { ...state, selectedQuestionIndex: action.index, }; default: return state; } } // ActionCreators export const addQuestion = name => ({ type: ADD_QUESTION, name, }); export const removeQuestion = index => ({ type: REMOVE_QUESTION, index, }); export const updateQuestionScore = (index, score) => ({ type: UPDATE_QUESTION_SCORE, index, score, }); export const selectQuestion = index => ({ type: SELECT_QUESTION, index, });
➡️ Vezi angajamentul cu implementarea rațelor pe Github ⬅️
Chrome Redux DevTools
- Descărcați „Extensia Redux DevTools”
- adăugați linia de cod necesară în magazinul dvs
const store = createStore( QuestionReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), );
DevTools ajută la dezvoltarea și depanarea aplicației Redux. Consultați acest „articol” pentru mai multe.
Dacă ați câștigat ceva din acest articol, spuneți-mi cu un comentariu sau cu inimă. Asigurați-vă că urmăriți pentru mai multe :)