Ռեդյուսեր և action Redux-ում

Անցյալ դասին մենք ավարտեցինք արտադրանք ավելացնելու ձևը և ցուցադրեցինք այն գլխավոր էջում: Բայց առայժմ ավելացված տվյալները չեն պահպանվում, այլ կերպ ասած՝ նոր արտադրանքը չի ավելանում store-ում գոյություն ունեցողներին: Եկեք շտկենք դա:

Սկզբում մեր արտադրանքի հավելվածում մենք կբացենք productsSlice.jsx ֆայլը և կգրենք createSlice-ի reducer հատկության մեջ productAdded ֆունկցիան, որը կզբաղվի արտադրանքը store-ում ավելացնելով՝ հիմնվելով նրան փոխանցված ընթացիկ state-ի և action-ի վրա: Պետք է նշել, որ այստեղ մեզ փոխանցվում է ոչ ամբողջ state-ը, այլ միայն դրա այն մասը, որն պատասխանատու է արտադրանքի համար (products սլայսը գիտի միայն դրա մասին): Նոր արտադրանքով օբյեկտը կգտնվի action օբյեկտի payload հատկության մեջ, որը կգեներացվի ձևի պահպանման կոճակի կարգավորիչի կողմից: Արդյունքում productAdded ռեդյուսերը createSlice-ի կոդում կունենա հետևյալ տեսքը.

products/productsSlice.jsconst productsSlice = createSlice({
  name: 'products',
  initialState,
  reducers: {
    productAdded(state, action) {
      state.push(action.payload)
    },
  },
})

Իսկ ի՞նչ կա action-ի հետ: Ուսումնականի հենց սկզբում մենք նշեցինք, որ action-ը որոշակի իրադարձություն է, որը ներկայացված է որպես օբյեկտ, որը նկարագրում է այն, ինչ տեղի է ունեցել հավելվածում: Մենք նաև խոսեցինք այն մասին, որ կարելի է օգտագործել action creator ֆունկցիան, որը մեզ համար կստեղծի այդպիսի օբյեկտ, օրինակ այսպես.

jsxconst addProduct = newProduct => {
  return {
    type: 'products/productAdded',
    payload: newProduct
  }
}

Լավ լուրն այն է, որ մեզ պետք չէ ոչինչ անել, և դա մեր փոխարեն կանի createSlice ֆունկցիան, որը մենք օգտագործում ենք: Հենց մենք գրեցինք reducer-ը, այն ավտոմատ կստեղծի մեզ համար action creator նույն անունով: Մեզ միայն մնում է էքսպորտել ստացված action creator-ը հետագա օգտագործման համար կոմպոնենտներում: Եկեք դա անենք ֆայլի վերջում ռեդյուսերի էքսպորտից առաջ, ահա այսպես.

products/productsSlice.jsexport const { productAdded } = productsSlice.actions
export default productsSlice.reducer