de Syeda Aimen Batool

O introducere în Redux și modul în care starea este actualizată într-o aplicație Redux

O introducere in Redux si modul in care starea este
Fotografie de Fabian Grohs pe Unsplash

Am început să învăț Redux cu câteva zile în urmă și a fost un concept copleșitor pentru mine la început. După ce mi-am lustruit abilitățile în ReactJS realizând un aplicație de citire a cărților personale, M-am îndreptat spre Redux pentru a afla mai multe despre asta.

Astăzi, voi împărtăși câteva concepte de bază Redux fără a utiliza nicio bibliotecă de vizualizare (React sau Angular). Acesta este un fel de notă personală pentru referință viitoare, dar îi poate ajuta și pe alții.

Să sapăm împreună!

Ce este Redux?

Redux este o bibliotecă open-source pentru a îmbunătăți predictibilitatea stării într-o aplicație JavaScript. Este o bibliotecă independentă. Este utilizat în mod obișnuit cu alte biblioteci precum React și Angular pentru o mai bună gestionare a stării aplicației. Redux a fost creat de Dan Abramov în 2015 pentru a gestiona gestionarea complexă a statului într-un mod eficient.

Când o aplicație crește, devine mai greu să gestionezi starea și să depanezi problemele. Devine o provocare să urmărești când și unde se schimbă starea și unde trebuie reflectate schimbările. Uneori, o introducere a utilizatorului declanșează un apel API care actualizează un model. La rândul său, acel model actualizează unele stări sau poate celălalt model și așa mai departe.

Într-o astfel de situație devine dificil să urmăriți schimbările de stare. Se întâmplă în principal pentru că nu există o regulă definită pentru actualizarea unei stări, iar starea poate fi schimbată de oriunde din aplicație.

Redux încearcă să rezolve această problemă oferind câteva reguli simple pentru a actualiza starea pentru a o menține previzibilă. Aceste reguli sunt elementele de bază ale Redux.

Magazin Redux:

Așa cum am discutat mai devreme, scopul principal al Redux este de a oferi gestionarea previzibilă a stării în aplicațiile noastre. Redux realizează acest lucru având o singură sursă de adevăr, adică un arbore de stat unic. Arborele de stare este un obiect JavaScript simplu care deține întreaga stare a aplicației noastre. Există doar câteva modalități de a interacționa cu statul. Și acest lucru ne facilitează depanarea sau urmărirea stării noastre.

Acum avem un singur stat principal care ocupă întreaga stare a aplicației situată într-o singură locație. Orice modificare adusă arborelui de stare se reflectă în întreaga aplicație, deoarece aceasta este singura sursă de date pentru aplicație. Și acesta este primul principiu fundamental al Redux.

Regula nr. 1 – Sursă unică de adevăr

Starea întregii aplicații este stocată într-un arbore de obiecte dintr-un singur magazin. – Documente oficiale

Modurile în care puteți interacționa cu un arbore de stare sunt:

  • Obținerea statului
  • Ascultând schimbările din stat
  • Actualizarea stării

A magazin este o singură unitate care deține arborele de stat si metode pentru a interacționa cu arborele de stare. Nu există o altă modalitate de a interacționa cu o stare din interiorul magazinului decât prin intermediul acestor metode date.

O introducere in Redux si modul in care starea este

Să vorbim despre metodele pe care ni le oferă un magazin pentru a interacționa cu statul.

  • getState () – Returnează starea curentă a aplicației.
  • dispatch (acțiune) – Singura modalitate de actualizare a unei stări este prin expedierea unei acțiuni și dispatch(action) servește scopului. Vom vorbi mai detaliat într-un pic.
  • subscribe (ascultător) – Scopul acestei metode este de a asculta schimbările de stare. De fiecare dată când se schimbă o stare, aceasta va fi apelată și va reveni la starea actualizată.
  • replaceReducer (nextReducer) – Înlocuiește reductorul utilizat în prezent de magazin pentru a calcula starea.

Acum, când avem un magazin care conține un arbore de stare și câteva moduri de a interacționa cu starea, cum putem actualiza starea aplicației?

Actualizarea stării în aplicație:

Singura modalitate de actualizare a unei stări este trimiterea unei acțiuni. Aceasta este a doua regulă.

Regula # 2 – Statul este numai în citire

O acțiune este un obiect JavaScript simplu pentru a urmări evenimentul specific care are loc în aplicație. Ceea ce o face specială este o proprietate de tip care este o parte necesară a acesteia.

{  type: "ADD_BOOK_TO_THE_CART"}

