Рэдьюсер і action у Redux

На мінулым уроке мы скончылі форму для дадання прадукту і вывялі яе на галоўнай старонцы. Але пакуль дададзеныя даныя не захоўваюцца, іншымі словамі новы прадукт не дадаецца да існуючых у store. Давайце гэта выправім.

Для пачатку ў нашым дадатку з прадуктамі мы адкрыем файл productsSlice.jsx і напішам у ўласцівасці reducer для createSlice функцыю productAdded, якая будзе займацца даданнем прадукту ў store на аснове перададзеных ёй бягучага стэйту і экшна. Трэба адзначыць, што тут нам перадаецца не ўвесь 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.