Teise lõigu lisamine Redux'i

Eelmistel tundidel tegime põhjalikult tööd toodete lõiguga products. Reaalses Redux rakenduses võib olekus olla palju lõike erinevatel eesmärkidel. Seetõttu lisame sellel tunnil olekusse veel ühe lõigu müüjate jaoks, kes tegelikult lisavad tooteid meie rakenduses.

Avame oma tooterakenduse ja esimese asjana loome kaustas parts veel ühe kausta sellers, siia paigutame kogu müüjaid puudutava koodi ja komponendid.

Nüüd, nagu toodete puhul, loome müüjate jaoks lõigu. Alustuseks loome kaustas sellers faili sellersSlice.js ja impordime sinna createSlice:

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

Jätkame standardsete sammudega. Algväärtusena loome neli müüjat. Lihtsuse mõttes on neil kaks välja - id ja name:

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

Allpool loome abiga createSlice lõigu sellers, edastame sellele algväärtuse. Kuna me ei hakka müüjaid lisama ega nende andmeid uuendama, siis jäägu väli redutseritega hetkel tühjaks:

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

Faili lõpus ärgem unustagem eksporti saadud redutserist:

sellers/sellersSlice.jsexport default sellersSlice.reducer

Nüüd peame avama faili store.js kaustas app ja importima saadud redutseri:

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

Ja seejärel määrama selle configureStore-s redutseriks võtmele sellers:

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