Dodavanje još jednog slajsa u Redux

Na prethodnim časovima smo intenzivno radili na slajsu products za proizvode. U realnoj Redux aplikaciji u stanju može biti mnogo slajseva za različite svrhe. Stoga ćemo na ovoj lekciji dodati u state još jedan slajs za prodavce, koji će zapravo dodavati proizvode u našoj aplikaciji.

Otvorimo našu aplikaciju sa proizvodima i prvo što ćemo uraditi je da u folderu parts kreiramo još jedan folder sellers, ovde ćemo smestiti sav kod i komponente, koji se tiču prodavaca.

Sada, kao i u slučaju sa proizvodima, hajde da kreiramo slajs za prodavce. Za početak u folderu sellers kreirajmo fajl sellersSlice.js i importujmo u njega createSlice:

import { createSlice } from '@reduxjs/toolkit'

Nastavljamo sa standardnim koracima. Kao početnu vrednost za slajs kreirajmo četiri prodavca. Radi jednostavnosti imaće dva polja - id i name:

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

Ispod pomoću createSlice kreirajmo slajs sellers, prosledimo mu početnu vrednost. Pošto nećemo ni dodavati prodavce, ni ažurirati njihove podatke kasnije, neka polje sa reducers kod nas za sada ostane prazno:

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

Na kraju fajla ne zaboravimo na eksport dobijenog reducera:

export default sellersSlice.reducer

Sada nam je potrebno da otvorimo fajl store.js u folderu app i importujemo dobijeni reducer:

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

I zatim da ga dodelimo u configureStore kao reducer za sellers:

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

Otvorite vašu aplikaciju sa studentima. Kreirajte još jedan folder teachers, ovde ćete imati fajlove sa kodom, koji se tiču nastavnika. Kreirajte u njoj fajl teachersSlice.js. Koristeći materijale lekcije, kreirajte u njemu slajs teachers pomoću createSlice.

Neka kod svakog objekta sa podacima učitelja budu tri svojstva: id, name (koje će sadržati prezime i inicijale, na primer 'Petrov A.V.') i predmet (bilo koji, koji smislite - fizika, matematika, biologija i sl.). Napravite 3 takva objekta sa učiteljima u kao početnu vrednost za slajs.

Importujte dobijeni reducer teachersReducer u store.js i dodelite ga kao reducer za teachers, kao što je prikazano u lekciji.