Եվրոպական միության մեջ Redux-ին ևս մեկ slice-ի ավելացում

Նախորդ դասերին մենք ինտենսիվ աշխատանք ենք տարել products ապրանքների slice-ի վրա: Իրական Redux հավելվածում state-ում կարող են լինել բազմաթիվ slice-ներ տարբեր նպատակների համար: Այդ իսկ պատճառով այս դասում մենք կավելացնենք state-ին ևս մեկ slice վաճառողների համար, որոնք փաստացի կլինեն նրանք, ովքեր կավելացնեն ապրանքները մեր հավելվածում:

Բացենք մեր ապրանքներով հավելվածը և առաջինը, ինչ կանենք, դա parts պանակում կստեղծենք ևս մեկ պանակ sellers, այստեղ մենք կտեղադրենք ամբողջ կոդը և կոմպոնենտները, որոնք վերաբերում են վաճառողներին:

Այժմ, ինչպես ապրանքների դեպքում, եկեք ստեղծենք slice վաճառողների համար: Սկզբից sellers պանակում ստեղծենք sellersSlice.js ֆայլը և իմպորտ կատարենք դրա մեջ createSlice:

parts/sellers/sellersSlice.jsimport { createSlice } from '@reduxjs/toolkit'

Շարունակում ենք կատարել ստանդարտ քայլերը: Որպես սկզբնական արժեք slice-ի համար ստեղծենք չորս վաճառող: Պարզության համար նրանք կունենան երկու դաշտ - id և name:

sellers/sellersSlice.jsconst initialState = [
  { id: '0', name: 'Super Power' },
  { id: '1', name: 'Miracle Life' },
  { id: '2', name: 'Dolls&Toys' },
  { id: '3', name: 'Granny' },
]

Ստորև օգտագործելով createSlice ստեղծենք slice sellers, փոխանցենք դրան սկզբնական արժեքը: Քանի որ մենք չենք ավելացնի վաճառողներ, ոչ էլ կթարմացնենք նրանց տվյալները հետագայում, ապա թող reducers դաշտը մեզ մոտ մնա դատարկ:

sellers/sellersSlice.jsconst sellersSlice = createSlice({
  name: 'sellers',
  initialState,
  reducers: {},
})

Ֆայլի վերջում չմոռանանք export ստացված reducer-ի մասին:

sellers/sellersSlice.jsexport default sellersSlice.reducer

Այժմ մեզ անհրաժեշտ է բացել store.js ֆայլը app պանակում և իմպորտ կատարել ստացված reducer-ը:

app/store.jsimport sellersReducer from '../parts/sellers/sellersSlice'

Եվ ապա նշանակել այն configureStore-ում որպես reducer sellers-ի համար:

app/store.jsexport default configureStore({
  reducer: {
    products: productsReducer,
    sellers: sellersReducer,
  },
})