Resumo do Vídeo: Revisão da Introdução ao Redux
Este vídeo é uma revisão voltada para aqueles que não assistiram à introdução ao Redux, bem como para os que desejam relembrar os conceitos discutidos. Se você já se sente confortável com o tema, pode pular este vídeo.
Estrutura do Código
- O aplicativo em questão possui diferentes partes para Android e iOS, sendo que a maior parte do código fonte está na pasta
src. - Os arquivos
index.android.jseindex.ios.jssão pontos de entrada para as respectivas plataformas, levando ao componente principal do aplicativo.
Componentes Principais
- O componente inicial do aplicativo está localizado em
src/app. - Este componente configura a store do Redux e controla a aplicação, injetando a store no componente.
Roteamento
- O aplicativo utiliza o React Native Router Flux, que define as cenas ou rotas:
- Lista (
list) - Detalhes do Post (
post detail)
- Lista (
Estrutura de Pastas
O projeto é dividido em três pastas principais:
- actions: Contém os action creators.
- components: Contém os componentes da interface (ex: lista e detalhes do post).
- reducers: Contém as funções que retornam partes do estado da aplicação.
Action Creators
- O vídeo menciona dois action creators principais:
FATPOST: Para pegar todos os posts.FATPOSTcom ID: Para pegar um post específico.
Esses action creators retornam ações que passam pelo middleware Redux Promise, gerenciando pedidos assíncronos e enviando o payload após a resolução da promessa.
Reducers
- Os reducers retornam uma parte do estado da Redux Store.
- O
post reducercombina o estado inicial, que inclui todos os posts e o post selecionado. - Dependendo do
action type, o reducer atualiza o estado adequadamente, copiando o estado anterior e adicionando novas propriedades conforme necessário.
Conclusão
Este vídeo serve como uma rápida revisão sobre os conceitos fundamentais discutidos na introdução ao Redux. As partes do código e a estrutura do aplicativo foram apresentadas para os que não assistiram à introdução.
Muito obrigado!
Este vídeo vai ser vídeo, revisão para aqueles que não fizeram a introdução Redux e também para
os outros que quiserem relembrar o que aconteceu. Se você acha que já entendeu tudo, você pode
pular este vídeo. Então vamos lá. Agora aplicativo que a gente tem é este, mas a gente quer mudar para
este, mas agora eu vou só te explicar o que aconteceu quando a gente finalizou a introdução Redux.
Vamos ir para o código fonte, vou fechar este aqui, estou na minha parte daqui, vou abrir o átomo,
pode abrir qualquer editor de texto que você quiser. Então estou aqui, a gente só se importa,
a estrutura dos arquivos é assim, tem a parte do Android que são os arquivos para o Android,
a gente quase nunca muda, é só para o Android Studio. Tem a parte do iOS e aí é só os arquivos do
Android para o Xcode. O nosso código fonte na verdade vai ser dentro do pasta src, tá bom?
Senão adiquem que tem o ponto de partido do Android index.android.js e tem o ponto de
partido do iOS index.ios.js e eles são os mesmos arquivos, sem o mesmo conteúdo, é só um negócio
para dar o ponto de partido para o nosso aplicativo. Então ele dá um registro componente usando o app
do React Native e chama o app. O app é um componente que é feito que está dentro da
pasta src, aqui src.app é o componente inicial do nosso aplicativo e configura a store do Redux,
chama da application state e da Injeta.store com propriedade do componente de Auto Ordem
e o roteador, que é um arquivo que a gente fez, chamado router.js, que tem todas as cenas ou as
rotas do nosso aplicativo. Nesse caso, se você volta para o Sketch tem uma, duas cenas, a cena da lista
e a cena do ver post e estão aqui. Primeira cena é a list que eu chamo no inglês e a segunda cena
é a ver post que eu chamo de post detail, tá bom? Esse componente chama list, componente chamado post detail.
Isso aqui é parte do React Native router flux que a gente aprendeu a usar no introdução ao Redux, tá bom?
Então vamos aqui, tem três pastas actions, components e reducers. Os nossos componentes serão postas na pasta
e os componentes, tem o componente da lista, componente do item da lista e o tem o componente, a cena do post detail, tá bom?
Então esse aqui é a list e o list item é só um desses caras e esse outro aqui é o post detail.
Então tem um actions que vão ser os action creators, a gente vai dar um revisado no Redux no próximo vídeo, tá bom?
Então a gente tem o action creator chamado FATPOST para pegar todos os posts e tem também o FATPOST para pegar um post usando o ID, tá bom?
Esses action creators retornam uma action que na verdade vai passar pela Redux Promise que é um middleware, né?
Que a gente aplicou ao nosso app Redux Promise middleware para pegar o nosso pedido assíncrono e mandar o payload, a resposta, depois que o pedido for resolvido, né?
A promessa for resolvida.
Então aqui dentro dos reducers são os funções que retornam peças do estado, uma parte do estado, a application state, que é a Redux Store.
Em outras palavras, tem aqui combinamos todos no index, na verdade estamos pegando o post reducer, que esse cara aqui que inicialmente tem todos, ó, todos os posts, inicialmente base, tem o post que foi selecionado,
esse aqui é para cena de ver posts, inicialmente não, que não tem nenhum selecionado, tá aqui o reducer, a função, vai no action type, se for FATPOST retorna o estado,
copy o estado anterior e adicione a propriedade all que tem todos os posts, né, do payload.data.
Da mesma maneira tem o FATPOST que pega somente um post, retorna o copia do estado anterior com uma nova propriedade selected com o valor
foi dado pela resposta da API externa, tá bom?
E esse é uma revisada bem rápida, deu uma olhada no código para aqueles que não fizeram essa introdução Redux comigo.
Tá bom?
Muito obrigado.
Comentários
Entre para participar da conversa.
Carregando comentários…