Promena strukture stanja u Redux-u

Prva faza, koju ćemo realizovati za interakciju naše Redux aplikacije sa nekim spoljnim serverom - je dobijanje podataka koji se na njemu čuvaju pri pokretanju aplikacije. Ali pre toga, hajde da unesemo u našu aplikaciju neke promene.

Otvorimo našu aplikaciju sa proizvodima, a u njoj fajl productsSlice.js. Obratite pažnju na definiciju initialState. Inicijalno naš slajs sa proizvodima productsSlice - je niz, u kojem se nalaze objekti (u našem slučaju ih je dva) sa podacima proizvoda. Prvo, pošto ćemo sada ih učitavati sa servera, treba da ih uklonimo iz initialState. Drugo, slaćemo na server API zahteve i biće nam važno znati o njihovom statusu. Imajući u vidu ove dve stvari, hajde da prepravimo initialState. Neka sada to bude jednostavan objekat sa poljima products (inicijalno ovde neće biti podataka, već samo prazan niz), status i error. Sada će naš kod za initialState postati malo kraći:

const initialState = {
	products: [],
	status: 'idle',
	error: null,
}

Za sada smo postavili status 'idle' (mirovanje), pošto inicijalno ne šaljemo nikakve zahteve, a uopšteno on će se menjati i može primatati vrednosti 'loading', 'succeeded', 'failed'. Zapamtite da za označavanje statusa možete izabrati ona imena koja će vam biti pogodna.

Spuštamo se niže po kodu. Nakon promene initialState, treba da promenimo i kod, u kojem radimo sa tim stanjem u funkcijama-reducerima. Pogledajmo kod za productAdded:

state.push(action.payload)

Sada ćemo nove proizvode skladištiti ne samo u state za proizvode, već u njegovo svojstvo state.products. Stoga, zamenimo gorenavedeni red sa:

state.products.push(action.payload)

Shodno tome, uradimo iste promene i za reducer reactionClicked. Umesto:

const currentProduct = state.find((product) => product.id === productId)

Sada će biti:

const currentProduct = state.products.find((product) => product.id === productId)

Zamenite sami state sa state.products i u kodu reducgera productUpdated.

Otvorite vašu aplikaciju sa studentima. Otvorite u njoj fajl studentsSlice.js. Neka sada vaš initialState ima tri svojstva: students, status, error - prepravite ga, kao što je prikazano na času.

Unesite odgovarajuće promene i niže po kodu. Zamenite state sa state.students u kodu za vaše tri funkcije-reducere.