Redux-da Slice qo'shish

Biz o'zimizning Redux ilovamizni yaratish uchun asosiy vositalarni tayyorladik, endi biz uning komponentlarini amalga oshirishga to'g'ridan-to'g'ri o'tishimiz mumkin.

Ushbu mashg'ulotda biz slice (slices) tushunchasidan boshlaymiz. Redux ilovasi store-da saqlanadigan bitta global holatga (state) ega. Bu holat slice-larga bo'linadi. Aslida, slice - bu ilovaning ma'lum bir qismi uchun boshlang'ich holat, reducer va action lar mantiqini o'z ichiga olgan do'konning (store) bir bo'lagi.

Bizning ilovamizda mahsulotlar mavjud bo'ladi, shunga mos ravishda biz yaratadigan birinchi slice, mahsulotlar haqida ma'lumotni o'z ichiga oladi. Shuningdek, slice yaratishda ushbu ma'lumotni qanday qayta ishlashni biladigan reducer ni qo'shish kerak.

Keling src papkasiga kiramiz va parts papkasini yaratamiz, so'ngra uning ichida products papkasini yaratamiz - bu erga biz mahsulotlarga tegishli bo'lgan kodli fayllarning hammasini joylaymiz. products papkasida biz productsSlice.js faylini yaratamiz, so'ngra unga RTK dan createSlice funksiyasini import qilamiz, uning yordamida biz slice larni yaratamiz:

import { createSlice } from '@reduxjs/toolkit'

Endi mahsulotlar uchun slice yarataylik va uni 'products' deb nomlaylik. reducers xususiyati uchun biz hozircha bo'sh jingalak qavslarni qoldiramiz:

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

Shuningdek, biz initialState ni - ilova birinchi marta ishga tushganda yuklanadigan state slice'ining boshlang'ich holatini aniqlashimiz kerak. Uni import dan keyin va slice yaratishdan oldin darrov yozamiz. Bu bir nechta mahsulot ma'lumotlarini o'z ichiga olgan ob'ektlar massivi bo'lsin. Har bir mahsulot uchun id, nomi, tavsifi, narxi va miqdorini ko'rsatamiz:

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

Fayl kodining oxirida biz funksiya natijasidan createSlice tomonidan yaratilgan reducer ni olamiz va uni eksport qilamiz. U bizga ilovaning boshqa fayllarida kerak bo'ladi:

export default productsSlice.reducer

Talabalar uchun mo'ljallangan ilovingizni oching. Unda darsda tavsiflanganidek studentsSlice.js faylini yarating. Unda createSlice yordamida students slice ini yarating. Slice ning boshlang'ich qiymati sifatida talabalar ma'lumotlarini o'z ichiga olgan bir nechta ob'ektlar massivi bo'lsin.

Har bir talaba uchun quyidagi maydonlarni yarating: id, ism, familiya, yosh va mutaxassislik.

studentsSlice.js faylining oxirida hosil bo'lgan reducer ni darsda tavsiflanganidek eksport qiling.