Discussão do funcionamento de uma aplicação Redux

Nas lições anteriores, implementamos todos os componentes necessários para o funcionamento de uma aplicação Redux. Vamos resumir e revisar brevemente os principais estágios de funcionamento da nossa aplicação com produtos.

Ao inicializar pela primeira vez, nossa aplicação recupera da store uma lista de dois produtos usando useSelector e os exibe na tela. A tela também mostra um formulário onde podemos inserir os dados de um novo produto. Quando o usuário pressiona o botão de salvar, o manipulador do botão despacha a ação productAdded, contendo os dados do novo produto que o usuário inseriu no formulário. A função redutora que escrevemos para o slice de produtos recebe esta action e adiciona um objeto com o novo produto ao array de produtos. A store notifica os componentes que os dados de state armazenados foram alterados. Nosso componente ProductsList lê o array modificado, aciona uma nova renderização, resultando na exibição do produto adicionado na lista de produtos.

Agora, vamos abrir o Redux DevTools no navegador e adicionar mais um produto na aplicação, e depois observar a aba Log monitor. Aqui podemos ver como estava nosso state quando a aplicação foi iniciada e como, após pressionar o botão de salvar, a action apareceu. Podemos ver sua propriedade payload e as mudanças no state global.

No próximo capítulo, vamos trabalhar de forma mais aprofundada com os dados na nossa aplicação Redux.