Абмеркаванне работы Redux дадатка

На мінулых уроках мы рэалізавалі ўсе складовы, неабходныя для работы Redux дадатка. Давайце падвядзем вынік і коратка пройдземся па асноўных этапах работы нашага дадатка з прадуктамі.

Пры першым запуску наш дадатак здабывае з store спіс з двух прадуктаў з дапамогай useSelector і адлюстроўвае іх на экране. На экране таксама адлюстроўваецца форма, куды мы можам занесці дадзеныя новага прадукту. Калі карыстальнік націскае кнопку захавання, то апрацоўшчык кнопкі высылае экшэн productAdded, які змяшчае дадзеныя новага прадукту, якія занёс у форму карыстальнік. Функцыя-рэдьюсер, якую мы пісалі для слайса з прадуктамі, атрымлівае гэты action і дадае ў масіў з прадуктамі аб'ект з новым прадуктам. Store кажа кампанентам, што захоўваныя state дадзеныя былі зменены. Наш кампанент ProductsList счытвае зменены масіў, выклікае рэндэрынг, у выніку чаго мы бачым у спісе прадуктаў дададзены прадукт.

Цяпер адкрыем Redux DevTools у браўзеры і дадамо ў дадатку яшчэ адзін прадукт, а затым паглядзім на ўкладку Log monitor, тут мы можам убачыць які наш state быў пры запуску дадатка, і як затым, пасля націску кнопкі захавання, з'явіўся action. Мы можам бачыць яго ўласцівасць payload і змены ў глабальным стэйце.

У наступным раздзеле мы больш асноватворна папрацуем з дадзенымі ў нашым Redux дадатку.