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

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

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

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

import { createSlice } from '@reduxjs/toolkit'

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

const initialState = [
	{ id: '0', name: 'Super Power' },
	{ id: '1', name: 'Miracle Life' },
	{ id: '2', name: 'Dolls&Toys' },
	{ id: '3', name: 'Granny' },
]

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

const sellersSlice = createSlice({
	name: 'sellers',
	initialState,
	reducers: {},
})

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

export default sellersSlice.reducer

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

import sellersReducer from '../parts/sellers/sellersSlice'

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

export default configureStore({
	reducer: {
		products: productsReducer,
		sellers: sellersReducer,
	},
})

Ανοίξτε την εφαρμογή σας με τους μαθητές. Δημιουργήστε έναν ακόμη φάκελο teachers, εδώ θα έχετε αρχεία με κώδικα, που αφορούν τους διδάσκοντες. Δημιουργήστε σε αυτόν το αρχείο teachersSlice.js. Χρησιμοποιώντας τα υλικά του μαθήματος, δημιουργήστε σε αυτό το slice teachers με τη βοήθεια του createSlice.

Αφήστε κάθε αντικείμενο με δεδομένα καθηγητή να έχει τρεις ιδιότητες: id, name (η οποία θα περιέχει το επώνυμο και τα αρχικά, για παράδειγμα 'Πέτροβ Α.Β.') και το μάθημα (οποιοδήποτε, ό,τι σκέφτεστε - φυσική, μαθηματικά, βιολογία κ.λπ.). Φτιάξτε 3 τέτοια αντικείμενα με καθηγητές ως αρχική τιμή για το slice.

Κάντε import τον reducer που πήρατε teachersReducer στο store.js και ορίστε τον ως reducer για το teachers, όπως φαίνεται στο μάθημα.