Legge til en slice i Redux

Vi har forberedt de viktigste verktøyene for å opprette Redux-applikasjonen vår, nå kan vi gå direkte til implementeringen av dens komponenter.

I denne leksjonen starter vi med konseptet slices (slices). En Redux-applikasjon har en global tilstand som lagres i store. Denne tilstanden deles opp i slices. Faktisk er en slice en liten del av lagringen som inneholder utgangstilstanden, logikken til reduceren og handlingene for en spesifikk del av applikasjonen.

I applikasjonen vår vil det være produkter, følgelig vil den første slicen vi lage, inneholde informasjon om produktene. Når du oppretter en slice må du også legge til en reducer som vet hvordan du behandler denne informasjonen.

La oss gå inn i mappen src og opprette mappen parts, og deretter i den mappen products - hit vil vi legge alle filer med kode som relaterer seg til produkter. I mappen products vil vi opprette filen productsSlice.js, og deretter importere funksjonen createSlice fra RTK, som vi skal bruke for å opprette slices:

import { createSlice } from '@reduxjs/toolkit'

La oss nå opprette en slice for produkter og kalle den 'products'. For egenskapen reducers lar vi den være tom for nå:

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

Vi må også definere initialState - starttilstanden til slice som vil bli lastet inn første gang applikasjonen starter. La oss skrive den umiddelbart etter importen og før opprettelsen av slicen. La det være en matrise med et par objekter som inneholder produktdata. La oss for hvert produkt spesifisere id, tittel, beskrivelse, pris og antall:

const initialState = [
	{
		id: '1',
		title: 'Product1',
		desc: 'Dette er et fantastisk produkt',
		price: '300',
		amount: '30',
	},
	{
		id: '2',
		title: 'Product2',
		desc: 'Dette er et fint produkt',
		price: '700',
		amount: '12',
	},
]

På slutten av filkoden vil vi ta den genererte reduceren fra resultatet av funksjonen createSlice og eksportere den. Den vil være nyttig for oss i andre filer i applikasjonen:

export default productsSlice.reducer

Åpne studentapplikasjonen din. Opprett filen studentsSlice.js i den, slik som beskrevet i leksjonen. Opprett i den ved hjelp av createSlice en slice students. La startverdien til slicen være en matrise med et par objekter som inneholder studentdata.

For hver student, lag felter: id, fornavn, etternavn, alder og spesialisering.

På slutten av filen studentsSlice.js eksporter den resulterende reduceren, som beskrevet i leksjonen.