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