Προσθήκη ενός ακόμη slice στο Redux

Στα προηγούμενα μαθήματα δουλέψαμε intensively στο slice products για τα προϊόντα. Σε μια πραγματική εφαρμογή Redux, η κατάσταση (state) μπορεί να έχει πολλά slices για διάφορους σκοπούς. Γι' αυτό, σε αυτό το μάθημα θα προσθέσουμε στο state ένα ακόμη slice για τους πωλητές, οι οποίοι πρακτικά θα προσθέτουν τα προϊόντα στην εφαρμογή μας.

Ας ανοίξουμε την εφαρμογή μας με τα προϊόντα και το πρώτο πράγμα που θα κάνουμε είναι, στο φάκελο parts να δημιουργήσουμε έναν ακόμη φάκελο sellers, εδώ θα τοποθετήσουμε όλο τον κώδικα και τα components, που αφορούν τους πωλητές.

Τώρα, όπως και στην περίπτωση των προϊόντων, ας δημιουργήσουμε ένα slice για τους πωλητές. Για αρχή, στο φάκελο sellers δημιουργούμε το αρχείο sellersSlice.js και εισάγουμε (import) σε αυτό το createSlice:

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

Συνεχίζουμε με τα τυπικά βήματα. Ως αρχική τιμή για το slice, δημιουργούμε τέσσερις πωλητές. Για απλότητα, θα έχουν δύο πεδία - id και name:

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

Πιο κάτω, με τη βοήθεια του createSlice δημιουργούμε το slice sellers, του περνάμε την αρχική τιμή. Εφόσον δεν πρόκειται να προσθέσουμε πωλητές, ούτε να ενημερώσουμε τα δεδομένα τους στο μέλλον, ας μείνει το πεδίο με τους reducers κενό προς το παρόν:

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

Στο τέλος του αρχείου, μην ξεχάσουμε τον export του reducer που πήραμε:

sellers/sellersSlice.jsexport default sellersSlice.reducer

Τώρα πρέπει να ανοίξουμε το αρχείο store.js στον φάκελο app και να κάνουμε import τον reducer που πήραμε:

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

Και στη συνέχεια να τον ορίσουμε στο configureStore ως reducer για το sellers:

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