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

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

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

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

У следећем поглављу ћемо темељније радити са подацима у нашој Redux апликацији.