Dodavanje još jednog slajsa u Redux

Na prethodnim časovima smo intenzivno radili na slajsu products za proizvode. U realnoj Redux aplikaciji u stanju može biti mnogo slajseva za različite svrhe. Stoga ćemo na ovoj lekciji dodati u state još jedan slajs za prodavce, koji će zapravo dodavati proizvode u našoj aplikaciji.

Otvorimo našu aplikaciju sa proizvodima i prvo što ćemo uraditi je da u folderu parts kreiramo još jedan folder sellers, ovde ćemo smestiti sav kod i komponente, koji se tiču prodavaca.

Sada, kao i u slučaju sa proizvodima, hajde da kreiramo slajs za prodavce. Za početak u folderu sellers kreirajmo fajl sellersSlice.js i importujmo u njega createSlice:

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

Nastavljamo sa standardnim koracima. Kao početnu vrednost za slajs kreirajmo četiri prodavca. Radi jednostavnosti imaće dva polja - id i name:

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

Ispod pomoću createSlice kreirajmo slajs sellers, prosledimo mu početnu vrednost. Pošto nećemo ni dodavati prodavce, ni ažurirati njihove podatke kasnije, neka polje sa reducers kod nas za sada ostane prazno:

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

Na kraju fajla ne zaboravimo na eksport dobijenog reducera:

sellers/sellersSlice.jsexport default sellersSlice.reducer

Sada nam je potrebno da otvorimo fajl store.js u folderu app i importujemo dobijeni reducer:

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

I zatim da ga dodelimo u configureStore kao reducer za sellers:

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