Dodajanje dodatnega reza v Redux

V prejšnjih urah smo intenzivno delali na rezu products za produkte. V resnični Redux aplikaciji je lahko v stanju veliko rezov za različne namene. Zato bomo v tej lekciji v state dodali še en rez za prodajalce, ki bodo dejansko dodajali produkte v naši aplikaciji.

Odprimo našo aplikacijo s produkti in prva stvar, ki jo bomo naredili, je, da v mapi parts ustvarimo še eno mapo sellers, tukaj bomo namestili vso kodo in komponente, ki zadevajo prodajalce.

Zdaj, tako kot v primeru produktov, ustvarimo rez za prodajalce. Za začetek v mapi sellers ustvarimo datoteko sellersSlice.js in uvozimo vanjo createSlice:

import { createSlice } from '@reduxjs/toolkit'

Nadaljujemo s standardnimi koraki. Kot začetno vrednost za rez ustvarimo štiri prodajalce. Zaradi enostavnosti bodo imeli dva polja - id in name:

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

Spodaj s pomočjo createSlice ustvarimo rez sellers, podajmo mu začetno vrednost. Ker ne bomo niti dodajali prodajalcev, niti posodabljali njihovih podatkov v nadaljevanju, naj polje z reducerji pri nas za zdaj ostane prazno:

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

Na koncu datoteke ne pozabimo na izvoz dobljenega reducerja:

export default sellersSlice.reducer

Zdaj moramo odpreti datoteko store.js v mapi app in uvoziti dobljeni reducer:

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

In nato določiti v configureStore kot reducer za sellers:

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

Odprite vašo aplikacijo s študenti. Ustvarite še eno mapo teachers, tukaj boste imeli datoteke s kodo, ki zadeva učitelje. Ustvarite v njej datoteko teachersSlice.js. Z uporabo gradiva iz lekcije ustvarite v njej rez teachers z uporabo createSlice.

Naj ima vsak objekt s podatki učitelja tri lastnosti: id, name (ki bo vsebovala priimek in inicialke, na primer 'Petrov A.V.') in predmet (poljuben, ki si ga izmislite - fizika, matematika, biologija itd.). Naredite 3 takšne objekte z učitelji v kot začetno vrednost za rez.

Uvozite dobljeni reducer teachersReducer v store.js in določite ga kot reducer za teachers, kot je prikazano v lekciji.