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-ке ауыстырыңыз.