Byvoeging van nog 'n slice in Redux

In vorige lesse het ons intensief gewerk aan die products slice vir produkte. In 'n regte Redux-app kan daar baie slices in die state wees vir verskeie doeleindes. Daarom sal ons in hierdie les nog 'n slice vir verkopers by die state voeg, wat in werklikheid die produkte in ons app sal byvoeg.

Laat ons ons app met produkte oopmaak en die eerste ding wat ons sal doen, is om in die gids parts 'n ander gids sellers te skep, hier sal ons al die kode en komponente plaas wat verkopers betref.

Nou, soos in die geval van produkte, laat ons 'n slice vir verkopers skep. Om te begin, skep in die gids sellers die lêer sellersSlice.js en voer createSlice daarin in:

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

Ons gaan voort met die standaard stappe. As beginwaarde vir die slice skep ons vier verkopers. Vir eenvoud sal hulle twee velde hê - id en name:

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

Hieronder, met behulp van createSlice, skep ons die slice sellers, gee aan dit die beginwaarde. Aangesien ons nie verkopers sal byvoeg nie, of hul data later sal opdateer nie, laat die veld met reducers leeg bly vir nou:

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

Aan die einde van die lêer moet ons nie die uitvoer vergeet nie van die verkrygde reducer:

sellers/sellersSlice.jsexport default sellersSlice.reducer

Nou moet ons die lêer store.js in die gids app oopmaak en die verkrygde reducer invoer:

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

En dan dit in configureStore aanwys as die reducer vir sellers:

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