Տվյալների պատրաստում action օբյեկտի համար Redux-ում

Վերջերս մենք ձեզ հետ խոսեցինք այն մասին, որ createSlice ֆունկցիան ակնկալում է մեկ արգումենտ action.payload ստեղծելիս: Մի կողմից դա պարզեցնում է դրա օգտագործումը, մյուս կողմից կարող է լրացուցիչ քայլեր պահանջել action օբյեկտի պարունակությունը պատրաստելու համար:

Եկեք բացենք մեր ապրանքների հավելվածը, և դրա մեջ NewProductForm.jsx ֆայլը: Ուշադրություն դարձրեք կոդի հետևյալ տողին.

NewProductForm.jsxdispatch(productAdded({
  id: nanoid(), name, desc, price, amount
}))

Այստեղ մենք հավաքում ենք payload օբյեկտը անմիջապես React կոմպոնենտում և փոխանցում այն productAdded action-ին: Իսկ եթե մեզ անհրաժեշտ լինի նմանատիպ action ուղարկել մի քանի կոմպոնենտներից կամ տրամաբանությունը պատրաստելու համար բարդ լինի: Սկզբունքորեն, մեր կոմպոնենտին պետք չէ իմանալ, թե ինչպիսին է payload-ի օբյեկտը տվյալ action-ի համար: Բացի այդ, մեզ չի բավարարում կոդի մշտական կրկնօրինակումը:

Այս խնդիրները մեզ կրկին կարող է օգնել լուծել մեր հայտնի createSlice-ը, քանի որ reducer գրելու դեպքում այն թույլ է տալիս մեզ օգտագործել prepare callback-ֆունկցիան, որում կարելի է գրել տարբեր տրամաբանություն, գեներացնել պատահական թվեր և այլն: Նման դեպքում reducer-ի դաշտի արժեքը կարող է ներկայացվել հետևյալ օբյեկտի տեսքով.

jsx{reducer, prepare}

Եկեք բացենք մեր productsSlice.js ֆայլը և փոխենք կոդը productAdded reducer-ի համար: Այժմ կոդի այս հատվածը.

products/ProductSlice.jsproductAdded(state, action) {
  state.push(action.payload)
},

Մենք կփոխարինենք հետևյալով, որում reducer ֆունկցիան կզբաղվի store-ում state-ը թարմացնելով, իսկ prepare-ը՝ վերադարձնելու է payload օբյեկտը գեներացված id-ով և մեր մյուս տվյալներով.

products/ProductSlice.jsproductAdded: {
  reducer(state, action) {
    state.push(action.payload)
  },
  prepare(name, desc, price, amount) {
    return {
      payload: {
        id: nanoid(),
        name,
        desc,
        price,
        amount,
      },
    }
  },
},

Քանի որ այժմ մենք id-ն կգեներացնենք այստեղ, և ոչ թե կոմպոնենտում, եկեք ավելացնենք nanoid-ը իմպորտում.

products/ProductSlice.jsimport { createSlice, nanoid } from '@reduxjs/toolkit'

Վերջում փոխենք NewProductForm.jsx-ը: Փոխարենը.

products/NewProductForm.jsxdispatch(productAdded({
  id: nanoid(), name, desc, price, amount
}))

Մենք կունենանք այնպիսին, որում մենք պարզապես ստորակետերով կփոխանցենք մեզ անհրաժեշտ տվյալները (մի մոռացեք այս ֆայլում հեռացնել nanoid-ը իմպորտից).

products/NewProductForm.jsxdispatch(productAdded(name, desc, price, amount))

Եկեք գործարկենք հավելվածը, ապա ստեղծենք նոր ապրանք և համոզվենք, որ ոչինչ չենք կոտրել: