Дадаванне слайса ў 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 возьмем згенераваны ёй reducer і экспартуем яго. Ён спатрэбіцца нам у іншых файлах прыкладання:

export default productsSlice.reducer

Адкрыйце ваша прыкладанне для студэнтаў. Стварыце ў ім файл studentsSlice.js, як апісана ў уроку. Стварыце ў ім пры дапамозе createSlice слайс students. У якасці пачатковага значэння слайса хай у вас будзе масіў з пары аб'ектаў, якія змяшчаюць дадзеныя студэнтаў.

Для кожнага студэнта зрабіце палі: id, імя, прозвішча, узрост і спецыяльнасць.

У канцы файла studentsSlice.js экспартуйце атрыманы reducer, як апісана ў уроку.