Aula 09
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: