Reduxda yana bir slays qo'shish

Oldingi darslarda biz mahsulotlar uchun products slaysi ustida qattiq ishladik. Haqiqiy Redux ilovasida state turli maqsadlar uchun ko'plab slayslardan iborat bo'lishi mumkin. Shuning uchun ushbu darsda biz stateda yana bir slaysni, sotuvchilar uchun qo'shamiz, ular aslida bizning ilovamizda mahsulotlarni qo'shadiganlar bo'ladilar.

Keling, mahsulotlar ilovamizni ochaylik va birinchi ish, biz parts papkasida yana bir sellers papkasini yaratamiz, bu yerda biz sotuvchilarga tegishli bo'lgan barcha kod va komponentlarni joylashtiramiz.

Endi, mahsulotlar bilan bo'lgani kabi, keling sotuvchilar uchun slays yarataylik. Boshlash uchun sellers papkasida sellersSlice.js faylini yaratamiz va unga createSlice ni import qilamiz:

import { createSlice } from '@reduxjs/toolkit'

Standart qadamlarni bajarishda davom etamiz. Slays uchun boshlang'ich qiymat sifatida to'rtta sotuvchi yaratamiz. Soddalik uchun ularning ikkita maydoni bo'ladi - id va name:

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

Quyida createSlice yordamida slays sellers ni yaratamiz, unga boshlang'ich qiymatni beramiz. Chunki biz keyinchalik sotuvchilarni qo'shmasmiz, yoki ularning ma'lumotlarini yangilamasak, demak reducers maydoni hozircha bo'sh qolsin:

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

Fayl oxirida olingan reducer ni eksport qilishni unitmang:

export default sellersSlice.reducer

Endi biz app papkasidagi store.js faylini ochishimiz va olingan reducer ni import qilishimiz kerak:

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

Va keyin uni configureStore da sellers uchun reducer sifatida tayinlang:

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

Talabalar ilovangizni oching. Yana bir teachers papkasini yarating, bu yerda sizda o'qituvchilarga tegishli kod fayllari bo'ladi. Undagi faylda teachersSlice.js faylini yarating. Dars materiallaridan foydalanib, unda teachers slaysini createSlice yordamida yarating.

Har bir o'qituvchi ma'lumotlar ob'ekti uchun uchta xususiyat bo'lsin: id, name (qaysi familiya va bosh harflarni o'z ichiga oladi, masalan 'Petrov A.V.') va fan (o'ylab topganingiz har qanday fan - fizika, matematika, biologiya va h.k.). Slays uchun boshlang'ich qiymat sifatida 3 ta shunday o'qituvchi ob'ektini yeting.

Olingan reducer ni teachersReducer ni store.js ga import qiling va uni darsda ko'rsatilgandek, teachers uchun reducer sifatida tayinlang.