Reduktor i action w Redux

Na poprzedniej lekcji zakończyliśmy formularz do dodawania produktu i wyświetliliśmy go na stronie głównej. Ale na razie dodane dane nie są zapisywane, innymi słowy nowy produkt nie jest dodawany do istniejących w store. Naprawmy to.

Na początek w naszej aplikacji z produktami otworzymy plik productsSlice.jsx i napiszemy w właściwości reducer dla createSlice funkcję productAdded, która będzie zajmować się dodawaniem produktu do store na podstawie przekazanych jej bieżącego stanu i akcji. Należy zaznaczyć, że przekazywany jest tu nie cały state, a tylko ta jego część, która odpowiada za produkty (slice products zna tylko ją). Obiekt z nowym produktem będzie znajdować się we właściwości payload obiektu action, który będzie generowany przez procedurę obsługi po naciśnięciu przycisku zapisywania w formularzu. W rezultacie reduktor productAdded będzie wyglądać w kodzie createSlice tak:

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

A co z action? Na samym początku podręcznika wspominaliśmy o tym, że action - to pewne zdarzenie, przedstawione w postaci obiektu, opisujące to, co wydarzyło się w aplikacji. Mówiliśmy też o tym, że można użyć funkcji action creator, która będzie nam tworzyć taki obiekt, na przykład tak:

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

Dobra wiadomość jest taka, że nie musimy nic robić, a zrobi to za nas funkcja createSlice, której używamy. Jak tylko napisaliśmy reducer, automatycznie stworzy ona za nas action creator o tej samej nazwie. Nam tylko pozostaje wyeksportować otrzymany action creator do dalszego użycia w komponentach. Zróbmy to na końcu pliku przed eksportem reduktora, w ten sposób:

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

Otwórz twoją aplikację ze studentami, a następnie plik studentsSlice.jsx, dopisz wartość pola reducer dla createSlice, jak pokazano na lekcji.

Dodaj na końcu pliku studentsSlice.jsx eksport otrzymanej funkcji action creator.