Reduktor a akce v Redux

V minulé lekci jsme dokončili formulář pro přidání produktu a zobrazili jsme jej na hlavní stránce. Ale zatím se přidaná data neukládají, jinými slovy nový produkt se nepřidává k existujícím v store. Pojďme to napravit.

Pro začátek v naší aplikaci s produkty otevřeme soubor productsSlice.jsx a napíšeme do vlastnosti reducer pro createSlice funkci productAdded, která se bude zabývat přidáním produktu do store na základě jí předaného aktuálního stavu a akce. Je třeba poznamenat, že se nám zde nepředává celý state, ale pouze ta jeho část, která odpovídá za produkty (slice products zná pouze o ní). Objekt s novým produktem bude nacházet ve vlastnosti payload objektu action, který bude generován obslužnou rutinou při stisknutí tlačítka uložení ve formuláři. Výsledný reduktor productAdded bude vypadat v kódu createSlice takto:

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

A co akce? Na samém začátku učebnice jsme zmiňovali, že akce je určitá událost, reprezentovaná jako objekt, popisující to, co se stalo v aplikaci. Mluvili jsme i o tom, že lze použít funkci action creator, která nám bude vytvářet takový objekt, například takto:

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

Dobrá zpráva je, že my nemusíme nic dělat, a to za nás udělá funkce createSlice, kterou používáme. Jakmile jsme napsali reduktor, automaticky za nás vytvoří action creator se stejným jménem. Nám jen zbývá exportovat získaný action creator pro další použití v komponentách. Udělejme to na konci souboru před exportem reduktoru, takto:

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

Otevřete vaši aplikaci se studenty, a poté soubor studentsSlice.jsx, doplňte hodnotu pole reducer pro createSlice, jak je ukázáno v lekci.

Přidejte na konec souboru studentsSlice.jsx export získané funkce action creator.