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