Vienpusis duomenų srautas palyginti su vienpusiu duomenų srautu

Tai yra keli programavimo modeliai, skirti struktūrizuoti jūsų reaguoti programą valdant būseną. Vienpusis duomenų srautas ← - redukcinis ir vienkryptis būdas ← tėvui vaikui.

Du pagrindiniai būsenos valdymo būdai yra būsenos perkėlimas iš tėvų komponentų į vaiko komponentus ir būsenos manipuliavimas pagrindiniame komponente arba antriniuose komponentuose (naudojant šį.props. Metodą, perduodamą iš pagrindinio komponento). Gali užtrukti daugiau laiko, kol jis pereis per kiekvieną komponentą, turi praeiti per kelis komponentus, kad pakeistų būseną.

GIF, iliustruojantis, kaip valdoma būsena naudojant vienkryptį duomenų srautą

Turite problemų dėl šio modelio?

Paprastoms programoms tai gali būti labai sudėtinga. Tai gali būti kažkas, ko labai sunku laikytis bandant DRY (nekartokite savęs) kodavimo principus ar atskiriant rūpesčius. Valstybė gali pereiti kelis komponentus niekada nenaudodama. Gali būti labai sunku atsekti.

Visų pirma to išmokta?

Išmokti, kaip rekvizitai gali būti perduoti iš tėvų komponentų į vaiko komponentus, svarbu suprasti, nes, kai kyla problemų redukuoti. Norėdami suprasti, ką jūs darote. Išmokus manipuliuoti ja (pvz., Įvedant į teksto lauką), svarbu, kaip būsena valdoma vienkryptiu būdu.

„Redux“ išsprendžia šią problemą.

Skirtingai nei valdant valstiją vienkrypčiu būdu, jei norite, galite tvarkyti būklę vienoje vietoje (nerekomenduojama.). Reduktoriaus veikimo būdas yra tai, kad jis tvarko būseną parduotuvėje ir manipuliuoja būsena per reduktorių, kuris yra ne kas kita, kaip paprasta funkcija. Tai trunka programos būseną ir veiksmus. Ir juo manipuliuoja.

Kas yra būsena ir veiksmai?

Tai ne kas kita, kaip paprastas „javascript“ objektas, ir rekomenduojama traktuoti kaip nekintamą, tai reiškia, kad objektas, kai manipuliuojama, priskiria naują objektą. Veiksmas taip pat yra objektas, kuris turi turėti tipą ir pasirinktinai turėti naudingą krovinį arba bet ką, ką norėtumėte pavadinti, kuris yra siunčiamas per veiksmo kūrėjus, kurie yra paprastos funkcijos, kurios grąžina veiksmo tipą.

Kas yra veiksmų tipai?

Veiksmų tipai yra atvejai, kai reduktoriuje manipuliuojama būsena. Jie išsiunčiami per veiksmo kūrėjus.

Kaip jie sujungti su programa?

importuoti {tiekėją} iš „react-redux“;

Importuokite teikėjo HOC (aukštesnės eilės komponentą), kuris įvynioja komponentą į index.js (ne viešajame aplanke), remdamasis parduotuvės rekvizitais. Tada kiekvieną komponentą sujungsite prisijungimo metodu, kuris užima 2 funkcijas: mapStateToProps ir mapDispatchToProps.

importuoti {prisijungti} iš 'react-redux';

Kas yra „mapStateToProps“ ir „mapDispatchToProps“?

eksportuoti numatytąjį prisijungimą (mapStateToProps, mapDispatchToProps) („App“);

Tai funkcija, kuri nusako parduotuvės būseną (mapStateToProps) ir objektą, kuris veiksmų kūrėjus nusako (mapDispatchToProps) prie komponento, apvynioto jungimo metodu, rekvizitų. Nereikia naudoti abiejų, tačiau jei naudojate tik „mapDispatchToProps“, pirmąjį parametrą nustatėte kaip nulį.

const mapStateToProps = state => {
   grąžinimo būsena;
}
const mapDispatchToProps = {
// Veiksmo kūrėjai
}

Kodėl verta mokytis „Redux“?

Jums to reikia, o jei planuojate mokytis kontekstinio API, jūs taip pat turėtumėte suprasti tam tikrą reduksą. Nes veikia panašiai. Kuriant didesnes programas ilgainiui tai yra paprastesnis sprendimas.

Norėdami gauti daugiau išteklių, eikite į mano todo-list pavyzdį, kuriame aš įgyvendinu redux.

Norėdami gauti daugiau pavyzdžių, skaitykite redux dokumentus.

Sekite paskui mane ant vidutinės