Redux store-ում արտադրանքի տվյալների փոփոխում

Մենք սովորեցինք ավելացնել արտադրանքը, բայց ինչ եթե ցանկանանք փոխել տեղեկատվությունը արտադրանքի մասին: Եկեք դիտարկենք, թե ինչպես դա անել այս և հաջորդ դասերին:

Բացենք մեր արտադրանքի հավելվածը և մտնենք productsSlice.js ֆայլը: Սկսենք այն բանից, որ մեզ անհրաժեշտ է products սլայսի համար գրել ևս մեկ reducer, որը կգործարկվի արտադրանքի թարմացման ժամանակ: Անվանենք այն productUpdated և ավելացնենք դաշտում reducers՝ productAdded reducer-ից հետո: Նաև անմիջապես փոխանցենք դրան պարամետրերով state և action, որոնց հիման վրա, ինչպես հիշում ենք, աշխատում է reducer-ը:

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

Հիմա եկեք մտածենք, թե ինչ տվյալներ են մեզ անհրաժեշտ արտադրանքը թարմացնելու համար: Նախ և առաջ - դա id-ն է, դրա միջոցով մենք կկարողանանք գտնել մեզ հետաքրքրող արտադրանքը store-ում: Մնացած տվյալները - անվանումը, նկարագրությունը, գինը և քանակը կլինեն մեզ համար փոփոխման համար: Այս բոլոր արժեքները մենք կստանանք action օբյեկտի payload հատկությունից, որը կգա մեզ մոտ, և, եթե մենք գրեինք այն ձեռքով, ապա այն կունենա այնպիսի տեսք, ինչպես ցույց է տրված ստորև: Նկատեք, որ սպասվող արժեքը payload հատկության - մեկ արգումենտ է, այնպես որ մենք այստեղ կփոխանցենք օբյեկտ (այս մասին մենք կխոսենք հետագայում):

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

Պարզաբանելով հիմնական կետերը, այժմ մենք կարող ենք գրել ֆիգուրային փակագծերում կոդ productUpdated-ի համար: Նախ ստացենք action օբյեկտից փոփոխված տվյալները:

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

Այժմ մենք կգտնենք ստացված id-ի հիման վրա այն արտադրանքը, որը պետք է փոխել:

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

Եթե այդպիսի արտադրանք գտնվեց store-ում, ապա մենք կփոխարինենք դրա տվյալները նոր արժեքներով:

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
  }
},

Մեզ մնում է միայն էքսպորտել action creator-ը՝ օգտագործելու համար կոմպոնենտում, որը սիրալիր կստեղծի մեզ համար createSlice-ը: Եկեք ավելացնենք այն ֆայլի վերջում գտնվող էքսպորտին, գոյություն ունեցող productAdded-ի կողքին:

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