Vēl viena šķēles pievienošana Redux

Iepriekšējās nodarbībās mēs intensīvi strādājām ar produktu šķēli products. Reālā Redux lietotnē stāvoklī var būt daudz šķēļu dažādiem mērķiem. Tāpēc šajā nodarbībā mēs pievienosim stāvoklim vēl vienu šķēli pārdevējiem, kuri faktiski pievienos produktus mūsu lietotnē.

Atvērsim mūsu produktu lietotni un pirmā lieta, ko mēs darīsim, ir mapē parts izveidosim vēl vienu mapi sellers, šeit mēs ievietosim visu kodu un komponentes, kas attiecas uz pārdevējiem.

Tagad, tāpat kā produktu gadījumā, izveidosim šķēli pārdevējiem. Sākumā mapē sellers izveidosim failu sellersSlice.js un importēsim tajā createSlice:

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

Turpinām veikt standarta darbības. Kā sākotnējo vērtību šķēlei izveidosim četrus pārdevējus. Vienkāršības labad tiem būs divi lauki - id un name:

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

Zemāk, izmantojot createSlice, izveidosim šķēli sellers, padodam tai sākotnējo vērtību. Tā kā mēs nepievienosim pārdevējus, neatjaunināsim to datus turpmāk, tad lai lauks ar reduceriem pagaidām paliek tukšs:

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

Faila beigās neaizmirsīsim par eksportu iegūtā reducer:

sellers/sellersSlice.jsexport default sellersSlice.reducer

Tagad mums jāatver fails store.js mapē app un jāimportē iegūtais reducers:

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

Un tad piešķirt to configureStore kā reducer priekš sellers:

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