Προσθήκη slice στο Redux

Έχουμε προετοιμάσει τα βασικά εργαλεία για τη δημιουργία της εφαρμογής μας Redux, τώρα μπορούμε να προχωρήσουμε απευθείας στην υλοποίηση των στοιχείων της.

Σε αυτό το μάθημα θα ξεκινήσουμε με την έννοια των slice (slices). Μια εφαρμογή Redux έχει μια καθολική κατάσταση, η οποία αποθηκεύεται στο store. Αυτή η κατάσταση χωρίζεται σε slices. Ουσιαστικά, ένα slice είναι ένα τμήμα του store, που περιέχει την αρχική κατάσταση, τη λογική των reducer και actions για ένα συγκεκριμένο τμήμα της εφαρμογής.

Στην εφαρμογή μας θα εμφανίζονται προϊόντα, αντίστοιχα το πρώτο slice που θα φτιάξουμε, θα περιέχει πληροφορίες για τα προϊόντα. Επίσης, κατά τη δημιουργία ενός slice είναι απαραίτητο να προσθέσουμε ένα reducer, ο οποίος ξέρει πώς να επεξεργάζεται αυτές τις πληροφορίες.

Ας πάμε στο φάκελο src και ας δημιουργήσουμε τον φάκελο parts, και στη συνέχεια μέσα σε αυτόν τον φάκελο products - εδώ θα βάζουμε όλα τα αρχεία με κώδικα, που σχετίζονται με τα προϊόντα. Στον φάκελο products θα δημιουργήσουμε το αρχείο productsSlice.js, και στη συνέχεια θα εισάγουμε από το RTK τη λειτουργία createSlice, με τη βοήθεια της οποίας θα δημιουργούμε τα slices:

import { createSlice } from '@reduxjs/toolkit'

Τώρα ας δημιουργήσουμε ένα slice για τα προϊόντα και ας το ονομάσουμε 'products'. Για την ιδιότητα reducers θα αφήσουμε προς το παρόν άδειες αγκύλες:

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {}
})

Επίσης, πρέπει να ορίσουμε την initialState - την αρχική κατάσταση του slice κατάστασης, που θα φορτωθεί κατά την πρώτη εκκίνηση της εφαρμογής. Ας τη γράψουμε αμέσως μετά την εισαγωγή και πριν τη δημιουργία του slice. Ας είναι ένας πίνακας από δύο αντικείμενα, που περιέχουν δεδομένα προϊόντων. Ας ορίσουμε για κάθε προϊόν id, τίτλο, περιγραφή, τιμή και ποσότητα:

const initialState = [
	{
		id: '1',
		title: 'Product1',
		desc: 'This is an amazing product',
		price: '300',
		amount: '30',
	},
	{
		id: '2',
		title: 'Product2',
		desc: 'This is a nice product',
		price: '700',
		amount: '12',
	},
]

Στο τέλος του κώδικα του αρχείου, από το αποτέλεσμα της λειτουργίας createSlice θα πάρουμε τον reducer που δημιούργησε και θα τον εξάγουμε. Θα μας φανεί χρήσιμος σε άλλα αρχεία της εφαρμογής:

export default productsSlice.reducer

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

Για κάθε φοιτητή φτιάξτε πεδία: id, όνομα, επώνυμο, ηλικία και ειδικότητα.

Στο τέλος του αρχείου studentsSlice.js εξάγετε τον reducer που προέκυψε, όπως περιγράφεται στο μάθημα.