რედიუსერები Redux-ში

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

უნდა გვახსოვდეს, რომ რედიუსერებზე დაწესებულია რიგი შეზღუდვები. რედიუსერი ახლდებას მხოლოდ მიმდინარე state-ის და action ობიექტის მიღებული მნიშვნელობების საფუძველზე, შემდეგ კი წყვეტს, როგორ შეცვალოს state და აბრუნებს მის ახალ მნიშვნელობას.

ჩვენ ვიცით, რომ ნაგულისხმევად ობიექტები და მასივები JavaScript-ში მუტაბელურია (ცვალებადი). ასევე ვიცით, რომ state-ის პირდაპირ შეცვლა არ შეიძლება, ასეთ შემთხვევაში მხოლოდ ასლებთან უნდა ვიმუშაოთ. ამ წესს რედიუსერიც უნდა დაექვემდებაროს. მაგრამ ასეთი ლოგიკის ხელით დაწერა შეიძლება იყოს საკმაოდ დამღლელი და რთული საქმე, და აქ დახმარებას უწევს ფუნქცია createSlice, რომელიც იყენებს ბიბლიოთეკას Immer, რომელიც გარდაქმნის თქვენს 'მუტაბელურ' კოდს 'ნონ-მუტაბელურად'. ამრიგად, 'ცოდვა' და ცხოვრების გამარტივება შესაძლებელია მხოლოდ createSlice ან createReducer ფუნქციების გამოყენებისას.

რედიუსერის შეზღუდვებში ასევე შედის ასინქრონული ლოგიკის გამოყენება, შემთხვევითი მნიშვნელობების გამოთვლა და სხვა "side effect-ების" შესრულება. ახლა კი, რედიუსერთან დაკავშირებით, დავუბრუნდეთ ჩვენს პროდუქტების აპლიკაციას.

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

import productsReducer from '../parts/products/productsSlice'

ახლა ჩვენ შეგვიძლია რედიუსერად მივუთითოთ იმპორტირებული ფუნქცია productsReducer:

export default configureStore({
	reducer: {
		products: productsReducer
	}
})

ზემოთ მითითებული სტრიქონით ჩვენ ვეუბნებით ჩვენს store-ს, რომ ახლა action-ის გამოწვევისას state.products სლაისის ყველა მონაცემი განახლდება productsReducer რედიუსერის მიერ.

ახლა თქვენ შეგიძლიათ გაუშვათ აპლიკაცია (გაითვალისწინეთ, რომ კონსოლში გაქრა გაფრთხილება არავალიდურ რედიუსერზე!), გახსნათ Redux DevTools ბრაუზერში და გაისეირნოთ მის ჩანართებში. მაგალითად, State ჩანართზე დაწკაპუნებით Inspector-ის ჩანართში ჩვენ ვხედავთ ჩვენს ორ ობიექტს პროდუქტებით, რომლებიც გამოჩნდნენ როგორც საწყისი state-ის მნიშვნელობა აპლიკაციის პირველ გაშვებაზე. Log monitor-ის ჩანართზე ჩვენ ვხედავთ, თუ რა სლაისები აქვს გლობალურ state-ს - ეს არის products სლაისი, რომელიც მოიცავს ორ ობიექტს. ასევე ნახეთ Chart ჩანართი.

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

გაუშვით ბრაუზერში თქვენი აპლიკაცია და გაისეირნეთ Redux DevTools გაფართოების ჩანართებში.