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.

➡️ Baza de cod pe Github ⬅️

  • 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

➡️ Cod modular pe Github ⬅️

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.

➡️ Rezultat pe Github ⬅️

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 :)