Kubadilisha Data ya Bidhaa katika Redux Store

Tumejifunza kuongeza bidhaa, lakini vipi kama tutataka kubadilisha taarifa kuhusu bidhaa? Hebu tuchunguze jinsi ya kufanya hivyo katika somo hili na masomo yajayo.

Washa programu yetu ya bidhaa na uingie kwenye faili productsSlice.js. Tuanzie kwa kile tunachohitaji kwa kipande products kuandika reducer nyingine, ambayo itaanza wakati wa kusasisha bidhaa. Tuite productUpdated na tuiongeze kwenye uga reducers baada ya reducer productAdded. Pia tupitie mara moja vigezo state na action, kwa misingi ambayo, kama tunavyokumbuka, reducer inafanya kazi:

products/productsSlice.jsreducers: {
  productAdded(state, action) {
    state.push(action.payload)
  },
  productUpdated(state, action) {},
},

Sasa hebu tufikirie, ni data gani tutahitaji kwa ajili ya kusasisha bidhaa. Kabla ya yote - hii ni id, kwa hiyo tutaweza kupata bidhaa tunayopenda kwenye store. Data zingine - jina, maelezo, bei na kiasi zitakuwa kwetu kwa mabadiliko. Thamani hizi zote tutazipata kutoka kwa sifa payload ya kitu action, ambayo itatufikia, na, kama tungelikuwa tunaandika kwa mikono, basi ingeonekana kama inavyoonyeshwa hapa chini. Kumbuka kuwa thamani inayotarajiwa ya sifa payload - hoja moja, kwa hivyo tutakuwa tukipita hapa kitu (kuhusu hili tutazungumza zaidi baadaye):

jsx{
  type: 'products/productUpdated',
  payload: {id, name, desc, price, amount}
}

Baada ya kufafanua mambo makuu, sasa tunaweza kuandika kwenye mabano ya curly msimbo wa productUpdated. Kwanza tupate kutoka kwa kitu action data iliyobadilishwa:

products/productsSlice.jsproductUpdated(state, action) {
  const { id, name, desc, price, amount } = action.payload
},

Sasa tutapata kwa id iliyopatikana bidhaa, ambayo inahitaji kubadilishwa:

products/productsSlice.jsproductUpdated(state, action) {
  const { id, name, desc, price, amount } = action.payload
  const desiredProduct = state.find(product => product.id === id)
},

Ikiwa bidhaa kama hiyo ilipatikana kwenye store, basi tutabadilisha data yake kwa maadili mapya:

products/productsSlice.jsproductUpdated(state, action) {
  const { id, name, desc, price, amount } = action.payload
  const desiredProduct = state.find(product => product.id === id)
  if (desiredProduct) {
    desiredProduct.name = name
    desiredProduct.desc = desc
    desiredProduct.price = price
    desiredProduct.amount = amount
  }
},

Inatubaki tu kuhamasisha mtengenezaji wa action kwa matumizi katika sehemu, ambayo kwa ukarimu createSlice itatuundia. Wacha tuiongeze kwenye usafirishaji mwishoni mwa faili, pamoja na productAdded uliopo:

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