Redux aplikasiýanyňyzda reducer goşmak

Öňki sapakda her bir önüm üçin ulanyjy reaksiýalary bolmagy üçin UserReaction komponentini döretdik. Indi biz ulanyjyň haýsy bir düwmä basanynda reaksiýa sanagyny işleýän reducer ýazmaly.

Geliň, önümlerimiz bilen aplikasiýamyzy açalyň, we onuň içindäki ähli reducerleri saklaýan productsSlice.js faýlyny açalyň. Indi reducers aýratynlygynda ýene bir reducer reactionClicked dörediň (ony birinjide goýup bileris - productAdded-den öň, ýöne bu tapawudy ýok). Adaty ýaly, ona state we action parametrlerini beriň:

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

Indi bolsa öňki ädimde boş goýan gygyrwuly äýjegimiziň içinde onuň üçin kody ýazalyň. Birinjiden, biz action objektiň payload böleginden önümiň id-sini we reaksiýanyň adyny aýryp alarys:

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

Soňra berilen state-den zerur önümi alyp alarys:

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

Eger şeýle önüm bar bolsa, berlen reaksiýanyň bahasyny 1 artdyrarys:

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

Bolýar, bizim reactionClicked üçin kod taýýar:

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

Geliň faýlyň ahyrynda alnan action creator-i eksport edeliň:

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

Bu ýerde iki möhüm nokady belläp geçmeli. Öňki sapaklardan ýadyňyzda bolşy ýaly - reducer kodunda bahany şeýle beýleki goýberip täzelen driw etmek bolmaýar (şu setire serediň: reactions[reaction]++), ýöne biz munuň üstünden ýöreris, sebäbi biz muny Immer kitaphanasyny ulanýan createSlice içinde edýäris. Ol bizim kodymyzy bahany "howpsuz" täzelemäge öwürmegi üpjün eder. Bu çylşyrymly zatlary has ýönekeý usulda ýazmagymyza mümkinçilik berýär.

Ýatda saklamaly indiki zat - action objekti iň pes mümkin bolan maglumaty öz içine almaly - diňe nämäniň boldygyny görkezmek üçin gerek bolan. Onda haýsydyr bir hasaplamalary etmek ýaramaz. State-i täzelemek üçin ähli hasaplamalar reducerde edilmeli, buna üçin bu ýerde nähili logika gerek bolsa şonça ýazyp bilersiňiz.