Reduceri Redux

Iepriekšējā nodarbībā mēs, izmantojot funkciju createSlice, izveidojām produktu slāni products un reduceri, kas atjauninās šo slāni, kas glabājas store. Vēlreiz atgādinu, ka Redux stāvokļa dati tiek mainīti ar reduceru palīdzību.

Jāatceras, ka uz reduceriem attiecas vairāki ierobežojumi. Reducers atjaunina stāvokli tikai, pamatojoties uz saņemtajām pašreizējā stāvokļa vērtībām un action objekta, pēc tam nolemj, kā mainīt stāvokli un atgriež tā jauno vērtību.

Mēs zinām, ka pēc noklusējuma objekti un masīvi JavaScript ir mutējami (maināmi). Tāpat mēs zinām, ka stāvokli nevar mainīt tieši, tādā gadījumā jāstrādā tikai ar kopijām. Šim noteikumam pakļaujas arī reducers. Bet šādas loģikas rakstīšana manuāli var būt diezgan nogurdinoša un sarežģīta, un šeit palīgā nāk funkcija createSlice, kas izmanto bibliotēku Immer, kas pārveido jūsu 'mutējamo' kodu par 'nemutējamu'. Tādējādi grēkot un vienkāršojot dzīvi ir atļauts tikai izmantojot funkcijas createSlice vai createReducer.

Reduceru ierobežojumos ietilpst arī asinhronas loģikas izmantošana, nejaušu vērtību aprēķināšana un citu "blakusefektu" izpilde. Un tagad, tuvāk iepazinušies ar reduceri, atgriezīsimies pie mūsu lietotnes ar produktiem.

Mūsu lietotnē ir store, ko mēs izveidojām iepriekšējās nodarbībās, bet pagaidām tajā nekas nav. Atvērsim mūsu failu store.js un pievienosim tajā mazliet koda. Sākumā importēsim tajā reducera funkciju produktiem:

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

Tagad kā reduceri mēs varam norādīt importēto funkciju productsReducer:

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

Iepriekš minētā rindiņā mēs informējam mūsu store, ka tagad, kad rodas action, visi dati slīdim state.products tiks atjaunināti ar reduceri productsReducer.

Tagad jūs varat palaist lietotni (ievērojiet, ka konsolē pazuda brīdinājums par nederīgu reduceri!), atvērt Redux DevTools pārlūkprogrammā un pārlūkot tā cilnes. Piemēram, noklikšķinot uz cilnes State cilnē Inspector mēs varam redzēt mūsu divus produktu objektus, kuri tika izvadīti kā sākotnējā stāvokļa vērtība pirmajā lietotnes palaišanas reizē. Cilnē Log monitor mēs redzam, kādus slāņus glabā globālajā stāvoklī - tas ir slānis products, iekļaujot divus objektus. Apskatiet arī cilni Chart.

Atveriet savu lietotni ar studentiem un mainiet koda failu store.js, kā parādīts nodarbībā.

Palaidiet pārlūkprogrammā savu lietotni un pārlūkojiet pa Redux DevTools paplašinājuma cilnēm.