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