Redux қолданбасының жұмысын талқылау

Алдыңғы сабақтарда біз Redux қолданбасының жұмыс істеуі үшін қажетті барлық құрамдас бөліктерді жүзеге асырдық. Қорытындылап, біздің өнімдермен жұмыс істейтін қолданбамыздың негізгі кезеңдерімен қысқаша танысайық.

Бірінші іске қосу кезінде біздің қолданба store-дан useSelector көмегімен екі өнімнің тізімін алып, оларды экранда көрсетеді. Экранда сонымен қатар біз жаңа өнім деректерін енгізе алатын пішін көрсетіледі. Пайдаланушы сақтау түймесін басқан кезде, түйменің өңдеушісі пайдаланушы пішінге енгізген жаңа өнім деректерін қамтитын productAdded экшенін жібереді. Біз өнімдер слайсі үшін жазған функция-редьюсер бұл action-ді қабылдап, өнімдер массивіне жаңа өнімнің нысанын қосады. Store компоненттерге state-те сақталатын деректердің өзгертілгенін хабарлайды. Біздің ProductsList компоненті өзгертілген массивті оқып, рендерингті шақырады, нәтижесінде біз өнімдер тізімінде қосылған өнімді көреміз.

Енді браузердегі Redux DevTools-ты ашып, қолданбаға тағы бір өнім қосамыз, содан кейін Log Monitor қойылымына қараймыз, мұнда біз қолданба іске қосылған кездегі state-тің қалай болғанын, содан кейін сақтау түймесін басқаннан кейін action-нің қалай пайда болғанын көре аламыз. Біз оның payload қасиетін және жаһалдық стейттегі өзгерістерді көре аламыз.

Келесі тарауда біз Redux қолданбамыздағы деректермен неғұрлым негізді жұмыс істейміз.