Fundamentele Redux, Partea 3 Stare, acțiuni și Reducere Redux

Ce veți învăța

  • Cum se definesc valorile de stare care conțin datele aplicației dvs.
  • Cum să definiți obiecte de acțiune care descriu ce se întâmplă în aplicația dvs.
  • Cum se scrie funcții de reducere care calculează starea actualizată pe baza stării și acțiunilor existente
  • Cunoașterea termenilor și conceptelor cheie Redux, cum ar fi „acțiuni”, „reductoare”, „magazin” și „expediere”. (Vedea Partea 2: Concepte Redux și flux de date pentru explicații despre acești termeni.)

Introducere #

În partea 2: Conceptele și fluxul de date Redux, ne-am uitat la modul în care Redux ne poate ajuta să construim aplicații care pot fi întreținute oferindu-ne un singur loc central pentru a pune starea globală a aplicației. De asemenea, am vorbit despre conceptele de bază Redux, cum ar fi trimiterea obiectelor de acțiune și utilizarea funcțiilor reductor care returnează noi valori de stare.

Acum, că aveți o idee despre ce sunt aceste piese, este timpul să puneți în practică aceste cunoștințe. Vom construi un mic exemplu de aplicație pentru a vedea cum funcționează de fapt aceste piese împreună.

Exemplul de aplicație nu este conceput ca un proiect complet pregătit pentru producție. Scopul este de a vă ajuta să învățați API-urile de bază Redux și modelele de utilizare și să vă îndreptați în direcția corectă folosind câteva exemple limitate. De asemenea, unele dintre primele piese pe care le construim vor fi actualizate ulterior pentru a arăta modalități mai bune de a face lucrurile. Vă rugăm să citiți întregul tutorial pentru a vedea toate conceptele utilizate.

Configurare proiect #

Pentru acest tutorial, am creat un proiect de pornire preconfigurat care are deja configurat React, include unele stiluri implicite și are un API REST fals care ne va permite să scriem solicitări API reale în aplicația noastră. Veți folosi acest lucru ca bază pentru scrierea codului real al aplicației.

Pentru a începe, puteți deschide și furniza acest CodeSandbox:

De asemenea, puteți clona același proiect din această repo Github. După clonarea repo, puteți instala instrumentele pentru proiect cu instalarea npm și porniți-l cu npm start .

Dacă doriți să vedeți versiunea finală a ceea ce vom construi, puteți verifica ramură tutorial-pași, sau consultați versiunea finală din acest CodeSandbox.

Crearea unui nou proiect Redux + React #

După ce ați terminat acest tutorial, probabil că veți dori să încercați să lucrați la propriile dvs. proiecte. Vă recomandăm să utilizați șabloanele Redux pentru Create-React-App ca cel mai rapid mod de a crea un nou proiect Redux + React. Vine cu Redux Toolkit și React-Redux deja configurate, utilizând o versiune modernizată a exemplului de aplicație „contor” pe care l-ați văzut în partea 1. Acest lucru vă permite să treceți direct la scrierea codului de aplicație real, fără a fi nevoie să adăugați pachetele Redux și să configurați magazinul.

Dacă doriți să aflați detalii specifice despre cum să adăugați Redux la un proiect, consultați această explicație:

Explicație detaliată: Adăugarea Redux la un proiect React

Șablonul Redux pentru CRA vine cu Redux Toolkit și React-Redux deja configurate. Dacă configurați un proiect nou de la zero fără șablonul respectiv, urmați acești pași:

  • Adăugați pachetele @ reduxjs/toolkit și react-redux
  • Creați un magazin Redux folosind API configureStore de la RTK și treceți în cel puțin o funcție de reducere
  • Importați magazinul Redux în fișierul punctului de intrare al aplicației dvs. (cum ar fi src/index.js)
  • Înfășurați componenta rădăcină React cu

componentă din React-Redux, cum ar fi:

Explorarea proiectului inițial #

Acest proiect inițial se bazează pe șablonul de proiect standard Create-React-App, cu unele modificări.

Să aruncăm o privire rapidă asupra a ceea ce conține proiectul inițial:

Dacă încărcați aplicația acum, ar trebui să vedeți un mesaj de bun venit, dar restul aplicației este altfel gol.

Cu asta, să începem!

Lansarea aplicației de exemplu Todo #

Exemplul nostru de aplicație va fi o mică aplicație „todo”. Probabil că ați mai văzut exemple de aplicații pentru toate - acestea oferă exemple bune, deoarece ne permit să arătăm cum să facem lucruri precum urmărirea unei liste de articole, gestionarea intrărilor utilizatorilor și actualizarea interfeței de utilizare atunci când aceste date se modifică, care sunt toate lucrurile care se întâmplă în o aplicație normală.

Definirea cerințelor #

Să începem prin a afla cerințele inițiale de afaceri pentru această aplicație:

  • IU ar trebui să fie alcătuită din trei secțiuni principale:
    • O casetă de intrare pentru a permite utilizatorului să introducă textul unui nou element de lucru
    • O listă cu toate elementele existente
    • O secțiune de subsol care arată numărul de todos necompletați și afișează opțiunile de filtrare
  • Elementele din lista Todo trebuie să aibă o casetă de selectare care comută starea lor „finalizată”. De asemenea, ar trebui să putem adăuga o etichetă de categorie codificată pentru culori pentru o listă predefinită de culori și să ștergem elementele de lucru.
  • Contorul ar trebui să pluralizeze numărul de todos activi: "0 articole", "1 articol", "3 articole" etc.