Lägga till ytterligare en slice i Redux

På tidigare lektioner har vi arbetat intensivt med slicen products för produkter. I en riktig Redux-applikation kan det finnas många slicer i state för olika ändamål. Därför kommer vi i denna lektion att lägga till ytterligare en slice i state för försäljare, som i praktiken kommer att lägga till produkter i vår applikation.

Öppna vår produktapplikation och det första vi gör är att i mappen parts skapa ytterligare en mapp sellers, här kommer vi att placera all kod och komponenter som rör försäljare.

Nu, precis som med produkterna, låt oss skapa en slice för försäljare. Till att börja med, skapa i mappen sellers filen sellersSlice.js och importera createSlice i den:

import { createSlice } from '@reduxjs/toolkit'

Vi fortsätter med de standardsteg. Som startvärde för slicen skapar vi fyra försäljare. För enkelhetens skull kommer de att ha två fält - id och name:

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

Nedanför, med hjälp av createSlice, skapar vi slicen sellers, skickar dess startvärde. Eftersom vi inte kommer att lägga till försäljare, eller uppdatera deras data i framtiden, låt fältet med reducers vara tomt för nu:

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

I slutet av filen, glöm inte exporten av den resulterande reducern:

export default sellersSlice.reducer

Nu måste vi öppna filen store.js i mappen app och importera den erhållna reducern:

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

Och sedan tilldela den i configureStore som reducer för sellers:

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

Öppna din applikation med studenter. Skapa ytterligare en mapp teachers, här kommer du att ha filer med kod som rör lärare. Skapa i den en fil teachersSlice.js. Använd lektionens material för att skapa en slice teachers i den med hjälp av createSlice.

Låt varje objekt med data om läraren ha tre egenskaper: id, name (som kommer att innehålla efternamn och initialer, till exempel 'Petrov A.V.') och ämne (vilket som helst du kommer på - fysik, matematik, biologi, etc.). Skapa 3 sådana objekt med lärare som startvärde för slicen.

Importera den erhållna reducern teachersReducer till store.js och tilldela den som reducer för teachers, som visas i lektionen.