Aula 17
Teste, Debug e Continuação da Implementação do Componente de React para Ver o Post
Summary
# Resumo do Teste do Post
## Análise do Erro
O teste do post iniciou com a injeção da propriedade `ID`, mas ocorreu um erro:
- **Erro**: `UnexpectedToken, expectedSemicolonIndex.js, linha 17 coluna 30`
- **Causa**: Uma falta de importação da biblioteca `Flasher`.
**Solução Proposta**:
- Remover a lógica que causava `Cannot read title of null`. O problema foi identificado na renderização do post, onde o valor inicial do post estava como `null`.
## Correção do Estado
1. O estado `selected` estava como `null`, impedindo o acesso às propriedades do post.
2. Sugestão: Certificar-se de que o post está definido antes de acessá-lo, usando uma verificação condicional.
## Implementação do Redux
- Para atualizar o estado no reducer:
- Chamar o `FEDPOST` com o `ID` necessário.
- Despachar a ação que retorna para todos os reducers.
- Adicionar um `case` no POST reducer para tratar a ação específica `FEDPOST`.
**Observações**:
- Sempre retornar um novo objeto no reducer para garantir a imutabilidade do estado.
- O estado não deve ser atribuído diretamente.
## Testes e Estilização
Após implementar as correções:
- O post carregou corretamente, mostrando os detalhes, embora sem estilo.
### Adição de Estilo
- Criar um estilo para o título:
```javascript
titleStyle = {
fontSize: 20,
fontWeight: 'bold'
};
- Implementar uma folha de estilos utilizando
StyleSheet
do React Native.
Próximos Passos
- Conectar as cenas para permitir a navegação.
- Implementar a funcionalidade ao clicar em um item da lista para redirecionar para o post detalhado.
O código e a lógica parecem estar em um bom caminho, e o próximo foco será a navegação.
Video Transcript
Agora vamos lá, vamos testar esse post de teus para ver se não tem erros.
Eu vou voltar para o app e a gente já tem um post de teus, mas a gente vai injetar a propriedade ID, né?
Eu vou botar talvez um, vamos ver.
Pode adicionar isso.
E vou para...
Falarizar... Ah, deu erro.
UnexpectedToken, expectedSemicolonIndex.js, linha 17 coluna 30.
Então vamos lá, do Actions, né?
17 coluna 30.
Ah, eu esqueci da Flasher.
Está aí.
Salvar...
Cannot read title of null, no render do post de teus.
Vamos lá.
Post de teus, render, not read title of null.
Ah, eu sei por que.
Por isso que fazendo esse negócio aqui estava meio...
Então, inicialmente, o post vai ser null, né?
Vai ser sempre null nesse caso.
Ou não, a gente não fez a ação aqui, está passada, mas não está...
Não modificou o estado no post reduce ainda.
Mas o problema é que inicialmente, selected está null.
Então é passado como a props para o post de teus, aqui, como essa propriedade chamada post.
E quando vier aqui, vai dar champagne post do desert props.
E nesse caso, vai ser null.
Aí quando você faz esse cara, vai dar null, né?
Vai dar null aqui.
Então, daí eu pau.
Então, o que a gente vai fazer?
Uma maneira, a gente só remover isso.
Ou eu posso mudar e pôr aqui.
Aí está fácil.
Solução foi fácil.
Só botar para o final, depois desse cara.
Porque antes, a gente não sabe se o post está definido.
Mas se esse cara aqui, se passar desse F, se não der certo,
significa que o post está definido.
Então, a gente pode acessar a variável.
Então, vou salvar.
Dá um refresh.
Qualizando.
Carregando.
E essa expectativa de estar carregando, porque a gente não...
O post está sempre null, né?
Nunca passa.
Por que? Porque a gente não modificou o estado dentro do reducer.
Então, vamos fazer isso?
Como a gente chama o FEDPOST?
Passe o ID, o ID, faz o pedido.
Pega a resposta, manda a resposta payload.
E despacha a ação com FEDPOST.
Mas vai para todos os reducers, né?
Você se lembra que no redux, quando a gente chama Action Creator,
o Action Creator retorna uma Action,
e essa Action é despachada a todos os reducers.
Então, dentro dos reducers, eles têm que ter um case, dar um switch,
e ter que dar um case no caso de que o reducer quiser fazer algo com a ação,
quiser responder essa ação.
Nesse caso, esse reducer só se importa com FEDPOST.
Não se importa com FEDPOST singular.
Então, a gente tem que adicionar dentro do POST reducers aqui.
A gente botar um case, FEDPOST, singular,
para lidar com aquela ação que foi despachada pelo FEDPOST.
Nesse caso, voltando a POST reducer,
no caso que eu pegar essa ação, o que é que eu vou fazer?
Eu vou retornar o estado como estava,
pega todas as propriedades do state e põe nesse novo objeto,
e passo também o selected, que vai ser o action.payload.data.
Porque você se lembra que o redux promise vai passar como o payload da action,
o response, e dentro do response, tem esse data.
E esse aqui é realmente o objeto que foi requerido ao servidor backend.
Esse que aparece no navegador aqui, essa JSON.
É o response.data.
Tá bom?
Vamos salvar.
Só um detalhe que eu não expliquei antes.
A gente sempre retorna um novo objeto.
Por um novo estado.
A gente nunca faz isso aqui.
A gente nunca define o estado de novo usando o sinal de igual.
Porque a gente quer que seja... Desculpa aqui.
O estado tem que ser imutável.
Tá bom?
A gente sempre tem que retornar um novo objeto, um novo estado.
Nunca define o estado de novo.
Sempre retorna um novo estado.
Então um detalhe.
Agora vamos ver.
Vamos testar.
Então deu carregando e apareceu os detalhes do post.
Não sei o que é título, não sei o que é conteúdo,
mas porque não tem estilo, mas funcionou.
Então vamos só adicionar esse estilo só para ficar melhor.
Vou a post de tail.
Eu quero que o título aqui tenha um estilo.
Vou criar um style.
Tital style.
Como eu estou adicionando esse estilo,
vou criar uma folha de estilos.
Aqui.
Styles.
Tem que ser o nome desse cara.
Vou usar um style sheet.
Passe um objeto com folha de estilos.
Um anda chave, style ou style.
Esse cara aqui.
Eu vou botar um font size, talvez 20.
Fonte weight.
Negrito.
Tá bom?
Agora se você notar, eu estou usando style sheet.
Então tem que importar.
Aqui react native, style sheet.
Tá bom? Importa o style sheet do react native.
Tá aí. Carregando e desse cara.
Se quiser adicionar esse estilo para o body também,
style.
Body style.
Adicione aqui.
Vírgula. Não se esqueça.
Body style.
Se aumentar a fonte, fonte size, talvez 14.
Vamos ver o que acontece.
É, mudou nada?
16.
Ah, tá melhor.
16.
Se quiser adicionar mais estilo, por favor.
Eu não vou focar nisso agora.
Então vamos continuar.
O que a gente deve fazer agora?
A gente fez o posto de tail, tá funcionando.
Tudo ok. A gente testou passando um id2.
Um, vamos passar um 3 para se mudar.
O que o que resta fazer?
Tá tudo ok.
É conectar as duas cenas, fazer algum tipo de navegação
que a gente, quando clicar no list,
quando clica,
vai para o post de tail.
Agora até agora,
não se esqueça.
Acontece nada.
A gente clicar.
Clica, acontece nada.
Então, na próxima sessão,
vamos ver como fazer.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: