Redukseriai Redux

Ankstesnėje pamokoje mes naudodami funkciją createSlice sukūrėme produktų products skiltį ir redukserį, kuris atnaujins šią skiltį, saugomą store. Dar kartą primenu, kad Redux būsenos duomenys keičiami naudojant redukserius.

Reikia atsiminti, kad redukseriams taikoma keletas apribojimų. Redukseris atnaujina būseną tik remdamasis gautomis dabartinės būsenos reikšmėmis ir action objektu, o tada nusprendžia, kaip pakeisti būseną ir grąžina jos naują reikšmę.

Mes žinome, kad pagal nutylėjimą objektai ir masyvai JavaScript yra mutuojami (keičiami). Taip pat mes žinome, kad būsenos tiesiogiai keisti negalima, tokiu atveju reikia dirbti tik su kopijomis. Šiai taisyklei turi paklusti ir redukseris. Bet tokios logikos rašymas ranka gali būti gana varginantis ir sudėtingas užsiėmimas, ir čia į pagalbą ateina funkcija createSlice, kuri naudoja biblioteką Immer, konvertuojančią jūsų 'mutuojamą' kodą į 'nemutuojamą'. Taigi, nusidėti ir supaprastinti gyvenimą galima tik naudojant funkcijas createSlice arba createReducer.

Į redukserio apribojimų skaičių taip pat įeina asinhroninės logikos naudojimas, atsitiktinių reikšmių skaičiavimas ir kitų "šalutinių efektų" atlikimas. O dabar, susipažinę su redukseriu iš arčiau, grįžkime prie mūsų programėlės su produktais.

Mūsų programėlėje yra store, kurį sukūrėme ankstesnėse pamokose, bet kol kas jame nieko nėra. Atidarykime mūsų failą store.js ir pridėkime į jį šiek tiek kodo. Pirmiausia importuokime į jį funkciją redukserį produktams:

import productsReducer from '../parts/products/productsSlice'

Dabar kaip redukserį mes galime nurodyti importuotą funkciją productsReducer:

export default configureStore({
	reducer: {
		products: productsReducer
	}
})

Aukščiau nurodyta eilute mes pasakome savo store, kad dabar, kai iškyla action, visi duomenys skilčiai state.products bus atnaujinami redukseriu productsReducer.

Dabar galite paleisti programėlę (pastebėkite, kad konsolėje dingo įspėjimas apie negaliojantį redukserį!), atidaryti Redux DevTools naršyklėje ir pažvalgyti po jo skirtukus. Pavyzdžiui, spustelėję skirtuką State skirtuke Inspector mes galime matyti du mūsų objektus su produktais, kurie atsivaizdavo kaip pradinė būsenos reikšmė pirmą kartą paleidus programėlę. Skirtuke Log monitor mes matome, kokias skiltis turi savoje viduje globali būsena - tai skiltis products, įskaitanti du objektus. Taip pat pažiūrėkite į skirtuką Chart.

Atidarykite savo studentų programėlę ir pakeiskite failo store.js kodą, kaip parodyta pamokoje.

Paleiskite naršyklėje savo programėlę ir pažvalgykite po plėtinio Redux DevTools skirtukus.