Dodajanje dodatnega reza v Redux

V prejšnjih urah smo intenzivno delali na rezu products za produkte. V resnični Redux aplikaciji je lahko v stanju veliko rezov za različne namene. Zato bomo v tej lekciji v state dodali še en rez za prodajalce, ki bodo dejansko dodajali produkte v naši aplikaciji.

Odprimo našo aplikacijo s produkti in prva stvar, ki jo bomo naredili, je, da v mapi parts ustvarimo še eno mapo sellers, tukaj bomo namestili vso kodo in komponente, ki zadevajo prodajalce.

Zdaj, tako kot v primeru produktov, ustvarimo rez za prodajalce. Za začetek v mapi sellers ustvarimo datoteko sellersSlice.js in uvozimo vanjo createSlice:

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

Nadaljujemo s standardnimi koraki. Kot začetno vrednost za rez ustvarimo štiri prodajalce. Zaradi enostavnosti bodo imeli dva polja - id in name:

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

Spodaj s pomočjo createSlice ustvarimo rez sellers, podajmo mu začetno vrednost. Ker ne bomo niti dodajali prodajalcev, niti posodabljali njihovih podatkov v nadaljevanju, naj polje z reducerji pri nas za zdaj ostane prazno:

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

Na koncu datoteke ne pozabimo na izvoz dobljenega reducerja:

sellers/sellersSlice.jsexport default sellersSlice.reducer

Zdaj moramo odpreti datoteko store.js v mapi app in uvoziti dobljeni reducer:

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

In nato določiti v configureStore kot reducer za sellers:

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