Dodavanje reducera u Redux aplikaciju

U prošloj lekciji smo napravili komponentu UserReaction kako bi svaki proizvod imao i reakcije korisnika. Sada nam je potrebno da napišemo reducer, koji će obrađivati brojač reakcija pri kliku korisnika na dugme za odgovarajuću reakciju.

Hajde da otvorimo našu aplikaciju sa proizvodima, a u njoj fajl productsSlice.js sa svim reducerima. Sada u svojstvu reducers kreiramo još jedan reducer reactionClicked (možemo ga staviti prvi - ispred productAdded, iako to nije bitno). Kao i obično, prosledimo mu parametrima state i action:

products/productsSlice.jsreactionClicked(state, action) {},

A sada unutar vitičastih zagrada, koje smo ostavili prazne na prethodnom koraku, napišimo za njega kod. Prvo ćemo izvući id proizvoda iz payload objekta action i naziv reakcije:

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

Zatim iz prosleđenog steita dobijemo potrebni proizvod:

products/productsSlice.jsconst currentProduct = state.find(product => product.id === productId)

I ako takav proizvod postoji, povećaćemo vrednost prosleđene reakcije za 1:

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

To je sve, naš kod za reactionClicked je spreman:

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

Hajde na kraju fajla da dodamo eksport dobijenog action creator-a:

products/productsSlice.jsxexport const {
  reactionClicked,
  productAdded,
  productUpdated
} = productsSlice.actions

Ovde je neophodno istaći dva važna momenta. Kako se sećate iz prethodnih lekcija - ažurirati ovako direktno vrednost u kodu reducera ne sme (pogledajte ovu liniju: reactions[reaction]++), ali nama će to proći jer to radimo unutar createSlice, koji koristi biblioteku Immer. Ona će se pobrinuti da preuredi naš kod u "bezbedno" ažuriranje vrednosti. Ovo nam omogućava da pišemo kompleksne stvari na jednostavniji način.

Sledeće, što je neophodno zapamtiti - objekat action treba da sadrži minimalno moguću količinu informacija - samo onoliko da bi se ukazalo na to šta se desilo. Ne treba u njemu raditi bilo kakve proračune. Svi proračuni za ažuriranje steita treba da se rade u reduceru, ovde možete napisati za to onoliko logike, koliko je potrebno.