Um momento
Aula 09
Cursos / Introdução ao Redux com o React Native
Debug do Reducer, Action Creator, Chamada GET do axios e Instalação do Redux Promise

Summary

## Resumo da Transcrição

Nesta transcrição, o autor discute um erro relacionado ao estado no Redux:

1. **Erro Inicial**: O estado estava retornando `undefined` porque era necessário retornar o estado inicial, caso o estado não fosse definido. O redutor (`reducer`) deve sempre ter um argumento `state`.

2. **Implementação do State**: O autor menciona que o estado deve ser inicializado como vazio, se não houver um estado pré-definido. O retorno no redutor deve ser do `state`, que representa o estado da aplicação.

3. **Problema de Ação**: O problema seguinte está relacionado ao `action creator`, onde as ações precisam retornar objetos de ação. O autor menciona que, normalmente, deve-se utilizar middleware como `redux-thunk` ou `redux-promise` para gerenciar ações assíncronas, mas não desenvolveu esse ponto ainda.

4. **Remoção do Payload**: O autor removeu o `payload` e ajustou o retorno para evitar erros, garantindo que o `action creator` sempre retorne uma ação.

5. **Debugging**: O autor habilita o debug remoto no Chrome e inspeciona a aplicação no console. Ele verifica a resposta do Axios, que contém os dados desejados (um array com vários posts).

6. **Uso de Middleware**: Para lidar com a natureza assíncrona da solicitação de dados, o autor planeja usar o `redux-promise`, explicando que isso tornará a implementação mais robusta.

7. **Instalação do Redux Promise**: O autor conclui a mensagem mencionando a instalação do `redux-promise` como middleware e como integrá-lo ao Redux.

Assim, essa transcrição aborda desde erros iniciais até a configuração necessária para o uso efetivo do Redux em uma aplicação que faz solicitações assíncronas.

Video Transcript

Então a gente lê o erro aqui. Então, post return undefined. If the state passes to reducing undefined, you must explicitly return the initial state. Então, o estado inicial não pode ser indefinido, está dizendo. E isso porque eu esqueci do argumento aqui, que todo reduce tem que ter o argumento state, tá bom? E tem o action. Nesse caso, não precisa ter action, vai funcionar sem action. Então, vou deixar só o state, mas saiu que tem um action. Então, normalmente tem que retornar o state daqui. Eu estou retornando vazio, mas normalmente a gente inicializa. Inicia o state aqui para ser vazio, nesse caso. E a gente retorna o state. Então, o state é o argumento. Vai ser o application state, né? E a gente inicia por vazio, se não estiver definido ainda. E retorna o state do reducer. O state como está. Então, se eu salvar, vamos ver. Já deu ok, problema agora é em outro canto. Actions must return, must be playing objects. Ok, é o problema aqui, não, action creator. Que eu dei esse return, mas não... tem que ser sync. Não permite-me usar ae-sync actions, normalmente eu uso o chamado middleware. Pode ser redux promise, ou redux thunk. Mas eu não, ainda não expliquei o que é isso. Então, vou só remover isso aqui. E vou... botar... para fora desse actions get. Só para não dar erro. E vou tirar esse payload. Tá bom? Eu comentei o payload e dei o return return typefetchpost. Salva. Tá bom? Vamos ver. Tá, tudo ok agora. É porque o action creator sempre tem que retornar uma action. E não pode... por padrão, não pode ser dentro do negócio que não é sincronizado, assim. Porque vai dar um tempo para fazer esse pedido. E depois que pedir a promise é resolver, é que está retornando. Mas eu não aceito isso. Dá para fazer isso usando o middleware, mas a gente não chegou a esse ponto ainda. Então, vou deixar aqui. Só para ver, tá bom? Agora eu vou retornar aplicativo, está funcionando. Aí vou apertar comando D. E vou... habilitar o debug remote no browser. Abrir o meu Chrome aqui. Mejor do Chrome, vou apertar comando... Option ou Out. J. Agora, abrir o console aqui. Você pode dar um right click. Clicar com o botão direito do mouse aqui, se quiser. Ah, quer que eu cliquei no negócio aqui. E botar inspecto, para aparecer isso. Inspecionou, apertou. Ok. Então, você não é de que running application, sei o quê, tem um objeto que foi do console log. Na verdade, isso eu acho que esse console log dá a responsa do Axios. Vamos ver o que é que tem dentro. Vou clicar. Aí, tem o data, a propriedade data. E tem o exposto aqui. É um array com vários posts. E é isso que a gente quer ainda. Está tudo legal. Agora, como o Action Creator está fazendo esse pedido get e dá um demoro um pouquinho para obter a resposta, eu vou usar um middleware chamado Redux Promise para poder fazer o que eu queria antes. Esse negócio para pôr aqui e lá. E vai ficar legal com o Redux Promise. Eu chamar o middleware, a gente vai configurar e vai fazer isso legal. Vamos terminar, vamos instalar Redux Promise. Instala, Redux Promise. É o middleware. Ah, esqueci do dash, dash save, né? Vai ser adicionado a nossa Dependences do Package do Node. Tem um pouco. Vou dar aqui o Package JSON. Quase lá. Está esse lá lado. Redux Promise apareceu. Bom? Agora a gente tem que conectar, ter que adicionar esse middleware para o nosso Redux.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: