Дискусија за функционирањето на Redux апликацијата

На претходните часови ги имплементиравме сите компоненти потребни за функционирањето на Redux апликацијата. Ајде да ги сумираме и накратко да ги поминеме основните фази на работа на нашата апликација со производи.

При првото стартување, нашата апликација го вчитува од store листата од два производи со помош на useSelector и ги прикажува на екранот. На екранот исто така се прикажува форма, каде што можеме да внесеме податоци за нов производ. Кога корисникот ќе кликне на копчето за зачувување, тогаш обработувачот на копчето испраќа акција productAdded, која ги содржи податоците за новиот производ, кои корисникот ги внесе во формата. Функцијата-редуцент, која ја напишавме за слајсот со производи, ја прима оваа акција и го додава во низата со производи објектот со новиот производ. Store им кажува на компонентите дека податоците за состојбата (state) што се чуваат се променети. Нашата компонента ProductsList ја вчитува променетата низа, ја повикува функцијата за рендерирање, како резултат на што го гледаме додадениот производ во листата на производи.

Сега да ја отвориме Redux DevTools во прелистувачот и да додадеме во апликацијата уште еден производ, а потоа да ја погледнеме јазичето Log monitor, овде можеме да видиме каква беше нашата состојба при стартувањето на апликацијата, и како потоа, по кликнување на копчето за зачувување, се појави акцијата. Можеме да го видиме неговото својство payload и промените во глобалната состојба.

Во следното поглавље, подетално ќе работиме со податоците во нашата Redux апликација.