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 менен алмаштырыңыз.