Dodajanje reza v Redux

Pripravili smo osnovna orodja za ustvarjanje naše Redux aplikacije, zdaj lahko neposredno nadaljujemo z implementacijo njenih komponent.

V tej lekciji bomo začeli s pojmom rezov (slices). Redux aplikacija ima eno globalno stanje, ki je shranjeno v store. To stanje je razčlenjeno na reze. Pravzaprav je rez del shrambe, ki vsebuje izhodiščno stanje, logiko reducerja in akcij za določen del aplikacije.

V naši aplikaciji bodo sodelovali izdelki, zato bo prvi rez, ki ga bomo naredili, vseboval informacije o izdelkih. Prav tako je pri ustvarjanju reza potrebno dodati reducer, ki ve, kako obdelati te informacije.

Pojdimo v mapo src in ustvarimo mapo parts, nato pa v njej mapo products - sem bomo zlagali vse datoteke s kodo, ki se nanašajo na izdelke. V mapi products bomo ustvarili datoteko productsSlice.js, nato pa uvozimo vanjo iz RTK funkcijo createSlice, s pomočjo katere bomo ustvarjali reze:

import { createSlice } from '@reduxjs/toolkit'

Zdaj ustvarimo rez za izdelke in ga poimenujmo 'products'. Za lastnost reducers za zdaj pustimo prazne zavit oklepaje:

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

Prav tako moramo določiti initialState - začetno stanje reza stanja, ki se bo naložilo ob prvem zagonu aplikacije. Zapišimo ga takoj po uvozu in pred ustvarjanjem reza. Naj bo to tabela iz nekaj objektov, ki vsebujejo podatke o izdelkih. Za vsak izdelek navedimo id, naslov, opis, ceno in količino:

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 koncu kode datoteke bomo iz rezultata delovanja funkcije createSlice vzeli z njo ustvarjen reducer in ga izvozili. Prav prišel nam bo v drugih datotekah aplikacije:

export default productsSlice.reducer

Odprite vašo aplikacijo za študente. Ustvarite v njej datoteko studentsSlice.js, kot je opisano v lekciji. Ustvarite v njej s pomočjo createSlice rez students. Kot začetno vrednost reza naj bo tabela iz nekaj objektov, ki vsebujejo podatke o študentih.

Za vsakega študenta naredite polja: id, ime, priimek, starost in smer.

Na koncu datoteke studentsSlice.js izvozite dobljeni reducer, kot je opisano v lekciji.