Bespreking van die werking van 'n Redux-toepassing

In vorige lesse het ons al die nodige komponente geïmplementeer vir die werking van 'n Redux-toepassing. Kom ons som kortliks op en gaan deur die hoofstappe in die werking van ons produktoepassing.

Met die eerste lancering onttrek ons toepassing 'n lys van twee produkte uit die store deur useSelector te gebruik en vertoon dit op die skerm. Op die skerm word ook 'n vorm vertoon waar ons die data vir 'n nuwe produk kan invoer. Wanneer die gebruiker die berg-knoppie druk, dan stuur die knoppie se hanteringsfunksie 'n aksie productAdded uit, wat die data van die nuwe produk bevat, wat deur die gebruiker in die vorm ingevoer is. Die reduseerder-funksie, wat ons vir die produk-slice geskryf het, ontvang hierdie action en voeg 'n objek met die nuwe produk by die produk-array. Die store laat komponente weet dat die opgeslane state-data verander is. Ons ProductsList-komponent lees die veranderde array, veroorsaak 'n herlewerring, en as gevolg daarvan sien ons die bygevoegde produk in die produklys.

Laat ons nou Redux DevTools in die blaaier oopmaak en voeg nog 'n produk by in die toepassing, en kyk dan na die Log monitor-oortjie. Hier kan ons sien hoe ons state was toe die toepassing begin het, en hoe daar, na die druk van die berg-knoppie, 'n aksie verskyn het. Ons kan sy eienskap payload en die veranderinge in die globale state sien.

In die volgende hoofstuk sal ons meer grondig met data in ons Redux-toepassing werk.