Lägga till ytterligare en slice i Redux

På tidigare lektioner har vi arbetat intensivt med slicen products för produkter. I en riktig Redux-applikation kan det finnas många slicer i state för olika ändamål. Därför kommer vi i denna lektion att lägga till ytterligare en slice i state för försäljare, som i praktiken kommer att lägga till produkter i vår applikation.

Öppna vår produktapplikation och det första vi gör är att i mappen parts skapa ytterligare en mapp sellers, här kommer vi att placera all kod och komponenter som rör försäljare.

Nu, precis som med produkterna, låt oss skapa en slice för försäljare. Till att börja med, skapa i mappen sellers filen sellersSlice.js och importera createSlice i den:

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

Vi fortsätter med de standardsteg. Som startvärde för slicen skapar vi fyra försäljare. För enkelhetens skull kommer de att ha två fält - id och name:

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

Nedanför, med hjälp av createSlice, skapar vi slicen sellers, skickar dess startvärde. Eftersom vi inte kommer att lägga till försäljare, eller uppdatera deras data i framtiden, låt fältet med reducers vara tomt för nu:

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

I slutet av filen, glöm inte exporten av den resulterande reducern:

sellers/sellersSlice.jsexport default sellersSlice.reducer

Nu måste vi öppna filen store.js i mappen app och importera den erhållna reducern:

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

Och sedan tilldela den i configureStore som reducer för sellers:

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