ორი ძირითადი იდეა Redux-ში
სანამ Redux ბიბლიოთეკის შესწავლას დავიწყებდით, გავეცნობით მის ორ ძირითად იდეას. პირველ იდეას, რომელიც ეხება მდგომარეობის მართვას, განვიხილავთ ჩვეულებრივი მთვლელის მაგალითზე React-ის სტეიტზე:
function Counter() {
// State
const [count, setCount] = useState(0)
// Action:
function clickHandler() {
setCount(count + 1)
}
// View:
return (
<div>
<span>{count}</span>
<button onClick={clickHandler}>+</button>
</div>
)
}
ამ კოდში ჩვენ ვხედავთ სტეიტს
ცვლადისთვის count - ეს არის
სიმართლის წყარო მთვლელისთვის. შემდეგ ვხედავთ
მოქმედებას (action) - მოვლენას,
რომელიც მომხმარებლის კლიკზე იწვევს
სტეიტის განახლებას. და, ბოლოს,
წარმოდგენას (view),
რომლის საშუალებითაც ჩვენ ვაჩვენებთ
მომხმარებლის ინტერფეისს.
ამრიგად, სქემა საკმაოდ მარტივია:
ღილაკი იჭერს - სტეიტი count (State)
დაჭერის შედეგად (Action) იცვლება, შესაბამისად
იცვლება წარმოდგენა (View) - ჩვენს შემთხვევაში
ეს არის რიცხვი ეკრანზე.
თუმცა, ყველაფერი უფრო რთული იქნება, თუ ჩვენ გვაქვს მრავალი კომპონენტი, რომელმაც უნდა გამოიყენოს ერთი და იგივე სტეიტი. შესაძლებელია, რა თქმა უნდა, მაგალითად სტეიტის აწევა მშობელ კომპონენტებამდე, მაგრამ ასეთმა გადაწყვეტამ ყოველთვის ვერ მოგვაროს პრობლემა. Redux ამ შემთხვევაში გვთავაზობს, შევქმნათ ერთი ადგილი აპლიკაციაში, რომელიც შეიცავს გლობალურ მდგომარეობას და განსაზღვრულ ქცევის ნიმუშებს ამ მდგომარეობის განახლებისას. სწორედ ამაში მდგომარეობს პირველი ძირითადი იდეა (!).
მეორე იდეა დაკავშირებულია იმუტაბელურობასთან, ანუ მონაცემების უცვლელობასთან. თქვენ, რა თქმა უნდა, გახსოვთ JavaScript-დან, რომ მასივების და ობიექტების შეცვლა შესაძლებელია. მონაცემების უშუალოდ შეცვლა Redux-ში, ისევე როგორც სხვა ფრეიმვორქებში, ითვლება ცუდ ტონად და შეიძლება გამოიწვიოს წინასწარმეტყველებადი შედეგები. ამიტომ Redux-ში ჩვენი საწყისი ობიექტები და მასივები უნდა დარჩეს იმუტაბელური, და ჩვენ მხოლოდ მათი ასლების შეცვლა შეგვიძლია.
მოგვიყევით, რაში მდგომარეობს პირველი ძირითადი იდეა Redux-ის.
მოგვიყევით, რაში მდგომარეობს მეორე ძირითადი იდეა Redux-ის.