Legge til enda en slice i Redux

I tidligere timer jobbet vi tett med slicen products for produkter. I en ekte Redux-applikasjon kan det være mange slices i staten for ulike formål. Derfor vil vi i denne leksjonen legge til enda en slice i staten for selgere, som faktisk vil legge til produkter i vår applikasjon.

La oss åpne applikasjonen vår med produkter og det første vi gjør er å i mappen parts opprette enda en mappe sellers, her vil vi plassere all kode og komponenter relatert til selgere.

Nå, akkurat som med produkter, la oss opprette en slice for selgere. Til å begynne med, i mappen sellers oppretter vi filen sellersSlice.js og importerer createSlice i den:

import { createSlice } from '@reduxjs/toolkit'

Vi fortsetter med standardtrinnene. Som startverdi for slicen oppretter vi fire selgere. For enkelthetens skyld vil de ha to felt - id og name:

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

Nedenfor bruker vi createSlice til å opprette slicen sellers, og sender den startverdien. Siden vi ikke kommer til å legge til selgere, eller oppdatere deres data videre, la feltet med reducere forbli tomt foreløpig:

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

På slutten av filen må vi ikke glemme eksporten av den resulterende reduceren:

export default sellersSlice.reducer

Nå må vi åpne filen store.js i mappen app og importere den resulterende reduceren:

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

Og deretter tilordne den i configureStore som reducer for sellers:

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

Åpne applikasjonen din med studenter. Opprett enda en mappe teachers, her vil du ha filer med kode som omhandler lærere. Opprett i den en fil teachersSlice.js. Bruk opplæringsmaterialet fra leksjonen til å opprette en slice teachers i den ved hjelp av createSlice.

La hvert objekt med data om læreren ha tre egenskaper: id, name (som skal inneholde etternavn og initialer, for eksempel 'Petrov A.V.') og fag (ethvert du finner på - fysikk, matematikk, biologi osv.). Lag 3 slike objekter med lærere som startverdi for slicen.

Importer den resulterende reduceren teachersReducer i store.js og tilordne den som reducer for teachers, som vist i leksjonen.