Редјусер и акција у Redux-у

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

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

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

А шта је са акцијом? На самом почетку уџбеника споменули смо да је акција неки догађај, представљен у виду објекта, који описује оно што се десило у апликацији. Говорили смо и о томе да можемо користити функцију креатор акције која ће нам креирати такав објекат, на пример овако:

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

Добра вест је да нам не треба ништа радити, а то ће за нас урадити функција createSlice, коју користимо. Чим напишемо reducer, она ће аутоматски креирати за нас креатор акције са истим именом. Нама само преостаје да извеземо добијени креатор акције за даљу употребу у компонентама. Урадимо то на крају фајла пре извоза редуцера, овако:

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

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

Додајте на крај фајла studentsSlice.jsx извоз добијене функције креатор акције.