Modyfikacja danych produktu w Redux store

Nauczyliśmy się dodawać produkty, a co jeśli będziemy chcieli zmienić informację o produkcie? Przyjrzyjmy się, jak to zrobić na tej i kolejnych lekcjach.

Otwórzmy naszą aplikację z produktami i przejdźmy do pliku productsSlice.js. Zacznijmy od tego, że dla slice'a products musimy napisać kolejny reducer, który będzie uruchamiany przy aktualizacji produktu. Nazwijmy go productUpdated i dodajmy w polu reducers po reducerze productAdded. Również przekażmy mu od razu parametrami state i action, na podstawie których, jak pamiętamy, działa reducer:

reducers: {
	productAdded(state, action) {
		state.push(action.payload)
	},
	productUpdated(state, action) {},
},

Teraz pomyślmy, jakie dane będą nam potrzebne do aktualizacji produktu. Przede wszystkim - to id, po nim będziemy mogli znaleźć interesujący nas produkt w store. Pozostałe dane - nazwa, opis, cena i ilość będą dla nas do zmiany. Wszystkie te wartości otrzymamy z właściwości payload obiektu action, który do nas przyjdzie, i gdybyśmy pisali go ręcznie, to wyglądałby on tak, jak pokazano poniżej. Zauważ, że oczekiwana wartość właściwości payload - to jeden argument, więc będziemy przekazywać tutaj obiekt (o tym porozmawiamy w dalszej części):

{
	type: 'products/productUpdated',
	payload: {id, name, desc, price, amount}
}

Wyjaśniwszy główne kwestie, teraz możemy napisać w nawiasach klamrowych kod dla productUpdated. Najpierw pobierzmy z obiektu action zmienione dane:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
},

Teraz znajdziemy po otrzymanym id produkt, który trzeba zmienić:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
},

Jeśli taki produkt został znaleziony w store, to zamienimy jego dane na nowe wartości:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
	if (desiredProduct) {
		desiredProduct.name = name
		desiredProduct.desc = desc
		desiredProduct.price = price
		desiredProduct.amount = amount
	}
},

Pozostaje nam tylko wyeksportować action creator do użycia w komponencie, który uprzejmie stworzy za nas createSlice. Dodajmy go do eksportu na końcu pliku, obok istniejącego productAdded:

export const { productAdded, productUpdated } = productsSlice.actions

Otwórz twoją aplikację ze studentami. Po zapoznaniu się z materiałem lekcji, w pliku studentsSlice.js dopisz kolejny reducer dla productsSlice, który będzie aktualizował dane studenta w store w przypadku ich zmiany przez użytkownika. Nazwij go studentUpdated.

A jak w tym przypadku wyglądałby twój obiekt action? Prześlij jego kod w odpowiedzi.

Na końcu pliku wyeksportuj otrzymany action creator studentUpdated.