Dodavanje slajsa u Redux

Pripremili smo osnovne alate za stvaranje naše Redux aplikacije, sada možemo da pređemo direktno na implementaciju njenih komponenti.

Na ovom času počećemo sa pojmom slajsova (slices). Redux aplikacija ima jedno globalno stanje, koje se čuva u store-u. Ovo stanje se cepa na slajsove. Zapravo, slajs je deo store-a koji sadrži početno stanje, logiku reducer-a i akcija za određeni deo aplikacije.

U našoj aplikaciji će se pojavljivati proizvodi, stoga će prvi slajs, koji ćemo napraviti, sadržati informacije o proizvodima. Takođe pri kreiranju slajsa potrebno je dodati reducer koji zna kako da obrađuje ove informacije.

Hajdemo otići u folder src i kreirati folder parts, a zatim u njemu folder products - ovde ćemo stavljati sve fajlove sa kodom koji se odnose na proizvode. U folderu products kreiraćemo fajl productsSlice.js, a zatim importovati u njega iz RTK funkciju createSlice, pomoću koje ćemo i kreirati slajsove:

import { createSlice } from '@reduxjs/toolkit'

Sada hajdemo da kreiramo slajs za proizvode i nazovimo ga 'products'. Za svojstvo reducers za sada ćemo ostaviti prazne vitičaste zagrade:

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {}
})

Takođe nam je potrebno da definišemo initialState - početno stanje slajsa stanja, koje će biti učitano pri prvom pokretanju aplikacije. Napisaćemo ga odmah posle import-a i pre kreiranja slajsa. Neka to bude niz od par objekata koji sadrže podatke o proizvodima. Navedimo za svaki proizvod id, naziv, opis, cenu i količinu:

const initialState = [
	{
		id: '1',
		title: 'Product1',
		desc: 'This is an amazing product',
		price: '300',
		amount: '30',
	},
	{
		id: '2',
		title: 'Product2',
		desc: 'This is a nice product',
		price: '700',
		amount: '12',
	},
]

Na kraju koda fajla ćemo iz rezultata rada funkcije createSlice uzeti generisani od nje reducer i eksportovati ga. On će nam zatrebati u drugim fajlovima aplikacije:

export default productsSlice.reducer

Otvorite vašu aplikaciju za studente. Kreirajte u njoj fajl studentsSlice.js, kao što je opisano u lekciji. Kreirajte u njemu uz pomoć createSlice slajs students. Kao početnu vrednost slajsa neka kod vas bude niz od par objekata koji sadrže podatke o studentima.

Za svakog studenta napravite polja: id, ime, prezime, godine i specijalnost.

Na kraju fajla studentsSlice.js eksportujte dobijeni reducer, kao što je opisano u lekciji.