Redux stāvokļa struktūras maiņa

Pirmā posma, ko mēs realizēsim mūsu Redux lietotnes mijiedarbībai ar kādu ārēju serveri, ir datu iegūšana, kas uz tā glabājas, palaižot lietotni. Bet vispirms ieviesīsim dažas izmaiņas mūsu lietotnē.

Atvērsim mūsu produktu lietotni, un tajā failu productsSlice.js. Pievērsiet uzmanību initialState definīcijai. Sākotnēji mūsu šķēle ar produktiem productsSlice ir masīvs, kurā atrodas objekti (mūsu gadījumā divi) ar produktu datiem. Pirmkārt, tā kā tagad mēs tos ielādēsim no servera, mums tie ir jānoņem no initialState. Otrkārt, mēs sūtīsim uz servera API pieprasījumus un mums būs svarīgi zināt to statusu. Ņemot vērā šīs divas lietas, mainīsim initialState. Ļaujiet tam tagad būt vienkāršam objektam ar laukiem products (sākotnēji šeit nebūs nekādu datu, bet tikai tukšs masīvs), status un error. Tagad mūsu kods priekš initialState kļūs mazliet īsāks:

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

Pagaidām mēs iestatījām statusu 'idle' (neaktivitāte), jo sākotnēji mēs nesūtām nekādus pieprasījumus, bet kopumā tas mainīsies un var pieņemt vērtības 'loading', 'succeeded', 'failed'. Atcerieties, ka statusa apzīmēšanai jūs varat izvēlēties tos nosaukumus, kas jums būs ērti.

Pārejam zemāk pa kodam. Pēc initialState izmaiņām mums jāmaina arī kods, kurā mēs strādājam ar šo stāvokli reduktoru funkcijās. Apskatīsim kodu priekš productAdded:

state.push(action.payload)

Tagad jaunos produktus mēs ievietosim ne vienkārši stāvoklī priekš produktiem, bet tā īpašībā state.products. Tāpēc aizstāsim iepriekš minēto rindu ar:

state.products.push(action.payload)

Attiecīgi veiksim tās pašas izmaiņas reduktoram reactionClicked. Tā vietā:

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

Tagad būs:

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

Paši aizstājiet state ar state.products un reduktora productUpdated kodā.

Atveriet savu studentu lietotni. Atveriet tajā failu studentsSlice.js. Ļaujiet tagad jūsu initialState būt ar trīs īpašībām: students, status, error - pārveidojiet to, kā parādīts nodarbībā.

Ieviesiet atbilstošās izmaiņas zemāk pa kodam. Aizstājiet state ar state.students kodā priekš jūsu trīs reduktoru funkcijām.