Redux აპლიკაციის მუშაობის განხილვა

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

პირველ გაშვებაზე ჩვენი აპლიკაცია ამოიღებს store-იდან ორი პროდუქტის სიას useSelector-ის დახმარებით და აჩვენებს მათ ეკრანზე. ეკრანზე ასევე ჩანს ფორმა, სადაც ჩვენ შეგვიძლია შევიყვანოთ ახალი პროდუქტის მონაცემები. როდესაც მომხმარებელი აჭერს შენახვის ღილაკს, მაშინ ღილაკის დამმუშავებელი გზავნის ექშენს productAdded, რომელიც შეიცავს ახალი პროდუქტის მონაცემებს, რომლებიც მომხმარებელმა შეიყვანა ფორმაში. ფუნქცია-რედიუსერი, რომელიც ჩვენ დავწერეთ პროდუქტების სლაისისთვის, იღებს ამ action-ს და ამატებს პროდუქტების მასივში ახალი პროდუქტის ობიექტს. Store-ი აცნობებს კომპონენტებს, რომ state-ში შენახული მონაცემები შეიცვალა. ჩვენმა კომპონენტმა ProductsList კითხულობს შეცვლილ მასივს, იწყებს რენდერინგს, რის შედეგადაც ჩვენ ვხედავთ სიაში დამატებულ პროდუქტს.

ახლა გავხსნათ Redux DevTools ბრაუზერში და დავამატოთ აპლიკაციაში კიდევ ერთი პროდუქტი, შემდეგ კი ვნახოთ Log monitor-ის ჩანართი, აქ ჩვენ შეგვიძლია დავინახოთ როგორი იყო ჩვენი state აპლიკაციის გაშვების დროს, და როგორ შეიცვალა, შენახვის ღილაკის აწკაპუნების შემდეგ, გამოჩნდა action. ჩვენ შეგვიძლია დავინახოთ მისი თვისება payload და ცვლილებები გლობალურ state-ში.

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