Redukserid Reduxis

Eelmisel tunnil loome funktsiooni createSlice abil toodete jaoks products lõigu ja redukseri, mis uuendab seda poes hoitavat lõiku. Tuletan veelkord meelde, et Reduxis muudetakse oleku andmeid redukserite abil.

Tuleb meeles pidada, et redukseritele kehtivad mitu piirangut. Redukser uuendab olekut ainult saadud praeguse oleku väärtuste ja action objekti põhjal ning seejärel otsustab, kuidas olekut muuta ja tagastab selle uue väärtuse.

Me teame, et vaikimisi on objektid ja massiivid JavaScriptis muteeritavad (muudetavad). Samuti teame me, et olekut otse muuta ei tohi, sellisel juhul tuleb töötada ainult koopiatega. Redukser peab alluma sellele reeglile. Kuid sellise loogika käsitsi kirjutamine võib olla üsna tüütu ja keeruline tegevus, ning siin tuleb appi funktsioon createSlice, mis kasutab teeki Immer, muutes teie 'muteeritava' koodi 'mitte-muteeritavaks'. Seega, võib eksida ja elu lihtsustada ainult funktsioone createSlice või createReducer kasutades.

Redukseri piirangute hulka kuulub ka asünkroonse loogika kasutamine, juhuslike väärtuste arvutamine ja muud "kõrvalefektid". Nüüd aga, pärast redukseriga lähedasemat tutvumist, pöördume tagasi oma toodete rakenduse juurde.

Meie rakenduses on store, mille loome eelmistel tundidel, kuid seni pole selles midagi. Avame oma faili store.js ja lisame sinna natuke koodi. Alustuseks importime sinna redukseri funktsiooni toodete jaoks:

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

Nüüd saame redukserina määrata imporditud funktsiooni productsReducer:

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

Ülaltoodud reaga ütleme oma store'ile, et nüüd, kui tekib action, uuendatakse kõik lõigu state.products andmed redukseri productsReducer poolt.

Nüüd saate rakenduse käivitada (pange tähele, et konsoolis kadunud hoiatus ebaõigest redukserist!), avada brauseris Redux DevTools ja selle vahelehti uurida. Näiteks, klõpsates vahelehel State vahelehel Inspector näeme oma kahte tooteobjekti, mis kuvati oleku algväärtusena rakenduse esmakordsel käivitamisel. Vahelehel Log monitor näeme, milliseid lõike globaalne olek sisaldab - see on lõige products, mis sisaldab kahte objekti. Vaadake ka vahelehte Chart.

Avage oma õpilaste rakendus ja muutke faili store.js koodi nagu tunnis näidatud.

Käivitage brauseris oma rakendus ja uurige Redux DevTools laienduse vahelehti.