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:

products/productsSlice.jsreactionClicked(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:

products/productsSlice.jsconst { productId, reaction } = action.payload

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

products/productsSlice.jsconst 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:

products/productsSlice.jsif (currentProduct) {
  currentProduct.reactions[reaction]++
}

Ennyi, a reactionClicked kódja kész:

products/productsSlice.jsreactionClicked(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:

products/productsSlice.jsxexport 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.