Иваз кардани сохтори ҳолат дар Redux

Марҳилаи аввал, ки мо барои муомилаи барномаи Redux-амон бо як сервери берунаӣ амалӣ мекунем - ин гирифтани маълумотҳоест, ки дар он нигоҳ дошта мешаванд вақте ки барнома оғоз мешавад. Аммо пеш аз он биёед ба барномаи мо баъзе тағиротҳо ворид кунем.

Барномаи мо бо маҳсулотро кушед, ва дар он файли productsSlice.js-ро боз кунед. Ба таърифи initialState диққат диҳед. Дар аввал слайси мо бо маҳсулотҳо productsSlice - ин массивест, ки дар он объектҳо (дар ҳолати мо онҳо дутоанд) бо маълумоти маҳсулотҳо мавҷуданд. Аввалан, аз он сабаб, ки ҳоло мо онҳоро аз сервер бор мекунем, пас мо бояд онҳоро аз initialState берун кунем. Дуюм, мо ба сервер дархостҳои API мефиристем ва барои мо донистани вазъияти онҳо муҳим аст. Ин ду чизиро ба назар гирифта, биёед initialState-ро таҳрир кунем. Бигзор ҳоло ин танҳо объекте бо майдонҳои products (дар аввал дар ин ҷо ягон маълумот нахоҳад буд, а танҳо массиви холӣ), status ва error бошад. Ҳоло рамзи мо барои initialState хоҳад шуд каме кӯтоҳтар:

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

То ҳол мо вазъиятро 'idle' (беамалӣ) гузоштем, зеро аввалан мо ягон дархост намефиристем, ва аслан он тағир меёбад ва метавонад қиматҳои 'боркунӣ', 'анҷомёфта', 'хатои боркунӣ'-ро қабул кунад. Дар хотир доред, ки барои ишора ба вазъият шумо метавонед он номҳоро интихоб кунед, ки барои шумо мувофиқ бошанд.

Ба поин дар ҳуҷҷат ҳаракат мекунем. Баъд аз тағйироти initialState, бояд рамзеро низ иваз кунем, ки дар он мо бо ин ҳолат дар функсияҳо-редюсерҳо кор мекунем. Ба рамз барои productAdded нигаред:

state.push(action.payload)

Ҳоло маҳсулоти навро мо мегузорем на танҳо ба state барои маҳсулот, балки ба хосияти state.products-и он. Аз ин рӯ, сатри дар боло овардашударо бо ин иваз кунем:

state.products.push(action.payload)

Мувофиқан, ҳамин тағиротҳоро барои редюсери reactionClicked анҷом диҳед. Ба ҷои:

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

Ҳоло ин хоҳад буд:

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

Худатон state-ро ба state.products дар рамзи редюсери productUpdated иваз кунед.

Барномаи худро бо донишҷӯён боз кунед. Дар он файли studentsSlice.js-ро боз кунед. Бигзор ҳоло initialState-и шумо се хосият дошта бошад: students, status, error - онро тавре ки дар дарс нишон дода шуд, таҳрир кунед.

Тағиротҳои мувофиқро низ ворид кунед ва ба поин дар рамз. state-ро ба state.students дар рамз барои се функсияҳо-редюсери худ иваз кунед.