Додавање слајса у Redux

Припремили смо основне алатке за прављење наше Redux апликације, сада можемо прећи директно на имплементацију њених компоненти.

На овом часу ћемо почети са појмом слајсова (slices). Redux апликација има једно глобално стање, које се чува у store-у. То стање се разлаже на слајсове. У ствари, слајс је део складишта који садржи почетно стање, логику редуктора и акције за одређени део апликације.

У нашој апликацији ће се појављивати производи, па ће први слајс, који ћемо направити, садржати информације о производима. Такође, при прављењу слајса потребно је додати редуктор који зна како да обрађује те информације.

Хајде да одемо у фолдер src и направимо фолдер parts, а затим у њему фолдер products - овде ћемо склапати све фајлове са кодом који се односе на производе. У фолдеру products направићемо фајл productsSlice.js, а затим импортовати у њега из RTK функцију createSlice, помоћу које ћемо и правити слајсове:

import { createSlice } from '@reduxjs/toolkit'

Сада хајде да направимо слајс за производе и назовимо га 'products'. За својство reducers ћемо за сада оставити прагње витичасте заграде:

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

Такође нам је потребно дефинисати initialState - почетно стање слајса стања, које ће бити учитано при првом покретању апликације. Написаћемо га одмах после импорта и пре прављења слајса. Нека то буде низ од пар објеката који садрже податке о производима. Назначимо за сваки производ id, назив, опис, цену и количину:

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',
	},
]

На крају кода фајла из резултата рада функције createSlice ћемо узети редуктор који је она генерисала и експортовати га. Он ће нам загодети у другим фајловима апликације:

export default productsSlice.reducer

Отворите вашу апликацију за студенте. Направите у њој фајл studentsSlice.js, како је описано на часу. Направите у њему при помоћи createSlice слајс students. У качеству почетне вредности слајса нека у вас буде низ од пар објеката, који садрже податке о студентима.

За сваког студента направите поља: id, име, презиме, година старости и смер.

На крају фајла studentsSlice.js експортујте добијени редуктор, како је описано на часу.