Редуктор и action во Redux

На претходната лекција ја завршивме формата за додавање на производ и ја прикажавме на главната страница. Но, засега додадените податоци не се зачувуваат, со други зборови новиот производ не се додава кон постоечките во store. Ајде да го исправиме ова.

За почеток во нашата апликација со производи ќе ја отвориме датотеката productsSlice.jsx и ќе напишеме во својството reducer за createSlice функција productAdded, која ќе се занимава со додавање на производот во store врз основа на пренесените тековна состојба и action. Треба да се напомене дека овде ни се пренесува не целата state, туку само оној дел кој одговара за производите (слајсот products знае само за неа). Објектот со новиот производ ќе се наоѓа во својството payload на објектот action, кој ќе се генерира од обработувачот при кликнување на копчето за зачувување во формата. Како резултат, редукторот productAdded ќе изгледа во кодот createSlice вака:

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {
		productAdded(state, action) {
			state.push(action.payload)
		},
	},
})

А што е со action? На самиот почеток на учебникот споменавме дека action - е некој настан, претставен во форма на објект, кој го опишува она што се случило во апликацијата. Зборувавме и за тоа дека може да се користи функција action creator, која ќе ни креира таков објект, на пример вака:

const addProduct = newProduct => {
	return {
		type: 'products/productAdded',
		payload: newProduct
	}
}

Добрата вест е што не треба ништо да правиме, бидејќи ова ќе го направи за нас функцијата createSlice, која ја користиме. Откако напишавме reducer, таа автоматски ќе креира за нас action creator со истото име. Нам само ни останува да го експортираме добиениот action creator за понатамошна употреба во компонентите. Да го направиме ова на крајот од датотеката пред експортот на редукторот, вака:

export const { productAdded } = productsSlice.actions
export default productsSlice.reducer

Отворете ја вашата апликација со студенти, а потоа датотеката studentsSlice.jsx, допишете вредноста на полето reducer за createSlice, како што е прикажано во лекцијата.

Додадете на крајот од датотеката studentsSlice.jsx експорт на добиената функција action creator.