Adăugarea unui alt slice în Redux

În lecțiile anterioare am lucrat intens cu slice-ul products pentru produse. Într-o aplicație Redux reală, în starea globală pot exista multe slice-uri pentru diverse scopuri. De aceea, în această lecție vom adăuga în state un alt slice pentru vânzători, care de fapt vor fi cei care vor adăuga produse în aplicația noastră.

Deschidem aplicația noastră cu produse și primul lucru pe care îl vom face este să în folderul parts să creăm un alt folder sellers, aici vom plasa tot codul și componentele legate de vânzători.

Acum, la fel ca în cazul produselor, să creăm un slice pentru vânzători. Pentru început, în folderul sellers creăm fișierul sellersSlice.js și importăm în el createSlice:

import { createSlice } from '@reduxjs/toolkit'

Continuăm să facem pașii standard. Ca valoare inițială pentru slice vom crea patru vânzători. Pentru simplitate, ei vor avea două câmpuri - id și name:

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

Mai jos, cu ajutorul createSlice vom crea slice-ul sellers, îi vom transmite valoarea inițială. Deoarece nu vom nici să adăugăm vânzători, nici să le actualizăm datele în viitor, atunci câmpul cu reducători să rămână deocamdată gol:

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

La sfârșitul fișierului să nu uităm de exportul reductorului obținut:

export default sellersSlice.reducer

Acum trebuie să deschidem fișierul store.js din folderul app și să importăm reductorul obținut:

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

Și apoi să îl atribuim în configureStore ca reductor pentru sellers:

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

Deschideți aplicația voastră cu studenți. Creați un alt folder teachers, aici veți avea fișierele cu cod, legate de profesori. Creați în el fișierul teachersSlice.js. Folosind materialele lecției, creați în el slice-ul teachers cu ajutorul createSlice.

Fiecare obiect cu date despre profesor să aibă trei proprietăți: id, name (care va conține numele de familie și inițiale, de exemplu 'Petrov A.V.') și materia (orice, care vă vine în minte - fizică, matematică, biologie etc.). Realizați 3 astfel de obiecte cu profesori ca valoare inițială pentru slice.

Importați reductorul obținut teachersReducer în store.js și atribuiți-l ca reductor pentru teachers, așa cum este arătat în lecție.