Tilføjelse af en slice til Redux

Vi har forberedt de vigtigste værktøjer til oprettelse af vores Redux-applikation, nu kan vi gå videre direkte til implementeringen af dens komponenter.

I denne lektion starter vi med begrebet slices (slices). En Redux-applikation har en global tilstand, som opbevares i store. Denne tilstand opdeles i slices. Faktisk er en slice en lille del af lagret, der indeholder den oprindelige tilstand, logikken for reducer og actions for en bestemt del af applikationen.

I vores applikation vil der være produkter, følgelig vil den første slice, som vi opretter, indeholde information om produkter. Ved oprettelse af en slice er det også nødvendigt at tilføje en reducer, som ved, hvordan man behandler denne information.

Lad os gå ind i mappen src og oprette mappen parts, og derefter i den mappen products - her vil vi lægge alle filer med kode, der relaterer sig til produkter. I mappen products opretter vi filen productsSlice.js, og derefter importerer vi fra RTK funktionen createSlice, som vi vil bruge til at oprette slices:

import { createSlice } from '@reduxjs/toolkit'

Lad os nu oprette en slice for produkter og kalde den 'products'. For egenskaben reducers lader vi foreløbig stå med tomme krøllede parenteser:

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

Vi skal også definere initialState - slice-tilstandens begyndelsestilstand , som indlæses ved den første start af applikationen. Lad os skrive det umiddelbart efter importen og før oprettelsen af slicen. Lad det være en matrix med et par objekter, der indeholder produktdata. For hvert produkt angiver vi id, navn, beskrivelse, pris og antal:

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

I slutningen af filkoden tager vi resultatet af funktionen createSlice og eksporterer den genererede reducer. Den vil være nyttig for os i andre filer i applikationen:

export default productsSlice.reducer

Åbn din studerende applikation. Opret i den filen studentsSlice.js, som beskrevet i lektionen. Opret i den ved hjælp af createSlice en slice students. Lad slice'ens begyndelsesværdi være en matrix med et par objekter, der indeholder studerendes data.

For hver studerende skal du lave felter: id, fornavn, efternavn, alder og speciale.

I slutningen af filen studentsSlice.js eksporter den opnåede reducer, som beskrevet i lektionen.