კიდევ ერთი სლაისის დამატება Redux-ში

წინა გაკვეთილებზე ჩვენ მუშაობდით პროდუქტების products სლაისზე. რეალურ Redux აპლიკაციაში შეიძლება იყოს მრავალი სლაისი სხვადასხვა მიზნებისთვის. ამიტომ ამ გაკვეთილზე ჩვენ state-ს კიდევ ერთ სლაისს დავამატებთ გამყიდველებისთვის, რომლებიც პრაქტიკულად პროდუქტებს ჩვენს აპლიკაციაში დაამატებენ.

გავხსნათ ჩვენი პროდუქტების აპლიკაცია და პირველი, რაც გავაკეთებთ, ეს არის parts საქაღალდეში შევქმნათ კიდევ ერთი საქაღალდე sellers, აქ ჩვენ ჩავსვამთ მთელ კოდს და კომპონენტებს, რომლებიც ეხება გამყიდველებს.

ახლა, ისევე როგორც პროდუქტების შემთხვევაში, შევქმნათ სლაისი გამყიდველებისთვის. დასაწყისისთვის sellers საქაღალდეში შევქმნათ ფაილი sellersSlice.js და გავიმპორტოთ მასში createSlice:

import { createSlice } from '@reduxjs/toolkit'

ვაგრძელებთ სტანდარტული ნაბიჯების გაკეთებას. როგორც საწყისი მნიშვნელობა სლაისისთვის შევქმნათ ოთხი გამყიდველი. სიმარტივისთვის მათ ექნებათ ორი ველი - id და name:

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

ქვემოთ createSlice-ის დახმარებით შევქმნათ სლაისი sellers, გადავცეთ მას საწყისი მნიშვნელობა. რადგან ჩვენ არ ვაპირებთ არც გამყიდველების დამატებას, არც მათი მონაცემების განახლებას შემდგომში, მოდით ველი რედიუსერებთან ჩვენ აქ ცარიელი დარჩეს:

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

ფაილის ბოლოს არ დაგვავიწყდეს მიღებული რედიუსერის ექსპორტი:

export default sellersSlice.reducer

ახლა ჩვენ უნდა გავხსნათ ფაილი store.js app საქაღალდეში და გავიმპორტოთ მიღებული რედიუსერი:

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

და შემდეგ დავნიშნოთ ის configureStore-ში როგორც რედიუსერი sellers-ისთვის:

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

გახსენით თქვენი აპლიკაცია სტუდენტებთან. შექმენით კიდევ ერთი საქაღალდე teachers, აქ გექნებათ ფაილები კოდთან, რომლებიც ეხება მასწავლებლებს. შექმენით მასში ფაილი teachersSlice.js. გაკვეთილის მასალების გამოყენებით, შექმენით მასში სლაისი teachers createSlice-ის დახმარებით.

შექმენით, რომ თითოეულ ობიექტს მასწავლებლის მონაცემებით გქონდეთ სამი თვისება: id, name (რომელიც შეიცავს გვარს და ინიციალებს, მაგალითად 'პეტროვი ა.ვ.') და საგანი (ნებისმიერი, რომელიც მოიფიქრებთ - ფიზიკა, მათემატიკა, ბიოლოგია და ა.შ.). შექმენით 3 ასეთი ობიექტი მასწავლებლებით როგორც საწყისი მნიშვნელობა სლაისისთვის.

გაიმპორტეთ მიღებული რედიუსერი teachersReducer store.js-ში და დაანიშნეთ ის როგორც რედიუსერი teachers-ისთვის, როგორც ეს ნაჩვენებია გაკვეთილზე.