Променад структуре стања у 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 у коду за ваше три функције-редуцера.