Tilføjelse af endnu en slice i Redux

På tidligere lektioner har vi arbejdet intensivt med slicen products for produkter. I en rigtig Redux applikation kan der være mange slices i staten til forskellige formål. Derfor vil vi i denne lektion tilføje endnu en slice til staten for sælgere, som faktisk vil tilføje produkter i vores applikation.

Lad os åbne vores applikation med produkter og det første, vi gør, er at oprette en mappe mere sellers i mappen parts, her vil vi placere al kode og komponenter, der vedrører sælgere.

Nu, ligesom med produkterne, lad os oprette en slice for sælgere. Til at starte med, i mappen sellers, opretter vi filen sellersSlice.js og importerer createSlice i den:

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

Vi fortsætter med de standard trin. Som startværdi for slicen opretter vi fire sælgere. For enkelhedens skyld vil de have to felter - id og name:

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

Nedenfor, ved hjælp af createSlice, opretter vi slicen sellers, sender den startværdien. Da vi hverken vil tilføje sælgere eller opdatere deres data senere, lad feltet med reducere forblive tomt for nu:

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

I slutningen af filen glemmer vi ikke at eksportere den resulterende reducer:

sellers/sellersSlice.jsexport default sellersSlice.reducer

Nu er vi nødt til at åbne filen store.js i mappen app og importere den resulterende reducer:

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

Og derefter tildele den i configureStore som reducer for sellers:

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