Toinen slice Reduxiin

Edellisillä tunneilla työskentelimme paljon products -slicen parissa tuotteita varten. Todellisessa Redux-sovelluksessa tilassa voi olla monia sliceja eri tarkoituksiin. Siksi tällä oppitunnilla lisäämme tilaan toisen slicen myyjiä varten, jotka käytännössä lisäävät tuotteet sovelluksessamme.

Avataan sovelluksemme tuotteilla ja ensimmäinen asia, jonka teemme, on luoda kansioon parts toinen kansio sellers. Tänne siirrämme kaiken koodin ja komponentit, jotka koskevat myyjiä.

Nyt, kuten tuotteiden tapauksessa, luodaan slice myyjille. Aluksi luodaan kansioon sellers tiedosto sellersSlice.js ja tuodaan siihen createSlice:

import { createSlice } from '@reduxjs/toolkit'

Jatkamme vakioaskelia. Alkuarvona sliceelle luomme neljä myyjää. Yksinkertaisuuden vuoksi niillä on kaksi kenttää - id ja name:

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

Alapuolella createSlice:n avulla luomme slicen sellers, annamme sille alkuarvon. Koska emme aio lisätä myyjiä eikä päivittää heidän tietojaan myöhemmin, niin reducerien kenttä jää tyhjäksi:

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

Tiedoston lopussa muistetaan exporterata saatu reducer:

export default sellersSlice.reducer

Nyt meidän on avattava tiedosto store.js kansiossa app ja tuotava saatu reducer:

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

Ja sitten määritetään se configureStore:ssa reduceriksi kohteelle sellers:

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

Avaa opiskelijasovelluksesi. Luo toinen kansio teachers, tänne siirrät kooditiedostot, jotka koskevat opettajia. Luo sinne tiedosto teachersSlice.js. Hyödyntäen oppitunnin materiaaleja, luo sinne teachers -slice createSlice:n avulla.

Jokaisella opettajien datalla olkoon kolme ominaisuutta: id, name (joka sisältää sukunimen ja etunimen alkukirjaimet, esimerkiksi 'Petrov A.V.') ja aine (mikä tahansa, keksimäsi - fysiikka, matematiikka, biologia jne.). Tee 3 tällaista opettajaobjektia alkuarvoksi sliceelle.

Tuo saatu reducer teachersReducer tiedostoon store.js ja määritä se reduceriksi teachers:lle, kuten oppitunnissa näytetään.