Scopul principal al acestei proprietăți este de a informa Redux despre evenimentul care are loc. Acest tip ar trebui să fie descriptiv despre acțiune. Împreună cu proprietatea „tip”, poate avea și alte informații despre evenimentul care are loc.

Acțiunile pot avea cât de multe informații doriți. Este o bună practică să oferiți mai puține informații necesare – de preferință un id sau orice identificator unic ori de câte ori este posibil.

Aici avem o acțiune pentru a adăuga o carte în coș.

Odată ce ne definim acțiunea, o transmitem dispeceratului. store.dispatch () este o funcție furnizată de bibliotecă care acceptă o acțiune pentru a efectua o acțiune împotriva statului. Redux restricționează actualizarea stării numai la această metodă.

Această modalitate strictă de actualizare a stării asigură faptul că starea nu poate fi schimbată direct nici prin vizualizare, nici prin orice apel de rețea. Singura modalitate de actualizare a unei stări este prin definirea acțiunii și apoi trimiterea acesteia. Amintiți-vă că acțiunile sunt obiecte JavaScript simple. Acțiunile pot fi înregistrate, serializate și redate în scopuri de depanare.

Acum avem un magazin, un stat și o acțiune în aplicația noastră pentru a efectua unele sarcini împotriva statului. Acum avem nevoie de o modalitate de a folosi aceste acțiuni pentru a efectua actualizarea. Acest lucru se poate face folosind o funcție pură și aceasta este regula # 3.

1611207128 909 O introducere in Redux si modul in care starea este

Regula # 3 – Modificările se fac cu funcții pure

Magia se întâmplă aici. Avem nevoie de o funcție pură simplă, care, ca parametru, ia starea curentă a aplicației și o acțiune de efectuat asupra stării, și apoi returnează starea actualizată. Aceste funcții se numesc reductoare.

Acestea se numesc reductoare deoarece iau colecția de valori, o reduc la o stare actualizată și apoi o returnează. Deoarece reductoarele sunt funcții pure, ele nu mută starea inițială. În schimb, returnează starea actualizată într-un obiect nou. Aplicația noastră poate avea unul sau mai multe reductoare. Fiecare reductor poate avea o stare relevantă pentru a îndeplini sarcini specifice.

Deoarece reductoarele sunt funcții pure, acestea ar trebui să aibă următoarele atribute:

  • Având aceeași intrare, ar trebui să returneze aceeași ieșire de fiecare dată – Nu este permisă nicio mutație.
  • Fără efecte secundare – Nu se modifică datele apelurilor API dintr-o sursă externă.

Procesul.

Dacă conectăm punctele, Redux este o bibliotecă care are un magazin care conține un arbore de stare și câteva metode pentru a interacționa cu statul. Singura modalitate de a actualiza o stare în interiorul unui magazin este de a expedia o acțiune și de a defini o funcție de reducere pentru a efectua sarcini pe baza acțiunilor date. Odată expediată, acțiunea intră în funcțiile reductorului care efectuează sarcinile și returnează starea actualizată în magazin. Aceasta este ceea ce înseamnă Redux.

1611207129 635 O introducere in Redux si modul in care starea este
Fluxul de actualizare a stării în Redux

Ce am învățat până acum?

Să rezumăm ceea ce am învățat până acum pentru a conecta punctele.

  • Redux – Un container open source previzibil
  • Tree Tree – Un obiect JavaScript simplu care conține întreaga stare a aplicației
  • Trei moduri de a interacționa cu o stare (singurele modalități):
    Magazin – O singură unitate care conține arborele de stare și metode pentru a interacționa cu arborele de stare
    Acțiuni – Planificați obiecte Javascript pentru a descrie acțiunea care se desfășoară
    Reductoare – Funcții Javascript pure pentru a lua starea actuală și o acțiune pentru a reveni la o nouă stare

Deoarece Redux este o bibliotecă independentă care poate fi utilizată cu React, Angular sau orice altă bibliotecă, am evitat să fac o aplicație eșantion cu oricare dintre aceste biblioteci de vizualizare. În schimb, m-am concentrat doar asupra conceptelor de bază Redux.

Redux poate fi copleșitor la început și, dacă sunteți începător sau dezvoltator junior, vă poate oferi o perioadă dificilă. Dar consecvența și o atitudine pozitivă sunt cheia succesului. Dacă te străduiești să supraviețuiești ca dezvoltator junior și cauți o motivație, poți citi cum M-am luptat să depășesc provocările cu care m-am confruntat în calitate de dev junior.

Spune bună @aimenbatool.