Um momento
Aula 09
Cursos / CRUD com o Redux (e React Native)
Resumo dos Conceitos de Redux

Summary

# Resumo do Vídeo sobre Redux

Neste vídeo, o autor revisita os conceitos fundamentais do Redux, utilizando um diagrama para facilitar a compreensão. 

## Estrutura do Redux

1. **Aplicativo**: Parte central que interage com o Redux.
2. **Action Creator**: Função que retorna uma **Action** (Ação). Quando uma ação é desejada, chamamos um Action Creator.
3. **Actions**: Ações são enviadas para todos os **reducers** no Redux.
4. **Reducers**: Funções que recebem as ações e atualizam a parte do **Application State** (estado do Redux). Somente reducers relevantes a uma ação executam lógica baseada no tipo da ação e retornam um novo estado.

## Fluxo de dados

- Quando um componente precisa dos dados (ex: lista de Posts), ele acessa via `this.props.posts`.
- O componente chama o Action Creator chamado **Fetch Posts**, que manda a ação **Fetch Posts** para os reducers.
- Apenas o Posts Reducer reage a essa ação e retorna o novo estado com todos os posts recuperados da API.
- O estado do Redux é injetado no componente por meio de **props**.

## Conexão com o Componente

- Utilizamos `mapStateToProps` para conectar o estado do Redux ao componente e injetar a propriedade **Posts**.
- O **mapDispatchToProps** permite usar o Action Creator no componente.

## Revisão final

- O fluxo é: chamar o Action Creator → retornar uma Action → despachar a Action para os reducers → reducers processam a Action e retornam o novo estado → o estado é refletido no aplicativo por meio das props.

Este vídeo é uma boa maneira de revisar os conceitos centrais do Redux, especialmente para quem está começando a entendê-lo.

Video Transcript

Neste vídeo a gente vai dar uma revisada sobre o Redux, tá bom? Então vamos lá com o meu diagrama aqui, se você fez no... Viu meus meus tutoriais em introdução ao Redux, você já reconhece ele aqui. Então a gente vai ter nosso aplicativo e do aplicativo, de qualquer parte do aplicativo, quando a gente criar... O que a gente quiser fazer uma coisa, a gente vai chamar o chamado Action Creator, que é somente uma função que retorna uma Action, uma Ação, tá bom? Essa Ação é disfarçada para todos os reducers, tá bom? O reducer é uma função que retorna uma peça, ou uma parte do Application State, o estado do Redux, tá bom? Então quando a Action é mandada a todos os reducers, somente os reducers que se importarem com aquela Ação, vão tomar iniciativa e fazer alguma coisa. Então, se for algo que seja importante para um certo reducer, o reducer vai retornar o novo estado, tá bom? Ele vai olhar no Type da Action, e vai fazer alguma coisa, retornar o novo estado, novo State. E esse estado vai ser refletido no nosso aplicativo, tá bom? Porque a gente vai injetar o estado do Redux via as Props, propriedades, tá? E por exemplo, no Posts, toda vez que a gente quiser acessar a lista de Posts, a gente vai só dizer vês.props.posts, você notar na list.js, dentro da pasta Components, que está dentro da S-R-C, a gente, inicialmente, quando o componente monta, a gente chama o Action Creator chamado Fat Posts, que é injetado também como a Props, tá bom? E esse cara vai pegar todos os Posts e pôr estar no estado do Redux. Tá bom? Porque o Fat Posts é um Action Creator que manda uma ação chamada Fat Posts, do tipo Fat Posts, que é despachada para todos os Reduxes, mas só o Posts Reducer, que isso importa, porque ele olha no Action Point Type, que é passado aqui ao Reducer, e olha no caso seja Fat Posts, ele retorna o novo estado, e seta todos os Posts, que eu chamei de All, para a resposta do servidor da API. Então, toda a vida que eu queria me referir a todos esses itens, eu só falo vês.props.posts, né? Você notar aqui vês.props.posts. E isso é injetado lá no final, quando eu dou o Connect, o Maps state to props, e o Maps dispatch to props, né? O Maps state to props conecta o estado do Redux, e injeta essa props chamada Posts no meu componente. O Map dispatch to props é usado para a gente poder usar o Action Creator dentro do nosso componente. Tá bom? Você notar aqui no Maps state to props, a gente dentro do componente, eu quero a propriedade de esse ponto props.post, que seja o state.post.all. O state é o estado do Redux, e vai aqui no Reducers, você notar em state.posts, porque a gente está pegando esse Posts aqui, que é a propriedade do Reducer combinado, né? E dentro do Posts tem o All, esse cara aqui, certo? All. Então, revisando novamente do aplicativo, chamamos o Action Creator, Action Creator retorna uma ação Action, que é dispachada a todos os Reducers. Os videos vão pegar a ação, olhar no tipo, se for importante, vão retornar ao novo estado, e esse novo estado será refletido no aplicativo, porque a gente injeta o estado do Redux via props, propriedades. Tá bom?
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: