Reducer a action v Reduxe

Na minulej lekcii sme dokončili formulár pre pridanie produktu a zobrazili ho na hlavnej stránke. Ale zatiaľ pridané dáta sa neukladajú, inými slovami nový produkt sa nepridáva k existujúcim v store. Poďme to napraviť.

Na začiatok v našej aplikácii s produktmi otvoríme súbor productsSlice.jsx a napíšeme do vlastnosti reducer pre createSlice funkciu productAdded, ktorá sa bude zaoberať pridávaním produktu do store na základe odovzdaného jej aktuálneho stavu a action. Treba poznamenať, že tu sa nám odovzdáva nie celý state, ale iba tá jeho časť, ktorá zodpovedá za produkty (slice products pozná iba ju). Objekt s novým produktom bude nachádzať sa vo vlastnosti payload objektu action, ktorý bude generovaný obslužným programom pri kliknutí na tlačidlo uloženia vo formulári. Výsledkom reducer productAdded bude vyzerať v kóde createSlice takto:

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

A čo action? Na samom začiatku učebnice sme spomenuli, že action - je nejaká udalosť, reprezentovaná ako objekt, opisujúca to, čo sa stalo v aplikácii. Hovorili sme aj o tom, že je možné použiť funkciu action creator, ktorá nám bude vytvárať taký objekt, napríklad takto:

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

Dobrá správa je, že nemusíme nič robiť, a to za nás urobí funkcia createSlice, ktorú používame. Akonáhle sme napísali reducer, automaticky za nás vytvorí action creator s rovnakým menom. Nám iba ostáva exportovať získaný action creator pre ďalšie použitie v komponentoch. Urobme to na konci súboru pred exportom reducera, takto:

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

Otvorte vašu aplikáciu so študentmi, a potom súbor studentsSlice.jsx, dopíšte hodnotu poľa reducer pre createSlice, ako je ukázané na lekcii.

Pridajte na koniec súboru studentsSlice.jsx export získanej funkcie action creator.