Dodawanie reduktora do aplikacji Redux

W poprzedniej lekcji stworzyliśmy komponent UserReaction, aby każdy produkt miał również reakcje użytkowników. Teraz musimy napisać reduktor, który będzie obsługiwał licznik reakcji po kliknięciu przez użytkownika przycisku danej reakcji.

Otwórzmy naszą aplikację z produktami, a w niej plik productsSlice.js ze wszystkimi reduktorami. Teraz we właściwości reducers stworzymy kolejny reduktor reactionClicked (możemy umieścić go pierwszym - przed productAdded, chociaż to nie ma znaczenia). Jak zwykle, przekażmy mu parametrami state i action:

reactionClicked(state, action) {},

A teraz wewnątrz nawiasów klamrowych, które pozostawiliśmy pustych w poprzednim kroku, napiszmy dla niego kod. Po pierwsze wyodrębnijmy id produktu z payload obiektu action i nazwę reakcji:

const { productId, reaction } = action.payload

Następnie z przekazanego stanu pobierzmy potrzebny produkt:

const currentProduct = state.find(product => product.id === productId)

I jeśli taki produkt istnieje, to zwiększmy wartość przekazanej reakcji o 1:

if (currentProduct) {
	currentProduct.reactions[reaction]++
}

To wszystko, nasz kod dla reactionClicked jest gotowy:

reactionClicked(state, action) {
	const { productId, reaction } = action.payload
	const currentProduct = state.find(product => product.id === productId)
	if (currentProduct) {
		currentProduct.reactions[reaction]++
	}
},

Na końcu pliku dodajmy eksport otrzymanego kreatora akcji:

export const {
	reactionClicked,
	productAdded,
	productUpdated
} = productsSlice.actions

Tu należy zaznaczyć dwie ważne kwestie. Jak pamiętasz z poprzednich lekcji - aktualizować w ten sposób bezpośrednio wartość w kodzie reduktora nie wolno (spójrz na tę linię: reactions[reaction]++), ale nam to ujdzie na sucho, ponieważ robimy to wewnątrz createSlice, który używa biblioteki Immer. Ona zadba o to, aby przekształcić nasz kod w "bezpieczną" aktualizację wartości. To pozwala nam pisać skomplikowane rzeczy w prostszy sposób.

Następna rzecz, o której należy pamiętać - obiekt action powinien zawierać minimalną możliwą ilość informacji - tylko tyle, aby wskazać, co się wydarzyło. Nie należy w nim wykonywać żadnych obliczeń. Wszystkie obliczenia dla aktualizacji stanu należy robić w reduktorze, tutaj można w tym celu napisać tyle logiki, ile będzie potrzebne.

Otwórz twoją aplikację ze studentami i w pliku studentsSlice.js dodaj kolejny reduktor voteClicked w polu reducers, jak pokazano w lekcji. Napisz kod dla niego. Zadaniem twojego reduktora - po kliknięciu zwiększać wartość vote (lub głosu), na który kliknięto, dla danego studenta, o 1.

Na końcu pliku nie zapomnij wyeksportować otrzymanego kreatora akcji voteClicked.