Een slice toevoegen aan Redux

We hebben de basishulpmiddelen voorbereid voor het maken van onze Redux-applicatie, nu kunnen we direct overgaan tot de implementatie van de componenten.

In deze les beginnen we met het concept van slices (slices). Een Redux-applicatie heeft één globale state, die wordt opgeslagen in de store. Deze state wordt opgesplitst in slices. Feitelijk is een slice een stukje van de store, dat de initiële state, de reducer-logica en actions bevat voor een specifiek deel van de applicatie.

In onze applicatie zullen producten een rol spelen, dienovereenkomstig zal de eerste slice, die we maken, informatie over producten bevatten. Ook moet bij het aanmaken van een slice een reducer worden toegevoegd, die weet hoe deze informatie moet worden verwerkt.

Laten we naar de map src gaan en een map parts aanmaken, en daarin een map products - hier zullen we alle codebestanden die betrekking hebben op producten in opslaan. In de map products maken we een bestand productsSlice.js aan, en vervolgens importeren we hierin uit RTK de functie createSlice, waarmee we de slices zullen aanmaken:

import { createSlice } from '@reduxjs/toolkit'

Laten we nu een slice voor producten aanmaken en deze 'products' noemen. Voor de eigenschap reducers laten we voorlopig lege accolades staan:

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

Ook moeten we de initialState definiëren - de initiële staat van de slice state, die wordt geladen bij de eerste start van de applicatie. Laten we deze direct na de import en vóór het aanmaken van de slice schrijven. Laat het een array zijn met een paar objecten, die productgegevens bevatten. Laten we voor elk product id, titel, beschrijving, prijs en hoeveelheid specificeren:

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',
	},
]

Aan het einde van de code in het bestand halen we uit het resultaat van de functie createSlice de gegenereerde reducer en exporteren deze. Deze zal van pas komen in andere bestanden van de applicatie:

export default productsSlice.reducer

Open je applicatie voor studenten. Maak er een bestand studentsSlice.js in aan, zoals beschreven in de les. Maak er met behulp van createSlice een slice students aan. Laat als initiële waarde van de slice een array met een paar objecten zijn, die studentgegevens bevatten.

Maak voor elke student de velden: id, voornaam, achternaam, leeftijd en specialisatie.

Exporteer aan het einde van het bestand studentsSlice.js de verkregen reducer, zoals beschreven in de les.