Redux-ში სლაისის დამატება

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

ამ გაკვეთილზე ჩვენ დავიწყებთ სლაისების (slices) ცნებით. Redux აპლიკაციას აქვს ერთი გლობალური სტეითი, რომელიც ინახება store-ში. ეს სტეითი იყოფა სლაისებად. ფაქტობრივად, სლაისი არის საცავის ნაწილი, რომელიც შეიცავს საწყის სტეითს, რედიუსერის და ექშენების ლოგიკას აპლიკაციის კონკრეტული ნაწილისთვის.

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

მოდით წავიდეთ საქაღალდეში src და შევქმნათ საქაღალდე parts, შემდეგ კი მასში საქაღალდე products - აქ ჩავსვამთ ყველა ფაილს კოდით, რომელიც ეხება პროდუქტებს. საქაღალდეში products ჩვენ შევქმნით ფაილს productsSlice.js, შემდეგ კი გამოვიყვანთ მასში RTK-ის ფუნქციას createSlice, რომლის დახმარებითაც ჩვენ შევქმნით სლაისებს:

parts/products/productsSlice.jsimport { createSlice } from '@reduxjs/toolkit'

ახლა მოდით შევქმნათ სლაისი პროდუქტებისთვის და ვუწოდოთ მას 'products'. თვისებისთვის reducers ჩვენ ჯერ დავტოვებთ ცარიელ ფიგურულ ფრჩხილებს:

parts/products/productsSlice.jsconst productsSlice = createSlice({
  name: 'products',
  initialState,
  reducers: {}
})

ასევე ჩვენ უნდა განვსაზღვროთ initialState - სლაისის სტეითის საწყისი მდგომარეობა, რომელიც ჩაიტვირთება აპლიკაციის პირველ გაშვებაზე. დავწეროთ იგი იმპორტის შემდეგ და სლაისის შექმნამდე. მოდით ეს იყოს რამდენიმე ობიექტის მასივი, რომელიც შეიცავს პროდუქტების მონაცემებს. მივუთითოთ თითოეული პროდუქტისთვის id, სახელი, აღწერა, ფასი და რაოდენობა:

parts/products/productsSlice.jsconst 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-ს და გავაექსპორტებთ მას. ის დაგვჭირდება აპლიკაციის სხვა ფაილებში:

parts/products/productsSlice.jsexport default productsSlice.reducer