Reducer hozzáadása a Redux alkalmazáshoz

Az előző leckében létrehoztuk a UserReaction komponenst azért, hogy minden termékhez tartozzanak felhasználói reakciók. Most meg kell írnunk egy reducert, amely kezelni fogja a reakciók számlálóját, amikor a felhasználó rákattint egy adott reakció gombjára.

Nyissuk meg a termékalkalmazásunkat, és benne a productsSlice.js fájlt az összes reducerrel. Most a reducers tulajdonságon belül hozzunk létre egy újabb reducert reactionClicked (tehetjük az első helyre - a productAdded elé, bár ez mindegy). Szokás szerint adjuk át neki paraméterként a state és action paramétereket:

reactionClicked(state, action) {},

Most pedig az üresen hagytak kapcsos zárójelek között, írjuk meg a hozzá tartozó kódot. Először is kinyerjük a termék azonosítóját a action objektum payload mezőjéből és a reakció nevét:

const { productId, reaction } = action.payload

Majd az átadott állapotból megkeressük a kívánt terméket:

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

És ha létezik ilyen termék, akkor növeljük az átadott reakció értékét 1-gyel:

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

Ennyi, a reactionClicked kódja kész:

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

Végül a fájl végén exportáljuk a kapott action creatort:

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

Itt két fontos dolgot kell megjegyezni. Ahogy az előző leckékből emlékezhettek - közvetlenül így frissíteni az értéket a reducer kódjában tilos (nézzétek ezt a sort: reactions[reaction]++), de most megússzuk, mert ezt a createSlice-en belül csináljuk, amely a Immer könyvtárat használja. Az pedig gondoskodik róla, hogy a kódunkat "biztonságos" értékfrissítéssé alakítsa. Ez lehetővé teszi számunkra, hogy bonyolult dolgokat egyszerűbben írhassunk meg.

A következő dolog, amit észben kell tartani - az action objektumnak a minimális lehetséges mennyiségű információt kell tartalmaznia - csak annyit, hogy jelezze, mi történt. Ne végezzünk benne számításokat. Minden, az állapot frissítéséhez szükséges számítást a reducerben kell elvégezni, itt annyi logikát írhatunk ehhez, amennyire csak szükség van.

Nyisd meg a diákokról szóló alkalmazásodat és a studentsSlice.js fájlban add hoozzá a voteClicked nevű reducert a reducers mezőhöz, ahogyan a leckében is láttad. Írd meg a hozzá tartozó kódot. A reducered feladata - egy kattintásra megnövelni a vote (vagyis a szavazat) értékét, amire kattintottak, az adott diák esetében, 1-gyel.

A fájl végén ne felejtsd el exportálni a kapott voteClicked action creatort.