CRUD com o Redux (e React Native)

Aprenda a usar o Redux para manter o estado do seu aplicativo.

CRUD com o Redux (c/ React Native)

React Native e Redux CRUD Introdução

```markdown
# Resumo da Série de Vídeos sobre React Native e Redux

Olá a todos, aqui é o NBK! Estou animado para apresentar uma nova série de vídeos focada em **React Native** e **Redux**. Nesta série, vamos aprimorar o aplicativo que desenvolvemos na playlist "Introdução ao Redux com o React Native" do meu canal no YouTube.

## O que foi feito anteriormente

Na versão anterior do aplicativo, implementamos uma lista de posts. Ao clicar em um post, o usuário era levado a uma nova cena onde podia ver o título e o conteúdo do post, com um botão para voltar. 

Aprendemos a utilizar o Redux no React Native para interagir com a API `JSONPlaceholder` (jsonplaceholder.typicode.com), especificamente com o endpoint `/posts`. O aplicativo foi desenvolvido para funcionar tanto em **iOS** quanto em **Android**, permitindo a navegação entre posts.

## O que vem a seguir

Nesta nova série, nosso objetivo é aprimorar esse aplicativo e implementar mais operações **CRUD** (Criar, Ler, Atualizar e Deletar). Estou ansioso para compartilhar este aprendizado com vocês!
```

Olá a todos, NBK tu to falando. Agora com a nova série de vídeos sobre o React Native
e o Redux. Nesta série de vídeos nós vamos aprimorar o aplicativo que a gente fez na
playlist Introdução ao Redux com o React Native do meu canal do YouTube. Se você lembra do
que a gente fez no aplicativo anterior a gente tinha uma lista de posts quando clicava em um dos
posts. Mudava de cena para ver o post com título e o conteúdo do post e tinha um botão de voltar.
A gente aprendeu como usar o Redux no React Native pela primeira vez para dar uma lida
no API que era a JSON placeholder.tipcode.com. A gente leu barra posts dessa API RESTful e a gente pegou
posts e posts no aplicativo tanto para o iOS como para o Android. Você vê aqui essa informação
que estava no navegador veio para o aplicativo. Por meio do Redux a gente está quando clica vai para
lá e vai para o post. Parece o título e o conteúdo também funciona no Android. Quando clica vai para lá
pode voltar e assim por diante. Nesta série de vídeos a gente vai aprimorar esse aplicativo e
terminar mais operações CRUD. Tá bom?


0008-01 Curso CRUD com o Redux & React Native [Aula Tutorial]

Visão Geral do Curso de CRUD React Native e Redux

# Resumo do Transcript sobre CRUD e API

## O que é CRUD?
CRUD é uma sigla que representa quatro operações fundamentais em aplicativos:
- **Create**: Criar registros
- **Read**: Ler registros
- **Update**: Atualizar registros
- **Delete**: Deletar registros

No aplicativo introduzido com Redux, foi abordado o **Read**. Agora, o foco será aprender a realizar as outras operações: **Create**, **Update** e **Delete**.

## Modificações na Estrutura do Aplicativo
- **Lista de Postagens**: A lista de posts continua, mas agora haverá um botão ou texto chamado **Novo** que leva a uma interface para criar um novo post.
- **Formulário de Criação**: Incluirá campos para título e conteúdo do post, além de um botão **OK** para criar o post e voltar à lista, e um botão de **Cancelar**.

## Edição de Postagens
- Ao clicar em um post, será possível acessá-lo para leitura. Daí, será avançado para uma tela de edição, que é semelhante ao formulário de criação, porém já preenchida com os dados existentes.
- Haverá também um botão para **Deletar** o post.

## API Utilizada
- O aplicativo inicialmente utilizou uma API fake chamada **jsonplaceholder.typicode.com**.
- Agora, a meta é desenvolver nossa própria API usando **JSON Server** com integração opcional ao **Heroku** para disponibilizar a API online.

## Testando a API
- Para testar a API, será utilizado o **Postman**, uma extensão do Chrome.
- Instruções para instalar o Postman e acessá-lo serão fornecidas, além de informações sobre como pular o registro para uso direto.

## Conclusão
Essas são as etapas e ferramentas que serão utilizadas para implementar o CRUD completo no aplicativo, incluindo a criação e teste de uma API personalizada.

Continuando, só para quem não sabe o que significa CRUD.
CRUD é a sigla que significa create, read, update, delete.
E essas são as operações mais comuns em quadros todos os aplicativos.
Sempre vai ser criar, a gente vai criar uns records,
vai dar uma lida e vai dar atualizada e vai deletar.
Tá bom, criar, ler, atualizar, deletar.
No aplicativo que a gente fez no introdução Redux, a gente aprendeu a read, o R do CRUD.
Mas agora a gente vai aprender o C, o U e o D.
Vai aprender a criar um novo post, atualizar um post já existente e a deletar post que já existe também.
Tá bom?
Voltando aqui para o nosso sketch, a gente tinha isso e agora a gente vai fazer assim.
Então, vai ter a mesma lista de posts, vai dar uma olhada no post, ver post,
mas agora também vão ter esse botão ou um texto chamado Novo que vai para a nova cena,
essa cena aqui, para criar um novo post.
Vai ter o título do post, caixa de texto e o conteúdo, com a caixa de texto maiorzinha.
Tem um botão OK, que vai criar um novo post e vai voltar para a cena da lista.
Note também que tem um botão de cancelar que vai dar no mesmo, desse botão de voltar,
que já é fornecido pelo React Native Router Flux, que é o módulo de navegação que a gente está usando.
Agora, quando você clica em um dos posts, vai para a cena de ver posts e você pode ter a opção de clicar editar.
Quando clicar editar, vai para a cena, que é quase a mesma coisa de novo de post,
exceto que você já tem o título e o conteúdo autocompletado do post aqui.
E também tem esse botão de deletar o post que vai ser usado para remover o post do banco de dados.
Tá bom?
Também botão cancelar e botão de voltar, que vai dar no mesmo, vai voltar para a cena anterior.
Só uma coisa que a gente vai fazer, quando clicar OK, a gente vai voltar.
Se for um novo post, clica OK, vai mandar e ir para a cena de lista de posts.
E se der um OK no editar, a gente quer voltar para a cena de ver posts.
Certo?
Agora vamos falar da API que a gente estava usando no nosso aplicativo.
A gente estava usando esse site aqui chamado jsonplaceholder.tipcode.com para usar esse fake API, API de REST.
E a gente usou a Wendpoint Barra Post que vai dar toda essa informação.
Mas esses caras aqui, você pode continuar os anos se quiser, mas o que a gente vai fazer é fazer o nosso próprio API,
para ter os nossos próprios dados, em vez de ter que depender dos outros, desse website.
Então a gente vai fazer o nosso próprio fake API.
Para isso a gente vai usar o JSON Server, o módulo do NPM.
E a gente, opcionalmente, vai dar um deploy para o Heroku, se você quiser que a sua API esteja disponível na web.
Ou você pode só trabalhar com o JSON Server localmente.
Eu vou ter o vídeo para você aprender a deploy para o Heroku, se você quiser, estiver interessado.
Então, outra coisa também que eu queria falar é que a gente vai ficar testando a API, por isso eu vou usar o Postman.
Postman é um aplicativo do Chrome, a extensão do Chrome.
Não sei se tem para os outros navegadores, mas a gente está usando o Chrome, então Postman vai aqui na loja do Chrome,
Extensions, Extensões. E adiciona o Chrome, por favor.
Postman é para a gente testar os endpoints da API, vou adicionar.
Aí vai estar aqui no Chrome Apps, toda vez que você vai abrir o Postman, você tem que ir para seus aplicativos.
Está aqui o endereço Chrome, dois pontos barra barra apps, vai abrir essa tela e você vai clicar em Postman e vai abrir a nova tela com o aplicativo, a extensão do Chrome.
Se você não precisa se registrar, é só clicar aqui, pular, sei lá, como vai ter em português para você,
clicar aqui no final para ir para o aplicativo diretamente sem criar uma conta.


0008-02 CRUD com o Redux & React Native

Uso do Cliente de REST Postman para fazer Requisição HTTP

# Resumo do Vídeo sobre como usar o Postman

Neste vídeo, é ensinado como utilizar a extensão do Chrome chamada **Postman** para realizar testes em APIs. O vídeo é direcionado a quem ainda não conhece a ferramenta. 

## Passos para Usar o Postman:

1. **Acessar a API**:
   - Utilize a URL da API, por exemplo, `https://jsonplaceholder.typicode.com/posts`, e cole no Postman.
   - Selecione o método **GET** e clique em **Send** para buscar todos os posts disponíveis.

2. **Obter Dados de um Post Específico**:
   - Para obter o post com `id = 2`, modifique a URL para `https://jsonplaceholder.typicode.com/posts/2` e clique em **Send**.

3. **Criar um Novo Post**:
   - Mude o método para **POST** e ajuste a URL para `https://jsonplaceholder.typicode.com/posts`.
   - Configure o corpo da requisição em formato JSON. Exemplo:
     ```json
     {
       "title": "Lamundo",
       "body": "Conteúdo do post"
     }
     ```
   - Lembre-se de definir o tipo de conteúdo como `application/json`.

4. **Verificar a Resposta**:
   - Após enviar a requisição, verifique o código de status e a resposta que deve conter o novo post criado com um `id` atribuído.

5. **Atualizar um Post**:
   - Para atualizar um post existente, mude o método para **PUT** ou **PATCH**, ajuste a URL para incluir o `id`, e forneça o corpo atualizado em JSON.

6. **Deletar um Post**:
   - Para deletar um post, altere o método para **DELETE**, e especifique o `id` do post a ser excluído.

## Observações:
- O vídeo enfatiza a importância de seguir a estrutura correta do JSON, como uso de aspas e a omissão de vírgulas após o último item.
- O exemplo utilizado é de uma API fictícia, que pode ter limitações, como não retornar postagens acima de um certo `id`.

### Finalização
O Postman é uma ferramenta útil para testar APIs e verificar o funcionamento dos métodos HTTP.

Se você já sabe como usar a extensão do Chrome chamada Postman, que está aqui, você pode pular esse vídeo.
Se não, você pode continuar. Então vamos.
Aqui eu vou te ensinar como usar essa extensão Postman para dar o pedir e usar API para testar.
Se tudo está ok, tá bom? Então vou tentar deixar esse pequeno aqui.
Primeiro eu vou tentar usar API que a gente estava usando para o aplicativo.
Vai para o JSON, para o tlaceholder.typcode.com.barrapost. Vou copiar.
Tá bom? E vou clicar aqui no Postman e vou colar a endpoint, a URL.
O pedir vai ser o get, então deixe get e manda send.
Então o get vai pegar todos os posts. Aqui vai aparecer aqui, só para testar sua API.
Tem também outros pedidos. Por exemplo, se eu quiser pegar o post somente os dados do post número 2 com id2,
vou adicionar o id2 ali e mando send e vai dar informações do post com id2.
Tá bom? Se você quiser fazer outros pedidos, por exemplo, fazer um novo post,
vai ser o semudo pedido para post, tá bom?
E aqui você vai no raw, ah desculpa, vai no post, ponha o rl, barra post, se for o resfo.
Aqui no body, ah desculpa, tem que ir para cima, eu estava lá embaixo, vai para cima, tá bom?
Vamos entrar aqui. Vai lá para cima, tem echa post, o rl, tem que autorizar, autorização os headers.
Body, vai no body, tá bom? No corpo, deu o pedido.
Em vez de formadeira e esse aqui vai no raw, que a gente vai aditar o JSON e clica em vez de testa,
vai ser JSON, JSON Application JSON, faz o JSON com o negócio do post, por exemplo,
Tyrol, vai ser o Lamundo e body, o corpo ou o conteúdo.
Isso é coisa. Quando estiver para parar, tudo bem.
Não se esqueça que isso aqui é o formato JSON, tem que ter as quotes aqui para chave,
para propriedade, tanto como na propriedade como na valor aqui.
E também não se esqueça que tem uma vígula e no final não pode ter vígula aqui, tá bom?
Porque é JSON, não é JavaScript, só JSON e dá o send.
Vou lá embaixo ver a resposta, tá bom? Que apareceu aqui embaixo.
Apareceu o status 201 criado, então deu certo, aqui é o tempo que levou e ele me dá de volta.
A resposta é o próprio post com o id já adicionado, tá bom? id 101, tá bom?
Esse é como faz o post, o método post.
Não confunda a palavra post aqui com o método HTTP.
Então se eu for de novo para o get, só para verificar, vai me dar 100 posts, não sei o que.
Eu não sei se essa API vai funcionar com 101, vamos ver.
Não está funcionando porque só é falso, né? Mas quando a gente faz a nossa própria API, vai funcionar.
Tá bom? Iria funcionar, esse botar 101 aparecia, aquele post que a gente fez.
Nesse caso não tem set 1, só vai ter 100 porque é uma API falsa.
E também tem outros pedidos, tem o put ou patch que é para atualizar e tem o delete que é para deletar.
Por exemplo, delete o post 100 com id 100, ponho id do post, pode delete, vamos ver qual é a resposta.
200 OK, código de status 200 OK, deu certo e não manda nada de volta.
Tem também o update, se você quiser, o put ou patch, você manda o id do post e tenta bem que botar no body, né?
A coisa que você quer atualizar.
Por exemplo, se eu já tinha aqui post esse negócio e eu quiser dar um put ou patch para atualizar esse post,
vou no body, mando o JSON, não se esqueça que tem que ter JSON aqui, e manda send e vai ter uma resposta.
200 OK, e tem a ideia que foi cê mesmo e atualizou com as coisas que a gente fez. Tá bom?
Então é isso como se usa o postman, muito útil para testar a API, para dar os redtappapi, como a gente fala em inglês.
Até o próximo vídeo.


0008-03 CRUD com o Redux & React Native [Postman]

API de Amostra com o json-server como Backend

# Resumo da Configuração do API para o Projeto ReactNerve

Antes de começar a trabalhar no front-end do ReactNerve, é necessário configurar a API, que pode ser feita localmente ou em um servidor como o Heroku. Para isso, foi criado um repositório no GitHub chamado "Fake RESTful API".

## Configuração do Ambiente

1. **Repositório GitHub**: O projeto está disponível em [GitHub - nbkhaope](https://github.com/nbkhaope/fake-RESTFLY.pi). É um serviço de API falsa similar ao JSON Placeholder.
2. **Uso do JSON Server**: O projeto utiliza o [JSON Server](https://github.com/typicode/json-server) para criar um fake back-end localmente. Para instalar globalmente:
   ```bash
   npm install -g json-server
   ```

## Passos para Configurar a API

1. **Clonagem do Repositório**:
   ```bash
   git clone https://github.com/nbkhaope/fake-RESTFLY.pi.git
   cd fake-RESTFLY.pi
   npm install
   ```

2. **Arquitetura do Projeto**:
   - O `package.json` contém as dependências e os comandos necessários.
   - O arquivo `db.json` contém dados iniciais, com posts que incluem um ID, título e conteúdo.

3. **Executando o Servidor Localmente**:
   - Para iniciar o servidor, use:
     ```bash
     npm start
     ```
   - O servidor funcionará em `localhost:3000` por padrão. Você pode alterar a porta configurando a variável de ambiente `PORT`.

4. **Testes com a API**:
   - Use ferramentas como Postman para enviar requisições GET e POST para a API.
   - Exemplo de um POST:
     ```json
     {
       "title": "Olá Mundo",
       "body": "Conteúdo do post"
     }
     ```
   - A resposta incluirá o novo post criado, confirmando que a API está funcionando.

## Notas Finais

- Caso queira usar o JSON Server sem o repositório criado, você pode instalar o JSON Server localmente ou globalmente e usar o comando:
  ```bash
  json-server --watch db.json
  ```
- Para rodar em uma porta diferente, configure a variável de ambiente `PORT` antes de iniciar o servidor.

Este resumo cobre os passos essenciais para configurar e usar a API fake para o projeto ReactNerve.

Antes de a gente trabalhar no front-end do ReactNerve do nosso projeto, a gente tem que configurar
nosso API, seja localmente como um em outro servidor ou como o Rerocool, tá bom?
Então, pra fazer isso, eu preparei um pacote aqui, módulo que está no GitHub chamado
o RESTful API aqui, se você for na minha página, GitHub.com.nbk.h.p.
Pai num repositories, ou repositories, e dá uma busca fake RESTful API, tá bom?
Esse cara aqui, e eu criei esse repositório pra gente usar no nosso projeto e vai fazer
uma API falsa, igual como a gente fez no JSON Plays Holder, mas em vez de a gente usar
o serviço deles, a gente vai criar nosso próximo serviço, seja localmente como no Rerocool.
Voltando aqui pro meu repositório, tem umas instruções aqui, mas a gente vai passo a passo, não se preocupe.
Então, os arquivos aqui, a gente vai usar um módulo chamado JSON Server, muito útil,
esse módulo JSON Server, que é pra fazer uma fake back-end localmente, tá bom?
JSON Server, se você interessa aqui na página deles, e vai ser a mesma coisa que aparecer
no esse tipo de code que a gente fez.
Se você quiser instalar globalmente NPM install, para a dash de JSON Server, tá bom?
Mas, o que é que eu fiz?
Eu adicionei esse JSON Server de um jeito que fica muito fácil de mandar pro Rerocool, tá bom?
Pra você ter a sua própria API, se eu te mostrar aqui, eu fiz o meu projeto no Rerocool, e...
aqui, minha API chamada RESTful API Pulse no Rerocool, se eu dá um OK,
mostra essa página e tem o post aqui que a gente quer que eu criei.
Tem um outro pouquinho, tá aí, a gente foi no barra post, já aparece no post que eu criei,
inicialmente, você pode usar o postman pra dar uns pedidos, por exemplo, vou copiar,
vou lá pro postman, cadê o meu postman? Chrome, apps, postman, abrindo postman,
pra dash da API, vai aqui, ponho get, método, manda send, funcionou aqui, tá bom?
Também pode dar o post pra criar post, por exemplo, post, clica no post, vai aqui em cima no body,
em vez de ter esse JSON, título, lá no mundo, body, não sei o que, só pra ver se funciona, vou dar send,
note que é o post, pedido o método, HTTP, e aqui pra essa endpoint, barra, post,
não confunda esse post com esse post, tá bom? Vou mandar, a resposta tá aqui embaixo,
vou rolar pra baixo, código 201, criado, tá ok? Me deu o novo post com id 3, tá bom?
Então foi criado, pra confirmar, vou mudar o pedido pro get, e vou mudar o send, e ver a resposta,
tem um id 1, id 2, e o id 3, que é olá mundo, não sei o que, tá bom? Tá funcionando aqui,
então seu senote também, se voltar pro browser, pra ver, é a mesma coisa, né?
Tá fazendo o pedido do get, seu atualizado tá aqui, então é por isso que a gente vai fazer esse fake api,
tá bom? Então pra fazer isso, vai lá no meu repositório, vai no gethub.com, barra, nbkhaope,
barra fake, RESTFLY.pi, tem esses efeis aqui no meio, dá uma clonada no repositório, clon,
clonar, copia esse cara, tá bom? Vai pro seu terminal lá, vai pro local que você quer aqui,
deixe api, vou dar getclon e bandouinderes, vai dar uma clonada, vou dar um ls já tá aqui, vou entrar, tá bom?
Tô dentro, vou dar o quê? NPM install pra instalar as dependências, morar um pouquinho,
gente, tem o package.json, que tem as dependências e comandos, vou abrir meu atomo só pra você ver os
arquivos que estão dentro desse projeto, esse módulo, né? Está aqui o package.json, que eu tava falando,
vou abrir esse script pra começar o servidor api, note que é dependência no json server, como
eu te disse antes, então esse cara index tá aqui, eu escrevi isso aqui pra poder funcionar no
comando, eu tô só usando o json server com a porta que vai ser setada, variável de environment,
que vai ser do seu computador, do seu terminal, não precisa entender muito o que tá acontecendo
aqui, basta saber que só tá rodando comandos de server e o banco de dados falso é esse db.json e a
porta vai ser 3 mil se a variável de environment de ambiente não estiver setada, tá bom? Vou pro db.json,
esse aqui é os dados inicial, senão tem um post, né? e tem uma coletânea de vários posts, 2 posts,
id1 e id2, cada post tem a propriedade de título e do, ou o conteúdo do post, tá bom?
Então, vamos lá rodar isso, vou lá pro terminal, a gente pode rodar localmente,
simplesmente da npm start, o da npm start vai rodar o comando node index.js, tá bom? Agora
não tem nenhum output, mas tá funcionando, tá bom? Não tem nenhum, nada na tela, mas funciona
se você for pra o seu navegador, vai no localhost, port, se não tiver o whole port set, você
tem que dar 3 mil, tá dando, parabéns, tá rodando o servidor e tem o barra post aqui, que
vai dar aqueles coisas que tinham no db.json, tá bom? Noite seu copyar esse cara, tô no db.json, vou
copiar, adiciona a vírgula, copiar esse cara id3, salvar e ver o que acontece no navegador,
atualizar, senote foi adicionado, tá bom?
E é assim, como roda o servidor localmente, note que se eu dar um echo na variável port,
não tem nada, mas se eu der export, port, pra ser algo diferente, 3.090, dar um echo de novo, 3.090
a port, e se eu rodar o npm start de novo, vai rodar na port, 3.090, voltar o browser,
se eu rodar isso não vai funcionar, mas se eu botar para 3.090, funciona, tá bom? E por isso que
eu adicionei no index.js essa linha aqui, e esse aqui é mais pra rodar no heroco, que a gente vai ver no
próximo vídeo como fazer, pra dar um deploy, tá bom?
Partido agora só vou dar uma nota, se você já pode pular pro próximo vídeo, mas se você quer
aprender só como usar o json server localmente, sem usar meu módulo, fique aí, tá bom?
Então, se você não quiser mandar a pay pro heroco e quiser fazer tudo localmente sem usar
a minha meu módulo aqui, você pode só instalar o json server globalmente, ou no seu próprio
projeto, assim, com uma dependência, talvez dependência de development, dev dependency,
dash dash save dev, essas coisas. Então, tudo que você precisa fazer, só dar um json server
com modo, ifm ifwatch, e o nome do arquivo da database, do banco de dados falsos, no meu caso
db.json, que tá dentro do meu módulo aqui, dentro da minha parte, né, db.json, é só dar isso,
json server watchdb.json, ah, o que aconteceu? A gente tava lá porque deu problema, desculpa,
vou fazer, não sei o que, permissão, acho, é de ouro de permissão, deixa eu ver de novo,
db.json, ah, desculpa, não dá, porque eu não tenho permissão nessa conta, mas se você
der tudo certo, vai funcionar, deixa eu só, eu já tenho esse cara aqui, o json server no meu módulo,
tá aqui, então, vou ter que digitar isso tudo, watchdb.json, que funcionou, tá bom? É porque eu não tinha
instalado globalmente, mas eu tenho aqui dentro da pasta node modules, tá bom, json, não preciso,
só substituir isso aqui com json server, tá bom, então você dá um watch na banco de dados, vai aparecer
esse output, que não aparece, você usa o modo, mas aparece aqui, e tá dizendo os resources, essas coisas,
tá bom? Aí vai funcionar, porta 3000, e tá lá, tá funcionando ainda, tá bom? Tá bom? Esse aqui,
vou apertar c, control c para parar, até o próximo vídeo.


0008-04 CRUD com o Redux & React Native [json-server]

Lançamento da API de Amostra para o Heroku

# Resumo do Vídeo sobre Rerocul

Neste vídeo, o apresentador ensina a lançar uma API falsa na nuvem usando o Rerocul. Se você prefere rodar a API localmente, não precisa assistir.

## Passos para Usar o Rerocul

1. **Cadastro**: Acesse [rerocul.com](https://rerocul.com) e crie uma conta gratuitamente.
2. **Documentação**: Consulte a documentação disponível para instruções sobre instalação.
3. **Instalação**: Instale o Rerocul e configure no seu terminal. 
4. **Login**: Utilize o comando `Rerocul login` junto com suas credenciais.
5. **Criação de Aplicativo**: Execute `Rerocul create` para criar seu aplicativo. Escolha um nome exclusivo.
6. **Verificação**: Comando `git remote` para verificar se o Rerocul foi adicionado corretamente.
7. **Deploy**: Execute `git push Rerocul master` para enviar os arquivos e realizar o deploy.

Após o deploy, use o comando `Rerocul open` para abrir sua API no navegador, que estará acessível em `seunome.Reroculapp.com`.

## Conclusão

O processo de lançamentos e deploy da API foi rápido e simples. A API agora pode ser acessada de qualquer lugar do mundo. O vídeo termina com a promessa de continuidade do projeto no próximo vídeo.

Este vídeo vai ser sobre Rerocul.
A gente vai aprender como lançar a nossa API falsa para a nuvem.
Se você não quiser rodar a API, lançar para a nuvem,
você quiser só rodar a API localmente,
você não precisa assistir este vídeo.
Para os interessados, por favor, continue.
Então, o Rerocul vai aqui, rerocul.com.
Pode se cadastrar, tudo de graça.
Depois se você cadastrar, você pode ler a documentação,
não sei o que, eu não vou te dizer como instalar,
mas você pode dar uma pesquisada aqui,
uma documentação muito boa deles,
como instalar o Rerocul command line também,
e como tem que o download para o iOS tem,
tem Windows e tem Ubuntu e essas coisas.
Então, você vai ter que instalar o Rerocul,
e depois que instalar tudo,
você pode ir no seu terminal, vamos lá.
E eu estou aqui no terminal do meu projeto da RESTful API,
que eu já tenho, tá bom, a fake RESTful API.
Você se lembra, gente?
Tem aquela fake.
Aqui, com o db.jatação,
e usa os JSON server como dependência,
e tem o script index,
que já tem tudo configurado para funcionar no Rerocul automaticamente, tá bom?
Então, o que eu vou fazer? Vou dar um Rerocul login,
entre as suas credenciais, o email e a senha.
Ah, desculpa.
Tá bom? Depois que dar o Rerocul login,
vai estar logado, tá bom?
Você dá Rerocul, create, para criar o seu aplicativo e dar o nome a ele.
Por exemplo, eu botei RESTful API Post,
nome no meu aplicativo.
Eu já create, tá bom? Por isso que aparece eu.
Name is already taken, dizendo que o nome já foi usado.
Mas se você botar o nome que não ainda não foi usado,
vai aparecer create, de tudo certo, tá bom?
Vou dar o get remote, vou dar esse comando do get,
para ver, verificar se o Rerocul foi adicionado aqui,
senote que está aqui, e eu já posso dar o lançamento,
o deployment, deploy in English, tá bom?
Então, vamos lá, get, push, Rerocul, tá bom?
E vai dar o master, tá bom?
Que é o branch master.
Quando dá isso, ele vai mandar os seus arquivos para o Rerocul,
o Rerocul já, já, de cara ver que é o aplicativo do Node.js,
não sei o quê, já configura tudo bem, rapidinho, sem trabalho nenhum,
já dá um deploy, né?
E já deu deploy, não sei o quê, terminou,
aí dá Rerocul open para abrir.
Vai abrir o seu navegador na página,
do nome de seu aplicativo, ponto Reroculapp.com.
Senote já está funcionando aqui, vou se clicar no post,
barra post está funcionando tudo legal, né?
Então, é muito legal o Rerocul, foi bem rapidinho para dar o lançamento,
o deploy, né?
Deployment da nossa aplicativo, nossa API.
E agora a gente pode usar de qualquer local do mundo, essa API,
tá bom?
E por isso é só para o vídeo,
e no próximo a gente vai continuar a fazer o projeto.
Então, obrigado.


0008-05 CRUD com o Redux & React Native [Heroku]

Início a Partir do Projeto Lista de Posts Redux e Atualização com o Xcode

# Resumo do Vídeo sobre API RESTful e Aplicativo com Redux

No vídeo anterior, foi lançada uma API RESTful para o Hiroko, acessível através da URL `seunome.hirokoapp.com/posts`. Para uso local, é possível rodar a API com o comando `npm start` em um projeto chamado "fake RESTful API" disponível no GitHub. Alternativamente, é possível utilizar o JSON Server com o comando `json-server --watch db.json`.

## Configurando o Projeto

O vídeo também aborda a configuração do projeto para aqueles que ainda não completaram o curso de introdução ao Redux. O projeto pode ser encontrado no GitHub ([github.com/nbkhope](https://github.com/nbkhope)), sob o repositório "lista de post API Redux". Para configurá-lo:

1. Clone o repositório com `git clone <link-do-repositório>`.
2. Acesse o diretório do projeto.
3. Instale as dependências usando `npm install`.
4. Atualize o projeto no Xcode ou Android Studio conforme necessário.

## Execução do Aplicativo

O apresentador demonstra como abrir o projeto no Xcode. Após abrir o arquivo `.xcworkspace` e aceitar possíveis atualizações, ele executa o simulador do iPhone com o comando `react-native run-ios`.

## Funcionalidades do Aplicativo

O aplicativo, já finalizado na série anterior, permite visualizar uma lista de posts. As novas funcionalidades a serem implementadas incluem:

- **Criar Novo Post**: Um botão que leva a uma nova tela para criar um post.
- **Editar Post**: Semelhante à página de novo post, mas pré-preenchida com os dados existentes.
- **Deletar Post**: Opção para remover um post da lista.
- **CRUD Completo**: O aplicativo passará a realizar todas as operações CRUD (Create, Read, Update, Delete).

O próximo vídeo abordará como configurar o projeto no Android Studio.

No vídeo passado a gente lançou a nossa API RESTful para o Hiroko.
Então se você der um lançamento e está no Hiroko, você pode acessar a API pela sua URL,
dependendo do seu nome aqui, ponto Hiroko app ponto com, para acessar as postas, barra postas.
Caso você esteja rodando a API localmente, você pode usar o comando NPM in Start no módulo
RESTful, fake RESTful API que eu fiz no GitHub.
Também pode usar JSON Server comando, ifm ifwatch db.json e vai rodar no seu API do mesmo
maneira localmente, tá bom?
Nesse caso eu não tenho comando global, por isso que não funcionou, mas se você dar NPM
Start no json server vai rodar.
Então vamos continuar, a gente agora vai lidar com o aplicativo.
Então se você lembra, se você fez o aplicativo, se você fez o aplicativo do
introdução ao Redux com React Native, a minha série de vídeos anterior,
você já tem o projeto e já dá para continuar, não precisa ver esse vídeo, tá bom?
Esse vídeo vai configurar o projeto para aqueles que não fizeram o introdução ao Redux.
Então vamos lá.
Então se você não tiver o projeto ainda, você pode ir para minha página do
GitHub, GitHub.com, barra nbkhope.
O nome da repositória é liste de post, se não achar aqui na página principal,
você pode clicar em repositores e dar uma busca, lista de post e foi Redux, essa aqui.
Tá bom?
Esse é o projeto finalizado do meu série de tutoriais chamada introdução ao Redux.
Então se você não tem, por favor clone aqui, copiar o link.
Deixa eu ver.
Vou dar um get clone aqui.
Eu só cheguei a casa já, tenho.
Não sei o que, não sei o que, ok.
Eu vou dar a get clone.
Mas se interesse, mas eu vou botar em outro direitório, tá bom?
Tá certo?
Eu dei outro nome, não precisa, se você quiser dar outro nome, para a parte da
só botar como o argumento final.
Então eu tenho aqui, liste de post api Redux, vou entrar lá, dar um ls aqui para
verificar todos os arquivos, para instalar todas as dependências,
digite npm, install, vai dar um tempo aqui.
Tá bom?
Às vezes os arquivos do Xcode e do Android Studio vão precisar de uma atualizada,
então o que eu gosto de fazer é abrir o próprio Xcode ou o Android Studio, abrir o
projeto lá e ele vai dar uma verificada e se tiver, requerir uma atualização,
eu aceito e salvo o projeto e volto para o meu terminal, tá bom?
Então provavelmente vai precisar fazer isso, então já vou abrir no Xcode,
no caso do iOS, tá bom?
Se você está usando o Android Studio, por favor, pule para outra parte,
vídeo próximo vídeo, tá bom?
Então vou continuar com o iOS, próximo vídeo Xcode, é o Android Studio.
Deixa eu abrir o projeto, abrir.
Então vou lá no lista de posts, como é que eu fiz?
Lista de posts API e dox e vou entrar na parte do iOS e abrir esse arquivo ponto Xcode proge.
A norte que a gente está instalando, as coisas aqui, então eu devia ter esperado.
Mas vamos ver, aqui da...
Você não acha que está indexando, processando os arquivos, não sei o que.
No Xcode, está a gente está usando aqui.
Tem um... esse negócio aqui que é uma alerta, ok, terminou aqui.
Tô com alerta aqui do projeto, não sei o que.
Atualize para as...
Recomendo série, então vou clicar aqui duas vezes, vou aceitar,
Transform Changes, para atualizar as coisas do projeto.
Não sei o que.
Processando.
Vai demorar um pouco aqui.
Depois só vou salvar o projeto e se você quiser já rodar o simulador daqui, você pode clicar nesse botão.
Eu não vou rodar daqui, vou rodar da linha de comando.
Usando o comando React Native Run iOS.
Deixa só ele terminar para eu fechar o Xcode.
Tá bom, fechei.
React Native Run iOS.
Launching iPhone, rodando o simulador do iPhone.
Vai demorar um tempo, se você quiser pular o vídeo um pouco.
Agora, vamos ver o que vamos fazer para o nosso aplicativo.
Você está vendo que a gente tinha isso.
Esse aplicativo que a gente tem, que foi finalizado com o curso de um vídeo,
que é o que é o que a gente tem que fazer.
Você está vendo que a gente tinha isso.
Esse aplicativo que a gente tem, que foi finalizado com o curso de introdução ao Redux do meu canal,
a gente fez uma lista de posts, quando você clica em um deles,
vai para outra cena, essa cena aqui, para ver o post, tem o título e o conteúdo do post.
Tem um botão de voltar que volta para essa cena aqui.
Agora a gente vai aprimorar o aplicativo, adicionar um botão novo,
que vai para essa cena para criar um novo post com título e conteúdo.
Um botão de OK que vai criar e voltar para a lista,
com o que vai aparecer o novo e tem na lista, post.
Tem também um botão de voltar e cancelar, que é a mesma coisa, só voltar para esse cara.
E dá ver post, se você criar em um e ver o post, pode editar.
Editar vai ser quase a mesma coisa da página de novo post.
Vai ter o título, tudo autocompletado.
Tem o OK que, quando clicar, vai voltar para ver post.
Ou pode deletar o post, que também, com deleto post, volta para a lista de posts.
Botão de cancelar e voltar para voltar a cena anterior.
Com isso, a gente vai fazer um CRUD com Plats.
A gente já tinha feito o R do CRUD e com esse novo, vai fazer o C.
E com o editar, vai fazer o U e com o botão dela, vai fazer o D.
CRUD, create, read, update, delete.
Só voltar ao terminal, para checar o que está aqui.
O semulador já abriu, então está tudo OK.
Funcionando direitinho.
Normalmente demora assim, porque tem que estar com a tela do navegador aberto para ficar rápido.
Se você não fica muito rápido quando eu tenho o debugger na mesma,
na mesma nível de tela que o semulador.
Então, está isso. Próximo vídeo será sobre o Android Studio.


0008-06 CRUD com o Redux & React Native

Uso do Android Studio para Abrir o Projeto de React Native

# Resumo do Vídeo sobre Android Studio e Redux com React Native

Neste vídeo, o apresentador demonstra como abrir e configurar um projeto no Android Studio, especificamente para um projeto de lista de posts utilizando Redux com React Native. A seguir, estão os principais pontos abordados:

1. **Abertura do Projeto**:
   - O apresentador abre o Android Studio e navega até a pasta do projeto clonado do GitHub, chamado "lista de posts Redux".
   - Ele seleciona a pasta do Android dentro do projeto e aguarda o carregamento do Gradle.

2. **Atualização de Arquivos**:
   - Menciona que abrir o Android Studio ajuda a atualizar os arquivos do projeto, o que evita problemas que podem ocorrer ao tentar rodar na linha de comando.

3. **Execução do Projeto**:
   - O apresentador prefere executar o aplicativo diretamente pelo Android Studio, selecionando um emulador ao invés de usar a linha de comando (`react-native run Android`), que ele encontrou problemas.

4. **Demonstração do Aplicativo**:
   - O vídeo mostra o aplicativo desenvolvido no curso de introdução ao Redux, onde é possível ver a lista de posts.
   - Ao clicar em um post, o usuário é direcionado para uma nova cena que exibe o título e o conteúdo do post.
   - O criador do vídeo explica as funcionalidades do aplicativo, incluindo a criação, edição e deleção de posts.

5. **Funcionalidades do CRUD**:
   - O aplicativo permite criar novos posts, editar posts existentes e deletar posts.
   - Há botões para navegar entre diferentes cenas e realizar essas ações.

6. **Finalização**:
   - O apresentador resume as funcionalidades do aplicativo e confirma que o Android Studio está funcionando corretamente após realizar as configurações.

O vídeo é um guia prático para desenvolvedores que desejam trabalhar com Android Studio e Redux, mostrando como realizar a configuração adequada antes de iniciar o desenvolvimento do aplicativo.

Este vídeo será sobre o Android Studio para abrir o projeto de post para configurar e deixar tudo certo para emular e começar a fazer o nosso projeto para aqueles que não tinham feito o projeto do introdução do Redux com react native do meu canal.
Vamos lá, eu abri o Android Studio aqui, abri, vou para a pasta, vou abrir aqui Open, abrir um projeto existente que já existe,
Eu abri o projeto que a gente clonou do GitHub, que é o projeto lista de posts Redux, não é?
Vou carregar um pouco, não sei porque está demorando, não é para demorar?
Está aí, então eu listo de posts a API Redux, é o nome que eu mudei da pasta e vou para a pasta do Android, Android, está bom?
Então só clicar na parte do Android e dar o OK. Esperar um pouco, vai abrir o Gradle que vai configurar e não sei o que, demora um pouco.
E eu gosto de abrir o Android Studio para atualizar os arquivos do projeto, às vezes só rodando react native, run Android, às vezes falem porque esses arquivos não estão atualizados,
Então por isso que a gente faz isso, só vai ignorar esse negócio. Vou esperar o Gradle que está dando um negócio aqui, esse norte no build running, esperar indexando, escaneando arquivos.
Deixa eu abrir e clicar aqui pro projeto, para abrir, clica no app, vou ver, só para verificar isso.
Então terminou, e para rodar o projeto, vou clicar no botão play, o run app, quase vou clicar aqui, não vou usar linha de comando porque para mim não funciona,
Quando eu uso linha de comando, o comando react native run Android para mim não funciona, então vou rodar do próprio Android Studio, vou escolher meu emulador, meu dispositivo, dar um OK, esperar aí.
Se você estiver configurado para rodar na linha de comando, vai dar react native run Android, é assim que a gente faz, da mesma maneira, análogo ao react native run iOS.
Meu caso, se eu rodasse isso, não, vai funcionar, já sei, talvez não configurações que eu não fiz direito, mas eu gosto de entrar no Android Studio.
Então vou só esperar aqui, ele vai dar no emulador, está abrindo aí, executando tasks.
Da mesma maneira que eu fiz no outro vídeo, vou mostrar para vocês o aplicativo que a gente está fazendo aqui, esse é o aplicativo que foi feito no curso introdução ao Redux com react native do meu canal.
A gente fez o listro de posts e quando cliquei em post, vai para cena, ver posts, tem o título e o conteúdo do post.
Se quiser voltar, clica aqui nesse botão que volta para cena anterior.
Nesse caso a gente fez o read do crud, create read, update delete.
Agora a gente vai fazer os rachos, a gente vai fazer o C, U e o D.
Então a gente já botou um botão novo aqui, que quando clicar vai para nova cena para criar um novo post com o título e o conteúdo.
Tem um botão OK, quando clicar OK, vai e volta para a lista e vai aparecer um novo item.
Tem um botão de cancelar e voltar, que dá no mesmo, volta para a cena anterior.
Se você clicar em um dos posts do título, vai para ver post, ver post tem o editar e você pode editar o post, vai para essa cena, que é quase parecido com esse novo post.
Tem o título e o conteúdo já auto completado, clica OK para editar e volta para a cena anterior.
Se quiser delatar, tem esse botão vermelho aqui, delata o post e vai delatar e ir diretamente para a lista de posts.
Tá bom, botão de cancelar e voltar da mesma maneira, voltam à cena anterior.
E vamos voltar ao Android, já completou, é Gradle e tá aqui.
Terminal, tudo funcionando, o aplicativo no Android.
Tá bom.


0008-07 CRUD com o Redux & React Native

Resumo do Código do Projeto Existente

# 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.js` e `index.ios.js` sã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`)

## 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.
  - `FATPOST` com 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 reducer` combina 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.


0008-08 CRUD com o Redux & React Native

Resumo dos Conceitos de Redux

```markdown
# 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.
```

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?


0008-09 CRUD com o Redux & React Native

Cena para o Novo Post e Roteamento com o Botão Novo

# Resumo do Transcript

Após muita configuração e revisão, o apresentador inicia a criação de uma nova cena chamada "Post New" para um aplicativo. A seguir, ele enumera as etapas para implementar essa cena, que incluirá um botão para direcionar os usuários a criar um novo post.

### Etapas Principais

1. **Criação do Componente:**
   - O componente é nomeado como `PostNew`.
   - Utiliza-se uma classe em vez de um componente funcional, pois é necessário integrar o Redux.

2. **Importação de Módulos:**
   - Importa o React e componentes específicos necessários do React Native.
   - Utiliza destruturing para simplificar o acesso aos componentes.

3. **Definição do Componente:**
   - Cria uma classe `PostNew` que estende `Component`.
   - Define a função `render` para exibir a interface do usuário.
   - Exporta o componente para uso em outros arquivos.

4. **Adicionando o Componente no Router:**
   - O novo componente é importado no arquivo `router.js`.
   - Define-se uma nova rota usando a função `sine`, especificando o título e o componente associado.

5. **Integração na Página Principal:**
   - O botão para acessar a nova cena "Post New" é adicionado à lista de posts.
   - Utiliza-se a propriedade `onRight` para definir a ação ao clicar no botão, permitindo que a cena mude para "Post New".

### Observações
- O apresentador menciona a documentação do React Native Router Flux, fornecendo um link para consultar mais sobre as propriedades úteis.
- Reforça a importância do uso de destruturing para evitar repetições desnecessárias ao referenciar componentes.

### Conclusão
O apresentador finaliza sua explicação com a expectativa de que as implementações realizadas estejam corretas e prontas para testes.

Depois de muita configuração, muita revisão,
a gente finalmente vai começar a fazer as cenas,
a nova cenas para o nosso aplicativo.
Então, eu gostaria de fazer essa cena para o novo post.
A gente vai adicionar o botão novo
e vai direcionar o usuário ao novo cenas
para criar o novo post.
Então, vamos lá e criar essa cena primeiro.
Vou lá no meu terminal aqui.
Só para abrir o texto editado no seu projeto,
vou usar o átomo.
Já abri aqui. Cadê?
Então, a gente vai...
Primeiro, vai adicionar o componente aqui.
Vamos ver que nome a gente vai dar.
Vamos dar novo post.
Talvez eu chame essa cena de post new, ou new post.
Você pode escolher qualquer nome.
Vou chamar de post new, tá bom?
.js. Esse vai ser essa cena aqui, esse componente.
Então, vamos lá.
Aperta o control, comando KB, KB, para tirar a tela,
a sidebar dali.
Vamos lá começar do zero para o componente import,
react, from react.
E aquela pergunta sai.
Componente de classe, componente funcional.
Eu vou usar a componente de classe,
porque a gente vai precisar lidar com o Redux, tá bom?
A gente vai chamar um action creator aqui.
Quando a gente clicar OK,
vai chamar um action creator que vai fazer o pedido para criar novo post.
Também temos esse formulário com título e conteúdo.
E a gente vai armazenar esses dados dentro do estado do Redux.
Então, também vamos injetar como props parte do estado do Redux,
que vai armazenar as informações desse formulário.
Então, vamos lá, aqui vou adicionar o componente,
o objeto component, que está dentro do módulo react,
por isso que estou dando destrutoramento.
Para aqueles que esqueceram ou ainda não entendem o que destrutoramento é,
por exemplo, se eu der import react, from react,
o que isso acontece é que eu posso usar o módulo react dessa maneira,
e toda vez que eu criar component,
quiser usar esse component, eu tenho que dizer react.component.
Mas se eu ficar...
Não fica muito...
Fica dá um cansaço, especialmente para outros tipos de componentes,
toda a vida tem que digitar isso, digitar isso, react.component.component.
Então, a gente faz o destrutoramento, destructuring, que é chamado, no inglês.
Então, é a mesma coisa que fazer react.component,
só em vez de dizer isso tudo, você pode pegar esse objeto
que está dentro desse objeto chamado react, do módulo,
e tirar para fora, extrair usando esses braces, né?
Essas chaves.
Então, quando você diz assim, from react,
está dizendo que você pega esse cara, extraia,
e toda vez que eu me referir ao component,
na verdade estou referindo ao component que está dentro do react.
Tá bom?
Então, se prosseguindo, import react e o component que está dentro do react,
extraído, vamos lá criar class,
o nome do component post new, extends component,
toda a vida tem que dar um inherit.
Tem que inherit from component, né?
E vamos lá definir a função render, que todo o component tem a função render,
e retorna o template, que é a visão que a gente quer mostrar ao usuário.
E no final, vou dar um export default, post new,
para disponibilizar esse component em outros arquivos.
Vou só por alguma coisa aqui,
o bom view, que é do react native.
Essa view é quando você for deve no react web, na HTML,
vamos importar porque a gente está usando,
e é parte do react native, e dentro do modo do react native,
então vou destruturar react native.
Se eu não tivesse o destructuring, essas coisas aqui,
eu teria que dizer todo o tempo,
react native.view, todo o tempo,
e você note que não é legal ficar digitando todo o tempo,
react native.view, se tivesse assim,
react native from react native, tá bom?
Por isso que é legal ter o destructuring,
então a gente não precisa digitar muito.
Não vivo botar também um texto,
só para ver se vai funcionar.
Adicionei o texto, que é um componente do react,
vou adicionar aqui no destructuring,
também é parte do modo react native.
Salva, vamos testar esse componente,
vamos adicionar ao roteador,
o que eu vou fazer, vou no router.js,
vou importar o meu novo componente, import,
qual o nome?
é post new,
post new, deixa eu expandir a tela,
post new from, cadê ele?
Está dentro da pasta component, do mesmo diretor,
então eu boto ponto barra,
components, barra, post new,
não precisa da extensão js, tá bom?
Quando importar, tudo bem, agora vai aqui,
adiciona a cena, tá bom?
Aqui, pode dar um sine,
isso é parte do react router flux,
react native router flux, tem um router,
tem um sine, sine é como se fosse a rota,
se você sabe o react router do react web,
é a mesma coisa que a route, tá bom?
Então, a sine vai ter a propriedade chamada aqui,
que vai ser o nome da função pra gente chamar
pra mudar pra essa cena, vou chamar de post new.
E o componente vai ser o componente que essa cena
se refere, post new, esse que é o nome que a gente importou.
E o título vai ser qualquer coisa que você quer
que apareça na barra de estar, de baixo da hora, né?
Você note que aqui,
você tem lista de posts, essa barra aqui,
que vai aparecer aqui.
Vamos lá, vamos mudar, ok, novo post.
Fecha o componente, salva, tá bom?
Tudo ok, agora vamos linkar a página principal,
lista, post new.
Dentro do list, vai...
aqui a gente tem que adicionar o que?
Note que tem que adicionar esse cara no lado direito,
né, da barra, como é que a gente vai fazer isso?
Então, se você não vai no react native router flux,
documentação tem dizendo como fazer
react native router flux aqui no github,
esse usuário axonove.
Eu vou ver se já tá aqui nos docs.
Não tem nada na página principal,
só vou te direcionar onde ver,
clique em API configuração.
E eu já sei qual é a propriedade,
propriedade é write title,
tô dando a busca, tá bom?
Esse aqui.
É o texto pra dizer mostrar no lado direito,
você também tem que definir o on right,
propriedade on right,
que vai ser o que a gente vai fazer quando a gente clica.
Então, vamos lá, on right, tá aqui.
Função que vai ser chamada quando o botão,
o lado direito da barra de navegação for pressionada, né?
Então, a gente vai fazer assim o write title e o on right.
Tá bom? Então, vamos lá.
Vamos voltar ao router.
E aqui no router, vai aqui no no post.
Deixa eu quebrar isso em multiplolins,
que vai ficar muito longo.
Vou usar o mesmo tempo aqui,
e alim esse closing, o final, fechamento com abrimento,
normalmente que eu faço.
Vamos adicionar lá, como é write title,
propriedade, vai ser o que a gente que aparece.
Então, vamos lá, o que a gente vai usar?
Pode usar novo, né?
E write, on right, né?
On right, vai ser a função que a gente vai chamar
quando clicar naquele cara.
A gente quer que mude de cena para o post new, né?
Ah, desculpa, eu fiz uma coisa errada aqui.
Senão, acho que eu estou usando post new,
na verdade quero usar o list, né?
Eu quero adicionar esse botão novo na lista de posts.
Não é no post, né?
Então, vamos desculpa aí.
Vamos aqui nessa aqui, tá bom?
Você tem que recortar esses caras aqui,
e adicionar a lista aqui.
Deixa eu só quebrar a linha, dar uma inetação.
Bom, então deixa eu adicionar antes de inetio.
Write title do list, tá bom?
List, não é novo post.
Write title do list, a gente quer botar esse para o palavra novo.
E a função vai ser a gente quer mudar de cena
para essa cena novo post.
Para fazer isso, vamos usar o actions do react near router flux.
Vamos mudar de cena, a gente chama actions,
o object actions, ponto o aqui, né?
Olha aqui da cena, que é post new,
nesse caso post new chama como sua função, e é uma função, né?
E isso vai mudar de cena.
Para usar isso, você tem que importar aqui,
como a gente não tem, vamos lá em cima.
É parte do react near router flux,
então está destruturado aqui actions,
vamos salvar, então vamos anotar.


0008-10 CRUD com o Redux & React Native

Reducer para o Formulário de Post

# Resumo do Transcrito

O conteúdo do transcrito é um guia passo a passo sobre como usar o Redux para criar um formulário de postagem em uma aplicação React, com foco na integração de um emulador iOS e Android. Aqui estão os principais pontos abordados:

## Objetivo
Criar uma nova postagem usando Redux e React.

## Passos Principais

1. **Emulador**:
   - O emulador iOS foi aberto e uma nova funcionalidade foi adicionada para interagir com o "Nova Center".

2. **Criação do Formulário**:
   - Proporcionar uma caixa de texto para título e conteúdo da postagem.
   - Definir um *action creator* para submeter a postagem.

3. **Redux State**:
   - Definir o estado inicial (`initialState`) do Redux, que deve conter `title` e `body`, ambos inicialmente vazios.

4. **Reducer**:
   - Criar um reducer (`postFormReducer`) para gerenciar o estado do formulário de postagem.
   - Utilizar *default parameters* do ES6 para facilitar a definição de funções.
   - Implementar um `switch` dentro do reducer para lidar com diferentes ações.

5. **Combinação de Reducers**:
   - Combiná-lo com outros reducers no arquivo de índice de reducers.

6. **Conexão com React**:
   - Conectar o componente de postagem com Redux usando `connect`, definindo `mapStateToProps` e `mapDispatchToProps`.
   - Desestruturar `title` e `body` a partir do estado do Redux para uso no componente.

7. **Testes e Debugging**:
   - Fazer testes para garantir que as propriedades estão acessíveis no componente.
   - Resolver erros como a falta de vírgulas, falta de importações e definições de funções ausentes.
   - Adicionar chaves adequadas em objetos para que as variáveis sejam corretamente atribuídas e substituídas.

8. **Conclusão**:
   - Após todos os ajustes e testes, o formulário de postagem é capaz de enviar e exibir o estado corretamente conectado ao Redux.

**Nota**: O processo envolve depuração cuidadosa e atenção aos detalhes nas definições de funções e estrutura de código. A funcionalidade foi confirmada com sucesso quando valores tentados foram exibidos corretamente a partir do estado inicial definido no reducer. 

---
Este resumo abrange os aspectos principais discutidos no transcrito, com foco em configurar um formulário de postagem em um aplicativo com Redux e React.

Vamos abrir nosso emulador iOS do Android para ver como a gente agora você note que
tem uma palavra nova adicionada no topo, a direita, tanto com um iOS como um Android,
você clicar e ele vai para Nova Center que é tudo legal no oposto que a gente tinha
feito, então está funcionando, está tudo ok. O iOS demora um pouquinho porque tem
que abrir o debugger, quando você abre o debugger do lado fica rapidinho, você note. Fica rapidinho,
clicar novo, entendeu? Vamos continuar a fazer essa nova post, post new.
Vamos olhar aqui no sketch, se não a gente vai precisar da caixa de texto para o título,
conteúdo, precisar chamar um action creator para submeter esse post, vamos pensar no
status redux, então vamos aqui, cadê o texto aditou? Eu vou adicionar o reducer,
tá bom? Eu quero esse reducer de formulário aqui para esse novo post, por exemplo. Eu posso chamar
talvez post form reducer ou form reducer, sei lá, depende de você. Vou chamar post form reducer,
no single lá, tá bom? Da mesma maneira que tem esse cara aqui, a gente vai definir nosso
original que vai ser, a gente vai ter que pensar no estado redux, a gente está armazenando o título,
vou chamar de title, está armazenando o conteúdo, vou chamar de body e quando a gente digita,
a maneira que a gente digita esse post, a gente vai atualizando o estado do redux aqui,
quando digita o título, quando digita o body do formulário, vai dar atualizada,
novo estado fica sendo enviado todo o tempo, então vou pegar esse cara aqui,
vou ter tudo o initial state, inicialmente o título vai ser nada para ficar vazio,
o título e o conteúdo vazio, tá bom? E vamos definir o reducer, da mesma maneira que a gente fez aqui,
export, default e a função, export, default, o reducer sempre tem como o primeiro argumento,
é o state e o segundo é o action, o state a gente inicializa com o initial state,
initial state, não esqueça que é a novidade do ES6, não tem no ES5, então a gente pode adicionar
parâmetros, padrões, default parameters, então vamos lá definir,
dar um switch no action.type, e vamos, a gente vai ter várias ações que a gente vai pensar,
tá bom? E vamos só por default para ser o estado, se não for nenhuma das ações do caso
que tiver, a gente só vai retornar o mesmo estado, o state que vai ser inicialmente esse cara vazio,
então a gente tem semicolon ali, ponto e vírgula, se, tá bom? Agora que a gente tem
o post reducer, post form reducer, vamos para o index do reducers para poder combinar com os
outros reducers, ponto e vírgula, põe o nome que você quiser para esse cara, pode ser post form,
vou colocar post form, post form reducer, não acho que eu estou usando o singular, não confunda que o plural
aqui não tem S, tá bom? Então a gente tem que importar como eu estou usando esse cara aqui,
vamos importar aqui em cima, import post form reducer, tá no mesmo diretório, ponto barra,
post form reducer, tá bom?
E agora a gente vai ter acesso ao reducer do post form,
tá bom? Continuando, vamos para o post new,
o que a gente vai fazer aqui, vamos conectar o react com redux, se lembra que sempre no final vai dar o
connect com chamo connect com map dispatch, map state props, função que a gente vai definir
e a map dispatch to props, né?
E passa o componente como o argumento aqui, nesse segundo parênteses aqui,
vamos lá definir map state to props, map state to props, função que tem o state como argumento,
tá bom? E a gente vai retornar o objeto e vai ser o que?
Vai ser as informações do post, então eu posso pegar o que? Vai ser state
ponto o que? Ponto post form, ponto título ou ponto bar, né? Ou ponto bar.
Vai ser esses dois caras que a gente vai conectar com redux, então como é que eu vou chamar ele?
Eu vou chamar esse cara de title, vou chamar esse cara de body, tá bom? Então vai injetar a propriedade
chamada title dentro do componente e a propriedade chamada body, então aqui a gente vai se refirir
as propriedades assim, des props um title e des props, ponto body, né?
Tá bom? Eu posso desduturar esse cara aqui pra não ter que digitar isso duas vezes,
assim, const title, body que tá dentro do state, ponto post form, tá bom? Então eu pego
state, ponto port form e eu extraio title, extraio o body, dessa maneira eu não preciso mais
digitar assim e como eu estou usando a versão esc do JavaScript, se eu tiver um objeto
a chave for o mesmo nome do valor, eu posso só tirar isso aqui e só deixar assim,
mesma coisa, tá bom?
Salva, agora a gente tem acesso como propriedade dentro do componente do title e do body, tá bom?
Você vai ver pra testar, eu vou botar um texto aqui, text,
só pra você ver outro text, o que que eu vou fazer? Inicialmente tá vazio, só temporariamente eu vou
voltar o reducer e vou botar uma coisa aqui, o Lamundo, muito tudo bem, salva, vou ao simulador,
reiniciar, a, o que que aconteceu? Um erro, force form reducer, linha 3, vou lá, um, dois, três,
eu esqueci a vírgula, tá bom? Vírgula aqui, salva, ok, outro erro, linha 6, coluna, 47, post form
reducer, linha 6, é dizendo o que? A next vector toca, não sei o que, eu esqueci da flash,
porque eu estou usando a função de flash, esqueci disso, salva,
ver aqui, connect is not defined, e agora o que que aconteceu? Vou te dar um tempo pra você corrigir
problema. E aí, você achou? Então vamos lá, connect not defined, porque a gente esqueceu de
importar o connect no post new.js, vai lá em cima, import, o connect que é parte do react redux,
tá bom? react redux tem o connect, salva, vamos lá tentar novamente,
map dispatch to props not defined, e aí, o que que aconteceu? Eu não defini map dispatch to props,
vamos definir, vamos map dispatch to props, pode só definir a função de flash vazia agora, tá bom?
Sem nada, salva, salva pra deixar aí, pra não dar mais erro.
Finalmente, depois de tanto debugging, ajeitar esses erros,
vamos lá pro novo, cliquei em novo, ah, o que que aconteceu? Map dispatch to props,
tem que retornar no seu que? Ah, por que? Porque a gente tem que retornar do map dispatch to props,
o que? Um objeto, uma espiritual plane object, não sei o que, senhora aqui do
post detail, foi isso, foi o outro listo, não é? Listo, tem um map to props,
tem que retornar, escar, não é ok? Bind action creators, bla bla bla,
no dispatch como argument, se você quer fazer isso, vamos lá, bind action creators,
boon dispatch, for mid user index, vota o post new, define, define o que? Return,
ah, na verdade eu acho que esse é o problema aqui, vamos ver, ele achou que esse cara era
uma definição da função em vez do objeto, deixa eu só ver, interessante,
né, funcionou, ele tava achando que eu queria retornar o objeto vazio, mas tava achando que
isso é na verdade uma função, né? Uma função que não tinha nada definido dentro, parecia que
você quer esse é o problema, então retorne um objeto sem nada, se quiser adicionar o bind
creators, eu vou deixar assim, aí retorna o objeto vazio, deixa eu só abrir o meu debugger aqui
para ficar mais rápido, clique no novo, senhora que tem despreparar, despreparar, e por que?
Eu esqueci de adicionar uma coisa para a variável, o valor da variável, substituir,
vou te dar um tempo aí para você ajeitar, e aí deu certo, achou? Então para consertar isso,
a gente tem que adicionar a chave, curly brace, inglês, senão o valor da variável não vai ser
adicionado, substituir, variável, adicionar, salvar, tá bom? Se não, pegado aqui,
vamos lá do, ah, depois clica novo, olá mundo, oi tudo bem, note olá mundo, oi tudo bem,
vocês acessaram, e eles são parte do reducer do initial state, que foi definido, o estado inicial
para o postform reducer, né, do postform reducer, então a gente quer inicialmente vazio,
a gente já provou que funciona, o estado do redux está conectado aqui via props,


0008-11 CRUD com o Redux & React Native

Mudança de Título e Criador de Ação

# Resumo do Vídeo

No vídeo, é demonstrado o desenvolvimento de um formulário para criar um novo post utilizando o React Native. O foco está na implementação do estado inicial do `postform reducer`, que inclui o título e o conteúdo do post. A seguir, são abordados os principais pontos:

## Estrutura do Formulário

- O formulário terá uma caixa de texto para o título e uma para o conteúdo, sendo que o conteúdo permitirá múltiplas linhas.
- Utilização do componente `TextInput` do React Native.
- Haverá um botão "OK" que fará uma requisição HTTP para criar um novo post.

## Implementação

- O componente de entrada de texto chamará uma função `changeText` que funciona como um action creator para modificar o título do post.
- O título e o conteúdo do post são gerenciados através de um estado conectado ao Redux.
- A ação de mudança do título será despachada e, ao ser recebida pelo reducer, atualizará o estado.

## Detalhes Técnicos

- A função `onTitleChange` será criada para lidar com a mudança do título, chamando o action creator `changePostTitle`.
- O reducer terá um case para tratar a ação `changePostTitle`, que vai atualizar o estado com o novo título.

## Problemas Enfrentados

- Um problema identificado foi que o valor do título estava sempre retornando como vazio, pois não estava corretamente injetado como props através do `mapDispatchToProps`.
- Foram feitas tentativas de depuração para resolver o erro e garantir que a conexão com o Redux estivesse funcionando corretamente.

## Considerações Finais

- Durante o desenvolvimento, foi solicitado que os espectadores se atentassem à versão do React Native utilizada (versão 36).
- O video finaliza com a necessidade de integração correta das ações e do estado para que o formulário funcione como desejado.

O vídeo é um exemplo prático de como conectar componentes de entrada a um estado gerenciado por Redux em uma aplicação React Native.

No vídeo de façado nós definimos o estado inicial para o postform reducer que tem o
título e o conteúdo de um post que vai ser adicionado.
Vamos clicar em clicar no novo post.
Deixe eu atualizar isso.
Voltando ao nosso wireframe.
Estamos aqui nessa cena.
Vamos ter uma caixa de texto para o título e para o conteúdo.
Note que o conteúdo tem múltiplas linhas.
Nós vamos usar o componente chamado text input do reactdiv.
Tem também o botão de ok que vai fazer um pedido.
Http create.
Post né.
Para fazer o novo post.
Volta a cena anterior.
Voltando aqui.
Dessa aqui é a documentação do reactdiv.
Todos anos.
Vestão 36 nesse vídeo.
Só.
Note cheese.
Pode ser que já tenha a versão mais avançada quando você estiver assistindo.
Então.
Não se esqueça.
Vestão 36 que eu estou usando.
E basicamente vai ser o teste input com duas props.
As props básicas.
Um e o value dele.
Vai ser um componente controlado que é chamado no y.
Voltando aqui.
Como é que vai acontecer o negócio?
Vou para o Comme post new dentro da pasta component da pasta src.
Então a gente vai ter o text input.
E quando você digitar alguma coisa vai chamar a função change text.
Essa função, o change text, vai chamar um action creator.
Isto é, vai chamar a função e essa função retorna uma ação.
O tipo de ação vai ser uma ação que modifica o formulário.
Nesse caso, para o primeiro campo, vai ser o modificar o título.
Vamos focar só em um.
E depois que a gente aprende a modificar o título,
vai ser a mesma coisa para o conteúdo, ou seja, o body.
Certo?
E quando a gente chamar o action creator, retorna essa ação,
que tem o tipo de modificar o formulário, o título.
Modificar o título.
Vai lá no reducer, reducer vai ver que é a ação do tipo modificar o título.
Vai pegar isso e retornar ao novo state.
O novo state vai ter o título que você digitou.
E esse cara aqui vai se tornar a coisa que você digitou.
Entendeu?
Por isso que esse cara aqui, o título,
que é injetado no maps.t2props,
que vai definir o value desse cara.
Na verdade, o desktop.props.tidal vai definir o valor do hashtag input.
Certo?
Certo?
Porque o maps.t2props está conectando o application state,
estado do aplicativo,
postform, formulário, os dados do formulário que é o título e o conteúdo.
Certo?
Então,
para a função aqui,
onChangeText, vamos criar uma função desse.
OnTidalChange.
Certo?
Vamos aqui criar onTidalChange.
Nessa função aqui, a gente vai chamar a cria.
Não criamos ainda, mas eu vou, por exemplo,
vou dar o nome de change.
ChangePostTidal, por exemplo.
Com o título,
você editou.
Certo?
Com um argumento aqui.
Esse cara vai chamar esse cara, que chama o action creator.
ChangePostTidal, que ainda não definimos,
mas esse cara vai retornar a novação, que vai lá para o reducer.
E o reducer vai retornar ao novo estado com um novo título.
Certo?
Agora, vai ter problema com o bind aqui?
Vamos ver.
Vamos dar um console log para ver se esse cara funciona.
Título modificado com esse title aqui.
Vamos ver se funciona.
Salvar... Ah, esse cara não está definido, então vamos importar aqui.
TextInputToReactNative.
Dá um refresh.
Não tem caixa de text, porque não tem nenhum estilo.
Vamos aqui quebrar a linha.
Fica melhor de ver.
Vamos botar height.
Vamos botar height 40,
para ver se que acontece.
Se dá para ver alguma coisa.
Está vendo aqui.
Você da not que digitei alguma coisa?
Cadê o meu debugger?
Vou abrir o debugger aqui.
Ah, vou vender aqui.
Eu não defini apostar ou undefine, então vamos lá voltar.
Só comentar isso. Desculpa.
Vamos ver o console aqui.
Você da not que eu digitei?
A tecla que eu digitei aparece, modificado no seu key,
mas ele volta para ficar vazio porque está conectado o valor ao título do Redux,
do application state, que é sempre vazio.
A gente tem que achar uma maneira de quando a gente mudar o texto,
vai mudar esse cara dentro do estado do Redux.
Para isso a gente vai fazer esse cara aqui.
Vamos definir esse change, post title.
Vamos lá para o index, do actions, ações,
barra index, vamos lá para baixo, fazer uma função,
change post title,
ações de flash.
O argumento vai ser o título, title, que na verdade é o texto que você digita,
e vamos retornar uma ação.
Return.
O tipo vai ser o quê?
Vamos chamar de change post title.
Você pode nomear como quiser.
payload vai ser o título, certo?
Esse cara manda essa despachação,
o reducer tem que pegar, dar um case aqui,
change post form.
Se o reducer ver que essa ação foi despachada,
ele vai retornar um novo estado, um object.
Copia o estado anterior,
copia as propriedades do estado anterior usando o spread operator,
operador de spread, vai copiar cada um desses caras.
E define o novo nova chave aqui,
novo valor para coisa, para o título.
Desculpa, esse aqui é change post title.
E nesse caso, title vai ser a coisa action.payload.
Certo?
Eu usei payload aqui, mas você pode usar título também.
Depende de você, eu gosto sempre de usar payload,
mas não precisa de ser payload para coisas que você envia ao reducer.
Então, title vai ser action.payload.
Vamos testar, voltando aqui, salvar tudo.
Clica novo.
Clica novo.
Change post title, and define.
Por que? Eu não injetei como props o change post title usando o map dispatch props,
não tem nada aqui.
Certo?
Então, vamos retornar o quê?
Change post titles.
Vamos injetar change post title dentro como props para o componente.
Na hora de que eu vou usar esse aqui, vai ser importado lá em cima.
Como tem o mesmo...
O propriedade de valor tem o mesmo nome, eu vou deixar assim.
Vou lá em cima importar.
Change post title.
Da onde? Pronto.
O nível acima, dois pontos.
Barra actions.
Como o arquivo já é index, é opcional digitar index, não precisa.
Vamos ver.
Será que eu mandei esse cara aqui?
Map dispatch está aqui e não funcionou. O que será?
Dois ler propriedade de valor.


0008-12 CRUD com o Redux & React Native

Problemas com o This e Solução com o bind

# Resumo do Transcript

O vídeo aborda a implementação de `mapDispatchToProps` no React usando Redux. Aqui estão os principais pontos discutidos:

1. **Uso do `mapDispatchToProps`:**
   - O `mapDispatchToProps` pode ser passado como um objeto ou como uma função.
   - Quando usado como função, é necessário retornar `bindActionCreators`.

2. **Importação do Redux:**
   - Importação do `bindActionCreators` do Redux para utilizar nas funções de ação.

3. **Exportação de Ações:**
   - A função `changePostArrow` foi definida, mas não exportada. Foi enfatizada a importância da exportação para uso em outros arquivos.

4. **Problemas de Binding:**
   - O autor discute problemas de binding, detalhando que o `ownChange` do `textInput` está incorreto, referindo-se a objetos indesejados.
   - Uma solução rápida foi sugerida, mas foi mencionado que normalmente não é recomendado fazer bind dessa maneira.

5. **Uso do Constructor para Binding:**
   - O autor demonstra como fazer o binding no construtor, movendo a lógica para a função `constructor`.

6. **Property Initializers (ES6):**
   - Apresentação da nova abordagem usando inicializadores de propriedades (property initializers) com funções de flecha (arrow functions) que automaticamente bindam o contexto adequado à instância da classe `PostNew`.

7. **Verificação Final:**
   - Após implementar as soluções, verificou-se que tudo estava funcionando corretamente.

Esses passos ajudam a entender a manipulação de ações no Redux e a evitar problemas comuns de binding em componentes do React. O vídeo também sugere referências adicionais para entender melhor as funções de flecha.

Ok, então nós temos que adiantar algumas coisas aqui, o primeiro de tudo vamos dar uma olhada aqui no mapDispatchToProps
MapDispatchToProps que é passada como segundo parâmetro para o connect
Tem duas maneiras de passar as funções actionCreators usando mapsDispatchToProps
A primeira maneira de usar a função, a função tem que dar um return com bind actionCreators
Sendo chamado aqui, outra maneira é fazer o mapDispatchToProps como um objeto com o changePostArrow aqui
Então há duas maneiras, esse aqui é um deles e esse é outro deles
Para ilustrar esse foi primeiro comentar esse, essa primeira coisa a gente tem que ajeitar
Adiciona bind actionCreators, vamos lá em cima importar do Redux
Import, então Redux, certo?
Agora outra coisa aqui, voltando a WinDex dentro da Actions
Nós definimos changePostArrow mas não exportamos, export essa função para ser disponibilizada em outros arquivos
Volta no PostNew, corrigimos o mapDispatchToProps, esqueci também do dispatch, desculpe que é o segundo parâmetro aqui para o bind actionCreators
Bind actionCreators, os actionCreators que queremos injetar e o dispatch
Dispete sempre o argumento dessa função do mapDispatchToProps, nesse caso
Salvar, certo? Então ele faz o menos problema do mapDispatchToProps e exportamos o actionCreators
Agora vai ter problema do binding, senote que o ownChange do textInput chama essa função
Vamos dar um console log da palavra chaveDs, dá um console log para ver o que significa isso
Voltando aqui ao terminal, novo, desculpe, clica no, digita alguma coisa
O que é esse objeto? Tem o ownChange, o styleOwnChange, o ownTiralChange e o styleHideFamilia
Esse cara aqui está se referindo ao textInput, mas isso não é o que a gente quer porque a gente dá o desmontoProps
E quer se referir às props do PostNew, então está errado, por isso a gente quer dar um bind, bind é o problema de binding
Então vamos lá, vamos comentar isso para resolver de maneira rápida, ponho bind dessa aqui
Certo? Plalizar novamente
Existe alguma coisa, agora está dando um console log do verdadeiro PostNew, que a gente quer
O PostNew tem umas props, certo? A gente postar esse por diante
Essa maneira resolve o binding de maneira rápida, mas pessoal geralmente não recomenda fazer bind aqui
Normalmente, o pessoal dá o bind no constructor, vou demonstrar aqui essa maneira de dar o bind no constructor
Em vez de dar aqui, você corta isso, faz uma função defineConstrutor, constructor, constProps
Chama o super com props e aqui faz o bind, this.ontTiralChange vai ser igual a this.ontTiralChange.bindDesse
Isso é? Salva
Vamos novamente ver se o bind está correto da palavra chave des
O que é isso? Certo? Está correto
Então a maneira de resolver o bind no constructor normalmente põe todos os binds aqui depois do super com props e depois define o estado inicial
Se não estiver usando redux e essas coisas
Certo? Tem também outra maneira de resolver esse problema sem dar o bind aqui
Essa maneira é usando property initializers, que é além do s6
Não veio no s7, mas vai vir depois, provavelmente, já disponível com o babo e isso em por diante, vou demonstrar como usar aqui
Em vez de ter esse constructor, deixa eu só recortar isso
Você vai definir o ontTiralChange com a função de flecha
Esse cara é um property initializer com a função de flecha
Você está combinando a função de flecha com o property initializer
Dá para fazer isso aqui e a função de flecha
Com a função de flecha, no contexto da palavra chave des, não é definido pela função
É definido pelo elemento que encobre essa função, nesse caso postNew
Então o des vai ser ferir a postNew
Certo? Você pode ler mais a respeito da error function, função de flecha, na MDN
Para saber por que isso acontece
Agora vamos testar
Está correto
Então vou deixar esse bind assim, se você quiser usar o constructor, pode usar também
Vou voltar o modelo e está isso
Vou retornar esse cara
Vamos ver se não tem mais nenhum problema
Deixa eu remover isso também
Deixa aqui salvar
Novo
Certo? Agora está funcionando bem direitinho


0008-13 CRUD com o Redux & React Native

Formulário para Criar um Post

```markdown
# Resumo da Transcrição

Na transcrição, a discussão gira em torno da implementação de um título e conteúdo em um aplicativo. O apresentador menciona a necessidade de adicionar um "LABEL" e de se concentrar na funcionalidade ao invés do estilo. 

## Passos Sugeridos:

1. **Adicionar um LABEL**:
   - O título deve ser adicionado com um estilo de **negrito**.

2. **Implementação de Funções**:
   - Criação de uma função chamada `body change` para alterar o corpo do texto conforme as modificações realizadas.
   - Uso de `console.log` para verificar se as modificações no corpo do texto estão sendo capturadas.

3. **Configuração do estado**:
   - É mencionado que o estado deve ser atualizado ao fazer alterações no `body` do post.
   - A função deve ser importada e mapeada corretamente para estar disponível.

4. **Debugging**:
   - O apresentador encontra dificuldades ao tentar registrar as alterações e identifica a ausência de um caso no `reducer` para manejar a ação `Change.Post body`.

5. **Aprimoramento do Input**:
   - Para permitir mais linhas de conteúdo no input, é sugerido o uso de propriedades como `multi-line` e `number of lines` na configuração do campo de texto.

## Observações Finais:
A transcrição destaca as etapas de implementação e a importância de seguir a documentação para garantir que as funcionalidades do aplicativo funcionem corretamente.
```

Vou voltar o
TITULO aqui, a gente vai fazer
CONTEUDO.
Antes disso, vamos só adicionar um
LABEL aqui, botar o TEST, TITULO, vou voltar o
WIREFRAME só para lembrar como é que vai ser TITULO.
Aqui.
So jet, está aí.
Está aí.
Acho que não estou focando muito no estilo.
Queria que você faça o seu próprio estilo.
Então vou colocar mais na funcionalidade de tudo.
Vou ensinar um style aqui, inline.
Volt wait, bold.
Faça o seu próprio estilo.
E aí.
Cain novo.
Se pode, acho.
Podemos botar um bold aqui.
Oral width.
Quatro.
Entendeu?
E assim por diante.
Então vamos fazer o...
Conteudo.
Negrito, da mesma forma, para adicionar text input.
Tido que você quiser.
O que é principal, one change text.
Vamos fazer esse um.
Body change.
Outra função.
Valor vai ser...
Body, esse cara aqui.
Body, esse cara aqui.
Quase a mesma coisa, vamos definir um body change aqui.
Vamos body change.
Body.
Text.props.change.
O que?
Body. Post body.
Vamos criar essa função.
Com body aqui.
Quero usar esse console logo para a gente ver o que está acontecendo.
Teudo modificado.
Body.
Certo.
Vamos ver lá.
A gente post body na função porque a gente não tem ainda.
Vamos lá para o index.js.
Definir export.
Const.change.
O que?
Opa, desculpa.
Post.
Esperar você definir a função.
E deu tudo certo.
Retorno a action.
Tipo o que?
Change.Post o que?
Body.
Outro tipo de ação.
Body.Pelo vai ser o body.
Agora volta a post new.
Importa lá em cima.
Change.Post body.
Vai lá embaixo.
Adiciona o map dispatch to props.
Change.Post body.
Testar mais uma vez.
Novo.
Adetitlo.
Dois que?
Oteudo.
Não está funcionando porque será.
No reducer, esquecemos de
definir o caso.
Change.Post body.
Opa, desculpa.
Body.Action.Pelo.
Modificar o body do
application state.
Certo?
Tipo o diante.
Note que a gente quer mais
linhas para o conteúdo, então
pode voltar na post new.
Até que sim, por ter umas
propriedades, se você olhar na
documentação, chamada
multi-line e number of lines.
Escolha.
Desculpa aqui.
Desculpa.
Esse cara aqui, por exemplo,
tem
mutilação.


0008-14 CRUD com o Redux & React Native

Caixa de Texto TextInput com multiline

```markdown
## Resumo do Transcript

O transcript discute a implementação de uma caixa de texto usando a propriedade `multiline`, que permite que o usuário digite várias linhas. A propriedade é ativada configurando `multiline` como `True`. Também é mencionado que o título só precisa de uma linha e que o estilo da caixa de texto pode ser ajustado, como aumentando sua altura.

Em seguida, foi adicionado um botão "OK", que, ao ser pressionado, realizará um pedido HTTP para o backend, a fim de criar um novo post. O botão é implementado utilizando `TouchableOpacity` do React Native, e um texto "OK" é adicionado dentro dele.

O código também inclui a definição de estilos básicos para o botão, como `padding` e `backgroundColor`, ocupando toda a largura da view. É mencionado que o foco não está em estilização detalhada, mas sim na funcionalidade.

Ao clicar no botão, um Action Creator será chamado para fazer o pedido HTTP e, em seguida, um Action será retornado para indicar que o post foi adicionado.
```


Então, nós vamos usar a prop chamada multiline para a caixa de texto do conteúdo.
Essa propriedade é o Ambulion, True ou False.
Então, vamos lá, voltando aqui, Multiline, True.
Isso significa que essa caixa de texto, o usuário poderá digitar mais em um alívio,
em uma linha. Voltando aqui, a simulador, dar um Update.
Eu acho que eu posso digitar mais de uma linha, embora que a caixa seja muito pequena,
mas a gente pode modificar o estilo, vou aumentar a altura.
Certo, para o título é só uma linha. Tá bom?
Então, a gente tem esses caras já modificando o estado do aplicativo,
chamando o application state, Redux. Certo?
Agora, a Resta, nós adicionamos o botão OK, que quando clicado, ou pressionado,
botão acessível, toque, farão, pedido, HTTP, a nosso Backend, para criar um novo post.
Então, vamos adicionar um botão aqui, botar a Torchable Opacity, por exemplo.
Dentro dele, um Text, OK.
E on press, vou fazer uma coisa, ainda nada, vou botar não.
Vamos ver aqui se aparece se não tiver estilo.
Não está definido, esquecemos de importar lá em cima, importa.
Torchable Opacity do React Native.
Certo?
Ah, esqueci de salvar, desculpe, vamos lá, continua.
Botão OK, sem estilo, mas...
Vamos adicionar, só um estilo básico, Style, Oralith, Tasset9, Padding.
Então, seis.
Vamos ver.
Então, os estilos, OK.
Padding, seis, o Background Color, Antique White.
Certo?
Vamos estar ocupando toda o width da view que contém.
Certo?
Meu foque agora não é no estilo, então se você quiser aprimorar o estilo, por favor, o faça.
Vou continuar.
Vamos lá aqui, quando a gente clicar no botão, a gente quer fazer o pedir HTTP.
Vamos fazer usando um Action Creator, e no Action Creator, depois de fazer o pedir, a gente retorna um Action
para poder dizer que o post foi adicionado.
Adeu.


0008-15 CRUD com o Redux & React Native

Botão e Criador de Ação para Criar um Novo Post

### Resumo do Transcript

Neste vídeo, o apresentador explica como finalizar a implementação de uma cena de um novo post, focando na criação de uma função que será chamada ao clicar no botão "OK". O passo a passo da resolução envolve a criação de um método chamado `onOKPress`, que é responsável por gerenciar a submissão do formulário.

#### Passos principais:

1. **Definindo a Função `onOKPress`**:  
   - A função é criada sem a forma de uma função de flecha para evitar problemas com o contexto da palavra-chave `this`.
   - O `console.log` é usado para verificar qual `this` está sendo referenciado.

2. **Capturando Propriedades**:
   - O título (`title`) e o corpo (`body`) do post são extraídos das props usando destruturação para um código mais limpo.

3. **Criando um Action Creator**:
   - Um action creator chamado `createPost` é definido, que Faz um pedido HTTP para criar um post com o título e o corpo.
   - O tipo da ação é definido como `create post`, e o payload que retorna inclui o post criado.

4. **Lidando com Ações no Reducer**:
   - O reducer é ajustado para lidar com a nova ação `create post` e retornar um novo estado que limpa o formulário, utilizando `initial state`.

5. **Testando a Implementação**:
   - O funcionamento da nova funcionalidade é testado, verificando se o formulário é limpo após o envio e se a ação está correta.

#### Conclusão:
No final do vídeo, o apresentador menciona que no próximo vídeo será abordado como voltar para a cena anterior após a criação do post.

Então vamos continuar e finalizar essa cena aqui do novo post.
O que a gente vai fazer agora?
A gente vai criar uma função que vai ser chamada quando a gente clicar ou tocar esse
botão OK.
Então vamos lá.
Certo? Vamos criar uma função.
Vou chamá-la de onOKPress.
Essa maneira.
Eu vou tirar essa função de flecha e vou deixar só assim.
Desse ponto onOKPress.
Desse referir ao componente postNew.
Então a gente vai criar um novo método.
Vamos lá.
OnOKPress.
Tá bom?
Será que eu faço de flecha ou faço só assim?
Você acha?
Vai dar problema em bind?
Da mesma maneira que a gente teve problemas antes.
OnPress.
Vamos ver o que acontece.
Só dar o console log desse para ver.
Deixa eu abrir o debugger aqui.
Então quando eu clicar aqui, clicar OK.
Deu o console log da palavra-chave desse.
Que se refere ao próprio botão, né?
Proprio
Totable Opacity.
Então tá errado, então por isso que a gente vai usar o
property initializer com a função de flush.
Agora o contexto da palavra-chave desse vai se referir ao componente postNew.
Novamente, só para te mostrar.
Clica lá, clica OK.
Agora você vê o console log é do componente postNew.
Agora tá certo.
Então vamos prosseguir, vamos voltar a editor de texto.
E vamos definir aqui o onOKPress.
Primeiro a gente vai precisar do quê?
Para submeter esse formulário, esse novo post.
Vai precisar do título e do conteúdo que a gente chamou title e body.
Então o title e body são props.
Então eu vou pegar as props.
Des, ponto props.
Ponto body.
Des, ponto props, ponto título, né?
Então vai ter esses dois caras disponíveis.
Opa.
O que a gente vai fazer?
A gente vai pegar esses dois, essa informação.
Vai mandar para o action creator.
Que a gente vai criar.
E esse action creator vai fazer o pedido HTTP.
A gente vai receber a resposta, tá tudo OK.
E a gente vai mandar o cara voltar para a lista de posts.
Entendeu?
Então esse action creator, vamos chamar de create posts, por exemplo.
Então aqui...
Vamos chamar esse create post e vamos passar a informação do post.
Nesse caso eu vou passar um objeto com o título e o body, né?
Nesse caso vai ser esse.
E esse cara aqui, né?
A gente ainda não definiu esse action creator.
Mas a gente já sabe que os action creators são injetados como props
devido ao map dispatch to props lá embaixo.
Que a gente vai ajeitar já, já.
Mas só aqui focar aqui nesse argumento para essa função.
Tá muito longo, né?
Então a gente vai fazer um refactory aqui.
Então refatorização.
E eu vou primeiro destruturar o título e o body do objeto devs.props.
Dessa maneira.
Nesse caso a gente está extraindo propriedade de título e propriedade de body
desse objeto devs.props.
Então a gente não precisa mais digitar devs.props.
Agora como esse objeto, essa chave aqui, tem o mesmo nome que o valor,
a propriedade tem o mesmo nome que o valor,
pode remover isso.
É a mesma coisa.
No s6, partido s6, né?
Então aí fica muito melhor de código mais limpo, né?
Certo?
Então vamos lá e definir esse action creator.
Mas antes disso, vamos lá embaixo.
Como a gente está usando isso aqui, create post,
a gente tem aqui primeiro lá embaixo.
Cadê o map dispatch to props?
Adicioná-lo.
Create post.
Certo?
Mas quem é create post?
A gente precisa importar.
Então vamos lá para o top.
E vai aqui, a gente está importando a actions, né?
Esse arquivo.
Vamos adicionar o create post.
Agora a gente tem que definir o create post.
Certo?
Vamos lá para o index do actions,
da parte da actions, aqui.
Vamos lá criar o nosso action creator.
Export const, create post.
Uma função de flecha.
E o argumento vai ser o post mesmo.
E é um objeto que irá conter o title e body.
Certo?
Como é um action creator?
No final, a gente sempre tem que retornar o quê?
One action, produzir one action.
Ação.
A action vai ter o tipo e vai ter o payload.
Certo?
Agora, vamos criar esse tipo de action chamado create post.
Está bom?
Esse é o nome que a gente vai usar.
Nesse caso, payload.
Quá era que vai ser o payload?
Nesse caso, precisa ter payload.
Normalmente, quando você cria uma coisa,
se for restful, né?
RESTful.
Quando dá o create, o post sempre retorna o post que foi criado com o ID.
Então, se você quiser usar isso, a gente pode acionar aqui.
Se quiser, nem precisa ter o payload aqui,
mas se bem que a gente vai usar o request,
então vai ter que ter.
Então, vou botar o request aqui.
Mas o que é o request?
A gente tem que pedir HTTP aqui.
Nesse caso, vai ser o quê?
Vamos dar o request, vamos definir esse request.
Vamos usar o axios.
Pedir o post.
Para onde?
Voltando aqui lá em cima, senorte,
a gente sempre usa o axios e usa essa variável que é o request, o rl,
que vai ser o rl da API e a gente adiciona o endpoint.
Certo, então vamos lá.
Da mesma maneira que a gente fez os outros,
vamos fazer aqui.
Dá uma string interpolation, interpolação,
request, o rl, barra post.
E segundo argumento para a função post,
método é os dados, que nesse caso vai ser o post.
Certo?
Então, quando chamar o action create, create post,
com os dados do post, que é o título e o body,
vai dar o pedido HTTP post, request, o rl, barra post.
Certo?
Me manda o post, cara.
E vai retornar essa ação chamada create post,
tipo de ação com o payload que vai ser o novo post com o id.
Certo?
Como é que a gente vai testar isso?
Vamos lá aqui, post new.
Voltando a post new, certo?
Voltando para o on, ok press.
This property post.
Certo?
Voltando, eu vou aqui no post reducer.
Você nota que a gente manda essa ação de tipo create post,
mas ela não é lidada ainda.
O post form reducer, se você for o post form reducer,
ele não sabe como lidar com a create post.
Então, tem que adicionar um aqui.
Case create post.
Nesse caso, eu posso dar um...
Deixa eu dar um console log aqui.
Console log do action.p load para ver se deu certo,
só para testar.
Certo?
Mas o que a gente realmente quer fazer nesse caso,
é quando você vai aqui e digita alguma coisa,
você clica ok, né?
Nesse caso, a gente quer limpar o formulário,
certo?
E voltar para a lista.
Mas como a gente vai limpar esse formulário?
Se você lembrar, esse campo de texto aqui
e esse outro aqui do conteúdo,
são ligados ao estado do redux.
Nesse caso, o título e o body, né?
Mas como a gente digitou alguma coisa,
esses caras têm algo diferente.
Nesses caras vai ter aquele A, S, D no seu que,
e o body vai ser D, S, A no seu que.
Então, a gente quer limpar esses caras.
Qual é a maneira mais fácil de limpar?
Note que o reducer sempre retorna um novo estado, né?
Mas eu tenho esse estado aqui numa variável,
chamado initial state.
Então, vamos só retornar ele dessa maneira aqui.
Se você criar um post, a gente quer limpar o formulário.
Como é que limpa?
É só retornar um objeto com um novo estado.
Nesse caso, esse objeto initial state
tem um título vazio e o body vazio.
E é a maneira mais fácil de limpar o form, certo?
Então, vamos dar um teste lá.
Voltando aqui, eu vou dar refresh.
Se você estiver usando um Android,
tem também, cadê o meu?
Aqui, em um lado.
No Android, eu tenho que apertar,
apertar e segurar o R no Mac,
para dar refresh.
Então, vamos dar, vou fazer Android aqui,
que eu já fiz no iOS.
Título 1, 2, 3, não sei o que,
conteúdo, blah, blah, blah.
Eu vou clicar no OK.
Você not já limpou, né?
Tudo, porque eu fiz o return initial state.
Agora que não tem um console log,
porque esse console log parece só do iOS.
Então, deixa eu fazer aqui no iOS.
Deixa eu digitar alguma coisa.
Esse cara aqui.
Vou clicar OK,
vou clicar OK,
vai limpar o formulário.
E você not que eu tenho um objeto aqui do console log?
Se você lembrar, a gente deu o console log do payload.
Já not que tem o que a gente digitou e tem o ID.
Certo?
Então, está tudo OK.
Então, quando a gente criar isso,
a gente quer voltar para a cena anterior, né?
A gente vai fazer isso no próximo vídeo.


0008-16 CRUD com o Redux & React Native

Criação de um Novo Post, json-server e Heroku

```markdown
# Resumo do Transcript

O apresentador discute a necessidade de substituir a URL de solicitação atual que está usando dados falsos da API `jsonplaceholder.typicode.com` por sua própria base de dados para testes mais realistas. Ele menciona que os dados falsos são excessivos e, portanto, não adequados para o desenvolvimento efetivo.

## Mudanças Propostas
- **Trocar a Request URL**: O apresentador quer utilizar sua própria API local, utilizando o `json-server`.
- **Comando para rodar o `json-server`**: O comando mencionado é `json-server --watch db.json` para rodá-lo localmente.

## Deploy no Heroku
Ele menciona que também fez um deploy no Heroku, fornecendo um exemplo de como subir a aplicação. Importante, ele ressalta que para o funcionamento no iOS, a URL deve ser HTTPS.

### Observação sobre o Heroku
- **Base de Dados em Memória**: O arquivo `db.json` no Heroku não é permanente. Os dados são mantidos na memória e não são salvos permanentemente, isso significa que se o serviço for reiniciado, todos os dados em memória serão perdidos.

## Próximos Passos
O apresentador explicou que agora que a URL foi alterada e está funcionando, o foco do próximo vídeo será implementar funcionalidades para retornar à lista e fazer a atualização dos dados apresentados.

**Resumo Final**: O objetivo é usar uma API falsa para o desenvolvimento educacional e a necessidade de um ambiente local e um entendimento das limitações do uso do Heroku neste caso.
```

Antes de continuar, só um detalhe aqui que eu esqueci.
A gente tem que mudar essa request URL para usar nosso próprio banco de dados.
Agora a gente está usando...
Onde estou aqui?
A gente está usando essa request URL no index do actions lá em cima.
Está usando a request URL do jsonplaceholder.tipcode.com.
Mas é sempre fake, então tem muitos dados.
E para a gente testar o que a gente está fazendo, não vai dar...
Tem muita coisa, então eu quero mudar isso para usar o nosso próprio database.
Ah, eu quero sair daqui.
Pera, está R.
Ah, que saco.
Está aí.
Então tem muita coisa já aqui que são dados falsos.
Então vamos usar nosso próprio para ver.
Eu não quero dar um scroll até o final e também nem funciona se eu dar um post para essa fake API.
Então vamos mudar essa request URL.
Se você viu o vídeo da parte 4 e fiz um negócio com json server,
fake, RESTful API, tinha um json server, se você quiser rodar localmente,
dá um json server, dash, dash, watch, db.json.
Aí vai rodar aqui localmente, cadê?
Copiar aqui.
Você nota que já tem esses caras que estão dentro desse arquivo.
db.json, certo?
Você pode editar e quando a gente adicionar alguma coisa para ele,
vai adicionar também nesse arquivo.
Veja o vídeo número parte 4, se quiser, se não, se já se esqueceu.
Aí também fiz na parte 5 deploy para o heroco, como opcional.
Então eu fiz esse heroco para, no meu caso, esse é o meu que eu fiz,
chamado RESTful, traço API, traço post.
Ah, e posso ver o post aqui.
Está lá, eu posso usar essa URL, vou copiar.
Para mim, você pode fazer o seu também, veja o vídeo 5.
Vou tirar esse post aqui.
Não tem bar, e HTTPS, note esse detalhe.
Se não tiver HTTPS, no caso do iOS, não vai funcionar.
Android funciona, mas iOS sempre quer HTTPS.
Então vou usar HTTPS aqui.
Certo, deixa eu dar um reload.
Cadê?
Já está aparecendo lá, porque o heroco estava sleeping, estava dormindo.
Heroco tem esse negócio, que o serviço não é usado, ele vai para o modo sleep.
Então está aqui, os dois desse cara aqui.
Novo, não sei o que, dá um OK.
Vamos ver lá, eu criei, limpou, vamos ver se criou mesmo.
Eu vou aqui, vou dar uma atualizada, e já está aqui.
Está bom?
Mas tem um detalhe sobre heroco, que é essa banco de dados,
embora esteja no arquivo db.jt lá no heroco, não é permanente.
Se eu te mostrar aqui heroco, ade?
Aqui.
Opa.
Deixa eu dar um heroco run bash aqui.
Eu vou rodar o bash no heroco desse cara que está rodando.
R.S.F.U.F.I.P.S.
De mostrar o arquivo lá que não mudou.
Está aqui, dá um L.S.
Essa aqui é o banco de dados, o arquivo db.jt, você note que só tem dois recordes.
Tem esse e esse, mas cadê o terceiro? Não tem.
Porque o heroco não muda o arquivo permanentemente,
é só rodando lá na memória, entendeu?
E se reiniciar o serviço, vai pagar tudo.
Você note que ainda está aqui, né?
O três. Mas dá um restart no heroco.
Heroco run bash, cadê?
R.S.F.U.F.I.P.S.
Aqui.
Eu esqueci de dar o exit.
Sai do heroco, está aí, localmente.
Eu dei um restart no meu R.S.F.U.F.I.P.S.
E olha o que acontece.
Ah, demora um pouquinho. Está aí, desapareceu.
Então, não é permanente.
Só esse detalhe que você tem que se ligar.
E o propósito que a gente deu o deploy to heroco é só para ter esse cara aqui
para fazer esse desenvolvimento, aprender a desenvolver esse aplicativo,
mas não é para produção, não é para...
É só para educação não, entendeu?
Conveniente.
Para ter um API falsa.
Então, voltando aqui ao editor de texto.
Certo?
Se você quiser rodar o g-sensor localmente, você pode também.
Eu vou usar esse aqui, do heroco, o H8PS.
Certo? Então, vamos lá.
A gente viu que já funcionou aqui,
embora que a gente ainda não tenha modificado o negócio da lista.
Se eu dar uma atualizada, aqui, vou criar o novo.
Tá ok, limpou tudo, criou, mas a gente não vê,
porque a gente não fez essa parte.
Vou atualizar, você vê que já tem o número 3, e vai aparecer lá.
Olá, mundo, entendeu?
Esse cara aqui.
Cadê o meu Android?
Vamos lá, dou aqui, perto, segura o R no Mac.
Tá aqui, olá, mundo.
Certo?
Próximo vídeo, a gente vai implementar para voltar para a lista
e dar uma atualizada na lista.


0008-17 CRUD com o Redux & React Native

Término da Implementação para Criar um Novo Post

# Resumo do Vídeo: Implementação de Navegação em um Post Novo

No vídeo, o instrutor demonstra como retornar para a lista de posts após a criação de um novo post utilizando o React Router Flux. Aqui estão os principais pontos abordados:

## Objetivo
Após clicar "ok" ao criar um novo post, o usuário deve ser redirecionado de volta para a lista de posts.

## Passos Realizados
1. **Navegação com `actions`**:
   - O instrutor menciona que para mudar de cena, utilizamos um objeto chamado `actions`.
   - É necessário chamar `actions.list` para redirecionar para a cena da lista.

2. **Importação**:
   - Foi feita a importação necessária do `actions` de `react-native-router-flux`.

3. **Atualização de Componente**:
   - Um ponto crítico discutido foi sobre o método `component did mount`, que não atualizava a lista quando se usava `pop` para retornar a cena anterior.

4. **Uso de `reset`**:
   - A solução sugerida foi utilizar um objeto com o tipo `reset` ao passar para a cena de lista. Isso garante que a pilha de navegação seja limpa e que a lista seja montada novamente.

5. **Teste**:
   - O instrutor testou o fluxo e confirmou que ao clicar para criar um novo post, a lista foi atualizada e não havia um botão de voltar, conforme desejado.

## Considerações Finais
- O instrutor observou que o uso de métodos assíncronos poderia ser benéfico para melhorar a experiência do usuário, caso o servidor fosse lento, mas decidiu manter o exemplo simples.
- O vídeo incentiva a interação nos comentários, convidando os espectadores a compartilharem soluções para a questão do `pop`.

Valeu, e até o próximo vídeo!

Agora o último detalhe para a cena do postnew, novo post.
Vamos lá.
Nós queremos fazer com que esse formulares seja, depois de clicar ok, que volte a lista
dos posts.
Para fazer isso, a gente vai usar o react router flux, né?
Vamos lá voltar aqui.
Vamos voltar no create post, eu vou voltar lá para, cadê o postnew?
Depois chamar o create post, você vai mudar de cena.
Como é que muda de cena?
Através desse objeto chamado actions.
A gente quer voltar lá para o list, se lembra?
Você volta aqui para o router.js, esse arquivo.
Tem a definição de todas as rotas, chamadas cenas, sim.
Nesse caso tem uma cena com aqui chamado list.
A gente vai chamar um método chamado list, que tem o mesmo nome daqui.
Nesse caso, vai mandar o cara de volta para list.
Certo?
Vamos ver se eu importei esse cara.
Vamos lá em cima, não tem importado.
Então eu vou importar import.
Who actions, down and from, react, native router flux, certo?
Você também podia chamar esse actions.list lá do action creator, do create post aqui
dentro do index, do actions.
Qual é melhor, depende de você, depende de como você está fazendo o negócio, podia
também chamar aqui, entendeu?
Nesse caso eu não estou nem usando o chamado redux trunk, se eu tivesse redux trunk, que
é uma maneira de retornar uma função do action creator, assíncrono, entendeu?
redux trunk.
Vou servir redux trunk talvez eu iria usar.
Mas a gente está deixando as coisas simples aqui, só para aprender, então vamos lá,
deixa lá mesmo.
Cadê?
Voltando a post new, componente post new do on ok press.
Vamos lá ver o que acontece.
Vou dar novo, abc no seu ok, certo?
Então ele voltou, ele deu uma nova list, mas você note que tem esse botão de voltar
aqui, que não é legal, está voltando para o novo post, o que é que é isso?
E se eu voltar de novo, vai voltar para a lista de post, certo?
Não é legal isso.
Eu quero resetar tudo aqui, certo?
Ah, mas só um detalhe aqui antes, você também pode usar o pop, mas tem um problema com
o pop.
Você dá o pop, ele vai para a cena anterior, né?
Vamos testar o pop para ver o que acontece.
Que é o pop.
Negócio do pop é que tem problema.
Ok?
Eu vou dar ok, senão eu vou botar um 230, sei o que, por título.
Ok?
Mas cadê o cara?
Não está aqui.
Não atualizou a lista.
Embora que esteja tudo ok, não tem botão de voltar, que deu pop, voltou para a cena
anterior, não atualizou.
O problema é que este cara estava montado e ele se volta aqui para o component list.
Você note que no component did mount, esse método de life cycle, ele dá o fat post,
né?
Mas como o component já estava montado, não vai mais chamar isso.
Então por isso que não dá para ver o outro.
Você tem que atualizar usando o simulador, você apertar atualizar tudo para reiniciar
o aplicativo, vai estar aqui, apareceu.
Então por isso que eu não vou usar o pop.
Se você sabe alguma maneira de solucionar esse problema do pop, por favor poste nos
comentários.
Seria muito legal saber.
Eu já tentei algumas coisas e não consegui, mas se você souber de uma ideia, por favor
compartilhe.
Então vamos lá, vou prosseguir aqui, voltando na post new.
Não vou dar pop, vou dar list, certo?
Mas eu quero eliminar, quero botão de voltar.
Eu vou passar um objeto para o list.
Esse objeto vai ter esse type reset.
Então a gente vai passar esse cara, é como se fosse uma opção dizendo o react-native
para o router flux, por favor reset tudo aí e comece dessa cena chamada list.
Tá bom?
Passa o objeto, propriedade type, uma string reset.
Vamos ver o que acontece.
Atualizei o app.
Vamos lá clicar novo.
Vamos lá para todos.
Clicar OK.
No notch já resetou e não tem mais botão de voltar e apareceu aqui.
Certo?
Isso que a gente quer.
Recapitulando.
Como é que a gente fez isso?
Lá no OK press, quando você clicar OK, vai fazer esse cara aqui, vai chamar o action.list.
Do react-native router flux, permite você mudar de cena.
Nesse caso, vamos mudar para cena chamada list, mas eu queria que não dá um push, que não
adicione a pira chamada stack, mas que reset, que tira tudo da stack e ponha list do começo.
Monte essa list de novo.
Porque se não montar de novo, não vai chamar aquele fat post no component dead mount.
Entendeu?
Não vai chamar esse aqui.
Então a gente monta de novo, dá um reset.
Só um detalhe aqui, eu sei, esse cara aqui é assícrono, né?
Então talvez aí, se o servidor fosse muito lento, já ia mudando a cena antes de receber
resposta.
Então não é muito bom para user experience, né?
Experiência do usuário.
É isso.
A solução é fazer esse cara ser assícrono e retornar à promessa.
E depois que dar a promessa, não sei o que, você chama o action list.
Mas como nesse vídeo a gente está aprendendo só o básico, eu não vou em detalhes, tá
bom?
Só queria mencionar isso.
Tá certo?
Então valeu, até o próximo vídeo.


0008-18 CRUD com o Redux & React Native

Uso do Actions.pop

# Resumo do Vídeo

## Introdução
O vídeo aborda uma abordagem alternativa para gerenciar a atualização da lista de posts em uma aplicação utilizando Redux. Em vez de usar `actions.list`, o autor propõe usar `actions.pop`.

## Modificações Propostas
1. **Reducers**:
   - O `postReducer` deverá lidar com uma nova ação chamada `create post`.
   - O estado inicial deve ser retornado corretamente.
   - Quando um novo post é criado, ele é adicionado à lista existente de posts.

2. **Fluxo de Criação de Post**:
   - Ao clicar em "OK" no formulário de criação de post, a função `onCreatePress` é chamada.
   - A ação `create post` é disparada utilizando Axios para fazer uma requisição HTTP.
   - O novo post é adicionado à lista de posts através do `payload` recebido da resposta.

3. **Atualização do Estado**:
   - A lista de posts é atualizada no `postReducer` para incluir posts existentes e o novo post criado.
   - É utilizado o middleware `redux-promise` para lidar com a resposta da requisição Axios.

## Código e Estruturas
- O autor sugere encapsular a atualização do estado em uma variável e usar chaves para definir o escopo local dentro do case. 
- Exemplo de atualização do estado:
  ```javascript
  const all = [...state.all, action.payload.data];
  ```

## Teste
- Após a implementação, o autor realiza um teste e confirma que um novo post, "mundo novo", foi adicionado corretamente à lista.

## Conclusão
- Esta abordagem com `actions.pop` permite um fluxo de trabalho que evita a necessidade de um reset da cena. 
- O autor se compromete a demonstrar a abordagem anterior utilizando `reset` em vídeos futuros, mas incentiva a utilização do método `pop` para quem quiser explorar essa alternativa.

## Agradecimento
O vídeo finaliza com agradecimentos e um convite para o próximo vídeo.

Oi galera, esse vídeo é opcional, é só para quem quiser aprender como usar, em vez
do actions.list, fazer esse negócio, a mesma coisa que quando clicar no post e submeter
esse cara.
Em vez de usar actions.list, a gente vai usar actions.pop e a gente vai modificar em vez
de, já deixa que o post farm reducer retornando no initial state e também vamos mudar o post
reducer que vai também lidar com essa tipo de ação aqui chamado create post aqui e
vai adicionar o novo post a essa array aqui all.
Certo, então vamos lá, não é muita coisa não, então vamos lá, só para aprender mesmo
como fazer as coisas de outra maneira.
Então, primeira coisa que eu vou fazer é retornando aqui o post new, né, quando a gente
vai no novo e clica no OK, vai chamar essa função onCreatePress, né, a gente chama
action creator que faz pedido HTTP e se você volta e ir lá no actions index, esse create
post faz a request com axios e retorna essa ação chamada create post e o payload vai
ser o post que foi criado, tá bom?
Então vamos aqui no primeiro a coisa vamos voltar post new, em vez de da actions list
eu vou dar actions pop, o pop vai voltar a cena anterior, certo, deleta a cena que está
esse cara aqui, dá um pop e volta para a cena anterior, mas a gente tinha aquele problema
de quando a gente dava o pop a cena anterior não estava atualizada, mas para atualizá-la
o que a gente vai fazer?
A gente vai aqui no post reducer, né, se você se lembra dessa outra cena aqui, esses
caras aqui vêm do all que é retornado pelo post reducer, né, se você lembra fat post
no plural tem esse all que é uma array, né, uma lista de posts, então o que a gente vai
fazer aqui no post reducer ele também vai lidar no adicional no novo caso, nesse caso
vai ser o create post, você note que esse caso aqui também está sendo lidado no post
form reducer aqui, mas nesse caso ele só limpa o formulário, retorno novo estado cujo
título e array são strings baseas, mas a gente está também lidando com esse create
post aqui no post reducer, então o que a gente vai fazer?
A gente vai tornar os dados do state anterior, do estado anterior e também o novo all, mas
qual é esse novo all?
Então vai ser uma array lista com o que?
Com os já existentes, né, dentro do estado tem o all, a gente vai copiar os posts que
já existem na lista e vamos adicionar o novo post que vai ser o que?
Vai vir da action.payload, nesse caso como é uma pedira HTTP do Axios a gente tem que
pôr o ponto data da mesma maneira que a gente fez aqui nos outros, tá bom?
Se você lembrar aqui, recapitular muito tempo atrás, a gente está usando o chamado middle
air chamado redux promise, né, que ele pega esse request aqui, ele espera a request,
o pedir HTTP, tem uma resposta e quando tiver resposta, finalmente ele pega e põe
o resposta aqui dentro da payload e retorna essa nova ação.
Nesse caso vai ser chamado response do Axios que para obter as informações do post a
gente tem que falar ponto data, ponto data, tá bom?
Então voltando aqui a post reducer, é isso.
Dessa maneira quando a gente criar o post, automaticamente com essa lista aqui vai ser
atualizada com os valores anteriores, os posts anteriores e o novo post.
Agora esse negócio está muito long, então eu geralmente gosto de pegar esse cara aqui,
vamos fazer uma variável.
Nesse caso, como eu estou definindo a variável, eu vou botar os braces, essas chaves ao redor
do caso, tá bom?
Para definir o scopo local dentro desse bloco.
Sempre se você fizer uma variável dentro do caso, ponha as chaves para definir essa
variável local somente a esse bloco aqui.
Por isso que eu uso isso.
Tá bom?
Vou definir o álcool nesse cara aqui que a gente fez.
Essa é uma lista, copia os valores dos posts anteriores com o novo post e eu ponho aqui
ó, vai ser esse ó aqui.
Nesse caso no s6, como a propriedade do mesmo nome que o valor pode remover aqui é a mesma
coisa.
Dessa maneira vamos testar.
Adicionando aqui, vou atualizar.
Se não tem nenhum erro, se não a gente tem cinco posts, vai adicionar novo, mundo novo.
Alguma coisa aqui, vou dar ok, se liga aí.
Você viu que já adicionou mundo novo aqui?
Certo?
Tudo certinho.
E usando o pop.
Certo?
Então só recapitulando aqui, a gente achou, nesse vídeo achou outra maneira de fazer
esse workflow em vez de usar o action list e recetar o negócio.
A gente só deu pop e voltou para a cena anterior, mas a gente tinha aquele problema que a lista
não era atualizada, mas esse problema foi resolvido.
A gente adicionou o caso create post para o post reducer lidar.
Nesse caso ele vai adicionar o novo post que vem da PDJK3TP, a lista de all, essa lista
aqui.
Então retorna o novo estado, porque o novo estado foi retornado, o estado mudou, o
componente list aqui foi atualizado.
Toda vez que o estado muda, o componente é atualizado.
Certo?
Então não foi necessário usar o reset para recetar aquela cena.
Isso é outra maneira de lidar com isso.
Nos próximos vídeos eu vou deixar na maneira anterior usando o reset, mas se você quiser
usar o pop também é legal.
Tá certo?
Então muito obrigado e até o próximo vídeo.


0008-19 CRUD com o Redux & React Native

Botao de Cancelar

# Resumo do Transcript

Neste vídeo, o apresentador discute a implementação de um botão de cancelar em uma tela de criação de post. 

## Passos Abordados

1. **Identificação da Tarefa**: 
   - O botão de cancelar ainda não foi implementado na nova tela de post.

2. **Desafio para o Leitor**: 
   - O apresentador incentiva os espectadores a tentarem criar o botão de cancelar primeiro.

3. **Implementação do Botão**:
   - Navega até o componente relevante (`post new`).
   - Cria um componente `TouchableOpacity` para o botão.
   - Adiciona Texto ao botão com o label "Cancelar".

4. **Configuração de Propriedades**:
   - O `TouchableOpacity` recebe a propriedade `onPress`, que chamará uma função (`onCancelPress`) quando o botão for pressionado.

5. **Estilos**:
   - O apresentador menciona que o estilo pode não estar perfeito e será ajustado posteriormente, focando primeiro na funcionalidade.

6. **Função onCancelPress**:
   - A função ainda não faz nada, mas está configurada para ser testada.
   - O uso de `Actions.pop` é Introduzido para voltar à cena anterior ao clicar no botão.

7. **Teste Final**:
   - Ao clicar no botão Cancelar, a aplicação deve retornar à cena anterior.

## Conclusão

O vídeo termina com a confirmação de que a implementação do botão de cancelar foi bem-sucedida e uma chamada para que os espectadores assistam ao próximo vídeo.

Então nós quase terminamos de fazer essa new post, exceto que a gente não tem o botão
de cancelar, mas aí isso não é fácil de fazer.
A gente já sabe como voltar para a cena etaria usando o pop, então a gente sabe também como
fazer o botão.
Então como desafio eu quero que você primeiro tente aí fazer esse vídeo, tente fazer o
botão de cancelar para voltar para outra cena, certo?
E aí deu tudo certo, agora vou continuar.
Então vamos lá fazer o botão, eu estou aqui no components, post new, aqui é o botão
OK, eu touch opacity.
Então vamos fazer outro aqui antes do OK.
Eu sei que o estilo não está o mesmo, mas a gente vai lidar com o estilo talvez depois
do final como um bonus.
Nosso foco, de novo, novamente nosso foco é na funcionalidade.
Então vamos lá fazer um touchable opacity, botão sensível talk, certo?
O que é isso desse cara?
Tem que ter o test, nesse caso vai ter botado dentro do component text, cancelar, certo?
Não é cancelar.
Touchable opacity e o text já estão importados lá no topo que a gente já está usando aqui,
só para confirmar, vai lá no topo.
Está aqui text e tem o touchable opacity do react native.
Import do react native, certo?
Então voltando lá para o touchable opacity, ele leva a propriedade on press, que é a
função que deve ser chamada quando você tocar no botão.
On press, vamos fazer uma função depois chamada on, cancel press, é, abada.
Que tal aí?
Vamos cancel press e vamos adicionar um estilo aqui.
Se quiser, passo o próprio estilo, ou vou copiar esse aqui.
Não é muito boa para a prática, mas só para aprender, aprendizado.
Cadê eu tirar essa com, será que tem cinza?
Não, não tem cinza, gray.
Vamos ver o que acontece.
Ah, não defini on cancel press ainda, então vamos lá em cima.
Depois, antes, vamos fazer antes do on key.
On cancel press, define com propriedade e a função de flash, certo?
Para não ter problema com binding.
Então, fazer nada ainda, mas vamos testar se não deu problema.
Vamos lá no novo.
Está aí o botão cancelar, certo?
Agora, o que acontece?
Quando a gente clica cancelar, essa vai voltar a cena anterior, a gente não fez nada.
Então nesse caso a gente pode usar o actions.pop, né?
Actions, que é o object, que é do react native router flux, nos permite a mudar de cenas.
Nesse caso só vou dar um pop para dar um pop nessa cena e voltar a cena anterior.
Só vai, vamos lá.
Atualizar, novo, cancelar, certo?
Tudo ok.
Então é isso, botão de cancelar.
Até o próximo vídeo.


0008-20 CRUD com o Redux & React Native

Página de Editar Post

# Resumo do Transcrito

Neste vídeo, o apresentador fala sobre o desenvolvimento de uma funcionalidade de edição de posts em um aplicativo React Native. Ele explica o que foi feito até agora e os próximos passos para implementar a página de edição de post. 

## Estrutura da Funcionalidade

1. **Página de Edição**:
    - Adicionar um botão "editar" na página de visualização do post que leva à página de edição.
    - Implementar funcionalidades:
        - Cancelar: volta para a página do post.
        - Ok: atualiza o post e volta para a página do post.
        - Delete: remove o post e volta para a lista de posts.
  
2. **Reutilização de Componentes**:
    - Utilizar o mesmo formulário da página de criação de post para a página de edição.
    - Considerar criar um novo componente que pode ser usado tanto para criar quanto para editar posts, com a possibilidade de passar um estado inicial.

3. **Implementação**:
    - O apresentador discutiu a necessidade de modificar as rotas no arquivo `Router.js`.
        - Adicionar um novo item à barra de navegação para a página de edição.
        - Criar a cena `PostEdit` que será chamada ao clicar no botão "editar".
  
4. **Criação do Componente `PostEdit`**:
    - O apresentador vai criar o componente `PostEdit` e configurar seu template básico.
    - Importante importação dos elementos do React e React Native necessários.

## Próximos Passos

- No próximo vídeo, o apresentador começará a implementar a lógica e a interface da página de edição de post. 

## Conclusão

O vídeo terminou com a confirmação de que os passos iniciais para a configuração da página de edição foram realizados com sucesso e que a próxima etapa será o desenvolvimento detalhado da página.

E aí galera vamos continuar?
Então a gente terminou o novo post.
A gente já tem a lista de post.
Já tem o ver post.
Agora só falta criar essa cena aqui, essa página de editar o post.
Que por sinal muito parecida com a de novo post.
Então a gente vai adicionar esse botão editar na página do post.
Que vai para essa editar post.
Aí quando você clicar cancelar, volta para a cena do post.
Ou se você clicar ok, vai atualizar o post e voltar para a cena do post.
E tem também o deletar post, que nesse caso vai deletar o post.
E voltar para a lista de post.
Que não faz sentido voltar para o post que já foi deletado.
Então você note que antes de a gente partir para o desenvolvimento.
Que é quase a mesma coisa, só adicionar esse botão de deletar.
E aqui nesse caso já tem o formulário já feio.
Já tem esses dados aqui entrados.
Então a gente pode reutilizar esse formulário aqui.
Esses elementos aqui.
No editar post.
Talvez a gente crie um novo componente aqui.
Que será usado para o novo post pelo editar post.
E esse componente pode levar o estado inicial desses campos.
Pode ser já com dados entrados ou não.
Algo assim.
E no editar post é só adicionar esse componente aqui e o deletar post.
Certo?
Mas é claro que você também pode fazer o novo editar post.
Com um novo formulário diferente.
Mas como é quase a mesma coisa.
Eu não vou me repetir.
Vai ser dry.
Eu vou usar esse princípio dry.
De not repeat yourself.
Não se não repita a mesma coisa que você fez.
Então vamos lá.
Vamos começar aqui.
Vamos primeiro adicionar esse editar aqui.
Então como é que a gente vai adicionar esse cara?
Se lembra que o react native router flux tem aquelas propriedades que permitem você modificar o que está a direita ou a esquerda da navbar.
A gente fez esse novo aqui.
Se lembra a lista de posts a gente tem esse novo aqui.
Então se você... a gente for lá para as rotas.
O que tem lá.
Então vou para o arquivo de rotas.
Router.js dentro do pasta src.
Você note que nessa cena para a lista de posts tem esse write title.
Write title é a parte da direita.
Nesse caso a gente quer editar.
Mas não é para a lista de posts.
É para ver posts.
Então cadê o ver post?
É o post detail.
Esse post detail é a página de ver posts.
Então a gente vai adicionar o write title.
E onwrite.
Então vou quebrar a linha aqui.
Para ficar melhor de vocês verem.
E eu também gosto desse estilo vertical.
Sim.
Certo? Vou botar o write title.
Vai ser o que?
É editar, não é?
É editar.
É editar.
É essa propriedade.
E o onwrite que você passa uma função a essa propriedade.
Essa função será chamada quando você clicar nesse e editar.
Onwrite a gente vai chamar a função.
Certo?
Ainda não temos a cena para editar posts.
Mas a gente pode criar aqui.
Então vamos supor que seja, sei lá, vamos ver o nome list.
PostDT, postnew.
Vamos botar post edit, sei lá.
Algo assim.
Então quando você clicar o write, vai chamar essa chave aqui, que é post edit.
Edit que vai se referir a uma cena que a gente vai criar.
Então vamos aqui.
Depois do postnew eu vou criar uma nova cena.
Essa cena vai ter aqui chamada, tem que ser a mesma aqui, post edit.
Para editar o post.
O componente ainda não temos, mas vou chamar de post edit.
Título vai ser editar post.
Vamos verificar se é isso que eu botei no wireframe.
Editar post tudo certo.
Voltando aqui, certo?
Se quiser usar o estilo vertical, pode usar, sei lá, só para deixar tudo ok.
Estilo consistente, vou fazer esse estilo.
Posto edit, mas não temos esse cara ainda.
A gente vai fazer, mas quando a gente usa esse cara tem que fazer o que?
Tem que importar, então leia em cima, lá para o começo do arquivo.
Onde é que está? Já me importamos ou não?
Então vamos lá import, post edit, from.
Vou botar na parte de componentes, barra post edit.
Não precisa dar a extensão, bota o jts.
Certo?
Nesse caso a gente tem o pasta component, vou criar post edit.js, certo?
E é aquela mesma coisa quando a gente começa a criar um novo componente react.
Na verdade eu tenho uns snippets do Atom que eu posso editar o negócio, apertar tab,
e ele já completa tudo com o template do novo componente.
Mas nesse caso para o aprendizado sempre é bom no começo, digitar tudo na mão.
Então vou digitar, a gente sempre começa com o que? Import, react, from react, certo?
Nesse caso vou fazer um componente de class, vou importar o component dentro do react, certo?
Defini a class, post edit, certo?
Extends component, sempre, opa.
E aqui no final vou exportar post edit, opa.
Sport default, post edit.
Que todo componente react tem uma função chamada o quê? Render, né?
Estão para renderizar o template, que sempre retorna um template jsx.
Nesse caso vou botar um view aqui, só para você ver.
Aquela mesma história, post edit.
Ah, mas eu estou usando view text, mas não importei, então temos que importar.
Port view text react native, do react native.
Esqueci de alguma coisa, vamos ver aqui os outros aqui.
Vou falar aqui, react, tudo certo.
Sport default, estou com component, certo?
Vamos ver se está funcionando.
Você nota que o router aqui importa post edit e usa post edit nessa cena chamado post edit,
que vai ser chamada quando você clicar, editar no post detail, no ver post.
Então vamos lá, vou atualizar.
Vamos ver se post aqui, editar.
Tá certo, funcionou, senorte tem post edit, que é isso que a gente digitou lá no post edit.
Então voltando aqui, ele volta para o ver post, clicar, editar, certo?
Então, por esse vídeo é só, no próximo vídeo, vamos começar a implementar,
desenvolver essa página, editar, tá bom? Até logo.


0008-21 CRUD com o Redux & React Native

Formulário de Post

# Resumo do Desenvolvimento do Componente Post Form

Neste tutorial, a equipe está desenvolvendo um novo componente chamado `PostForm`, que será utilizado tanto na criação (new post) quanto na edição (edit post) de um post.

## Estrutura do Processo

1. **Criação do Componente**:
   - O componente `PostForm` será extraído do código existente que lida com a criação e edição de posts.
   - A equipe opta por extrair partes relacionadas aos formulários, incluindo os campos de texto e botões, em um novo arquivo denominado `post_form.js` na pasta de componentes.

2. **Importações Necessárias**:
   - O componente utilizará `React`, `View`, `Text`, `TextInput`, e `TouchableOpacity` do React Native.
   - É assegurado que todos os componentes necessários sejam importados antes de começar a construção do `PostForm`.

3. **Propriedades do Formulário**:
   - O `PostForm` terá duas caixas de texto: uma para o título e outra para o conteúdo.
   - Funções de callback (`onTitleChange` e `onBodyChange`) serão passadas como propriedades para o `PostForm`, permitindo que ele modifique o estado no componente pai.

4. **Integração com Componentes Pais**:
   - No componente `PostNew`, o `PostForm` é incluído e as funções apropriadas (`onTitleChange` e `onBodyChange`) são mapeadas, permitindo a interação com o estado do aplicativo.
   - As propriedades do título e do corpo também serão injetadas no `PostForm` a partir do estado, garantindo que o componente funcione corretamente com os dados reais.

5. **Finalização**:
   - Após a implementação, a equipe realiza testes para garantir que todas as funcionalidades estão operando como esperado, verificando se as mudanças nas caixas de texto estão refletindo corretamente no estado do aplicativo.

## Considerações Finais

- O `PostForm` agora é um componente reutilizável que simplifica o processo de criação e edição de posts, permitindo uma melhor gestão do estado e manutenibilidade do código.

Então agora vamos lá e desenvolver esse post edit, só voltando aqui para o wireframe
aqui.
Então vamos lá primeiro de tudo, vamos adicionar esse formular aqui, mas vamos a um meio.
Então vamos trair esse cara em um novo componente e usá-lo no novo post e no editar post.
Vamos dar uma olhada no post new aqui, o Sinr post new, componente post new.
Ele tem essa parte aqui com o botão.
Então esses caras que nós queremos extrair em um componente, certo?
Tem uma coisa que o gente pode considerar aqui, pode incluir o botão ou não, entendeu?
Depende de como você está fazendo isso.
Você quiser só incluir o formular, pode, mas deixar os botões diferentes ou pode incluir
o botão com o Selaiokey também e só adicionar esse deletable post no editable.
Você pode incluir tudo, mas você pode escolher outra maneira também, outra maneira.
Então vamos lá.
Vamos extrair esses caras aqui, vou recortar, tá bom?
Vamos pensar no nome para esse cara aqui e vou criar um novo arquivo aqui chamado
post form, tá bom?
Dentro do pasta components post form, ponto js, meu componente chamado post form.
Da mesma maneira vou fazer import react, como a gente vai fazer o componente de classe,
vou importar extrair o component dentro do modo do react, vou precisar do que eu acho
que view, text e o touchable opacity.
Não sei se esquecer algum, mas vamos ver aqui.
Class post form extends, component, todo component tem a função render e torna o template
e esse cara que eu coloquei aqui, tá bom?
Ah, eu esqueci de importar text input, certo?
Voltando aqui, text input, certo?
Vai lá embaixo e exporta, export default, post form, certo?
Salvar, vamos ver se vai funcionar.
Vamos primeiro dar uma olhada aqui nesse post form.
Você note que o template aqui, o primeiro caixa de text que é pro título, ele tá dizendo
esse on title change, mas o que é esse cara?
Nesse caso não está definido aqui, então o que é que eu quero fazer?
Eu quero pegar essa função da props, nesse caso a gente vai dar como propriedades ao
post form o on title change, certo?
E também da mesma maneira pro conteúdo, eu não vou definir um body change aqui, mas
vou passar pro post form uma propriedade que vai definir o on change text pro conteúdo,
certo?
Então esse cara aqui vai virar desse ponto props on title change e esse cara aqui vai
virar desse ponto props um body change.
A gente vai entender já, já como é isso, tá bom?
Então vou salvar aqui, antes de continuar com os outros, vamos resolver esse cara aqui.
Então esse post form tem um formulário, duas caixas de text e os botões.
Então quando a gente digitar uma coisa, o on change text vai chamar essa função aqui
pra mudar o título lá no estado do aplicativo, o application state.
Nesse caso a gente tem que definir se on title change, mas a gente não quer definir aqui
porque a gente vai reutilizar esse post form em duas cenas, então a cena pie é que vai
definir como esse cara vai mudar.
Então a gente vai dar como propriedades ao post form lá do post new ou do post edit.
Essa propriedade aqui on title change.
Voltando ao post new, eu vou adicionar o post form que a gente tá criando, certo?
Vai o componente post form que já inclui as caixas de text e os botões e vai ter essa
propriedade on title change, certo?
Aqui vai ser o que?
A gente vai dar o post form on title change e vai dar a função que é desse componente
chamado post new, this on title change, certo?
Esse cara aqui se refere à função this on title change do componente post new.
Essa função aqui vai ser chamada lá de dentro do post form por esse cara aqui, como é dado
como props.
Entendeu?
O post form é dado essa propriedade on title change que pode ser acessada, voltando aqui
ao post form, com o this.props, certo?
Ponto on title change.
Dá mesmo maneiro para fazer com esse cara aqui.
Então o que eu quero que você faça?
Que você dê a propriedade post new para definir o título.
Vou esperar um pouquinho para o vídeo faça.
E aí, deu tudo certo?
Vamos continuar.
Então aqui o on change text aqui do cara, do conteúdo, vai ser pela propriedade on
body change.
Então vamos lá definir.
O body change vai ser o que?
Vai ser essa função aqui, on body change.
Então, this.on body change.
Não está muito longo, vou quebrar aí novas linhas.
Quebrar aqui.
Certo?
Então quando a gente mudar o conteúdo, vai chamar essa função, this.props.on body
change, que na verdade é o this.on body change do post new, que é essa função aqui.
Está certo?
Agora tem mais um detalhe.
Voltando a post form, o valor das caixas de texto são dados como propriedades a esse
componente post form.
Nesse caso a gente não deu não propriedade aqui, então a gente tem que adicionar o title,
certo?
You body.
Nesse caso vai ser this.props.tile e this.props.body.
Nesse caso essas são as propriedades dados ao quem?
A quem é post new?
Por causa do map the state to props aqui.
Vai extrair o estado do redux, o título you body e vai injetar como props para o componente
post new.
E o post new vai dar como propriedades, injetar as propriedades no post form do title you
body dessa maneira, certo?
E agora esses caras vão funcionar direitinho, certo?


0008-22 CRUD com o Redux & React Native

PostForm Dentro do PostNew

# Resumo da Transcrição

Neste trecho, o autor discute a implementação de botões em um componente React, especificamente focando nas funções `onPress` associadas a esses botões. Aqui estão os pontos principais abordados:

1. **Definição de `onPress`**:
   - O autor salienta que as funções `onPress` dos botões devem ser passadas como props, semelhante ao que foi feito anteriormente com os campos de texto (text inputs).

2. **Diferença entre Ações**:
   - O botão "OK" no novo post e no post existente não executam a mesma operação. O botão do novo post faz uma requisição HTTP do tipo POST, enquanto o do post existente fará uma atualização usando PUT.

3. **Props para funções**:
   - As funções `onCancelPress` e `onOkPress` devem ser passadas como props para o componente `PostForm`, permitindo que ele acesse essas funções e as utilize nas interações do usuário.

4. **Importação do Componente**:
   - O autor menciona a necessidade de importar o `PostForm` corretamente no componente `PostNew`.

5. **Manutenção da Estrutura do JSX**:
   - Aponta um erro no JSX que ocorre ao tentar retornar múltiplos componentes. A solução é encapsular todos os componentes retornados dentro de um único componente pai.

6. **Teste das Funcionalidades**:
   - Após as implementações, o autor testa os botões de edição e novo post, confirmando que ambos estão funcionando como esperado.

7. **Próximos Passos**:
   - O autor planeja reutilizar o `PostForm` em um futuro componente de edição, enfatizando a vantagem de não precisar criar um novo formulário.

### Conclusão

O vídeo demonstra a importância de passar funções como props e a reutilização de componentes em React para manter o código organizado e eficiente. Também aborda a correção de erros comuns no JSX.

Continuando, vamos lá e ver os botões aqui.
Então, cada botão tem um on press.
Mas o on press está definido como this, quando on canso press, this on ok press.
Na verdade, a gente não quer isso.
A gente quer passar como props o on press, a definição do on press.
Da mesma maneira que a gente fez aqui, antes com os text inputs.
Porque no ok, o ok do...
É de estar post, não é o mesmo que o ok do novo post.
Porque o ok do novo post vai fazer um pedido HTTP, que é o post, né?
Tem o pedido get, tem o pedido post, put, faz o pedido put.
Post, desculpa, pedido post, né?
E o editor, quando clicar o que, eu pedi o HTTP para dar um update, né?
No recorde, que vai usar a put, ou o patch, se você quiser.
Eu vou usar a put, tá bom?
PUT.
Entendeu?
Voltando aqui.
Vamos lá.
Esse cara vai ser dado como props.
Certo?
Se bem que o cancelar vai dar no mesmo, né?
Vai dar o action da pop.
Talvez...
Hum, vamos ver aqui.
O on canso é a mesma coisa.
Então, a gente poderia definir o on cancel dentro do postform.
Da...
Poderia, não sei se é melhor ou não.
Dá para pensar agora, o que você acha?
Deixa aí nos comentários.
Você quer recortar o cancel press e pôr aqui dentro do postform?
Porque os dois vão fazer a mesma coisa, action.pops,
ou quer deixar como props?
Eu vou escolher deixar usar como props, tá bom?
Deixa aqui, desce um props, dá um cancel.
Certo?
E desce um props, um on ok press.
Agora, vamos voltar.
O que a gente tem que fazer aqui?
Então, o postform vai levar o que também?
Qual é o nome?
On cancel press e on ok press.
Então, on cancel press.
On ok press.
Vai ser o que?
Vamos lá.
Esse on cancel press está definido aqui dentro do post new.
Esse cara.
Para acessar esse cara, a gente fala para chave des, ponto.
O nome da função.
Des, ponto, on cancel press.
Da mesma maneira, o ok press está definido aqui.
Des, ponto, on ok press.
Tá bom?
Novamente, a gente pega esse cara, passa como props.
É o nome da props, é on cancel press, mesmo nome.
Para o postform, o postform pode acessar essa props,
com des, ponto, props, ponto, ok, on ok press.
Certo?
Quando clicar ou tocar o botão,
vai chamar essa função des, ponto, props, on ok press.
Que na verdade é o des, desculpa, des, ponto, ok press,
que é esse cara aqui.
Certo?
Então, vamos salvar.
Vamos ver se não deu nenhum problema.
Ah, esqueci de importar o postform dentro do post new,
que a gente está usando esse componente.
Sempre tem que importar, vamos lá em cima.
Eu vou botar aqui, antes do actions, import post new.
Desculpa, postform, from, postform,
mesmo diretor, né?
Aqui, dentro da parte da componente.
Vou salvar.
Normalmente eu gosto de separar os imports,
imports gerais de módulos,
e os nossos props, componentes, customizados,
eu gosto de separar com a minha nova, entendeu?
Então, vamos lá.
Vamos testar, volta ao simulador.
Oh, deu erro.
Qual é o problema aqui?
Add JSON, JSX, elements, must be wrapped in an enclosing tag.
O que é que significa?
É aquela vela história que você só pode retornar um componente,
não pode retornar vários componentes.
Só pode retornar uma coisa.
Então, vamos voltar na postform.
Você note que eu colei tudo aqui,
mas está retornando vários componentes, né?
Vários caras aí.
Então, vamos botar tudo dentro do quê?
No anvil.
Eu vou botar um anvil, certo?
O que?
Cobre esses caras dentro do anvil aí.
Certo?
Entendeu?
Agora, vamos lá.
Agora, retornamos um único componente,
que é a view, que tem, inclui,
no seu conteúdo, todos esses componentes.
Vamos salvar e ver se não tem mais nenhum erro.
Certo? Então, vamos clicar em um deles.
Está aqui o botão editar.
Editar post.
Post edit.
E o botão novo.
Que a gente mudou o novo, né?
Detalhe.
Ainda está funcionando.
Vamos testar.
Que a gente mudou o componente post new
para utilizar esse postform.
Então, vamos ver.
A, nesse,
no seu quê?
Vou clicar OK.
Adicionou.
Vou clicar cancelar.
Volta.
Então, está funcionando.
Certo?
Então, no próximo vídeo, a gente vai usar
esse componente postform.
Vai reutilizá-lo, né?
No nosso,
no nosso cena de editar.
Dessa maneira, a gente não precisa
fazer o novo form.
A gente usa o mesmo componente.
Valeu?
Até mais.


0008-23 CRUD com o Redux & React Native

Implementação do PostEdit usando PostForm

# Sumário do Transcript

Neste trecho, o autor discute a implementação do componente `PostForm` dentro da funcionalidade de edição de um post. 

1. **Uso do PostForm**: 
   - O autor menciona que anteriormente o `PostForm` foi utilizado na criação de novos posts (`PostNew`) e agora será integrado na edição de posts (`PostEdit`).

2. **Importação do Componente**:
   - O `PostForm` é importado do mesmo diretório, e não é necessário redigir todas as propriedades desde o início, pois algumas já existem.

3. **Propriedades do PostForm**:
   - As propriedades que o `PostForm` deve aceitar incluem:
     - `title` e `body`
     - `onTidalChange`: função chamada ao digitar no campo de título
     - `onBodyChange`: função chamada para atualizar o conteúdo
     - Outras propriedades para botões, como `onCancelPress`.

4. **Carregamento de Dados**:
   - A edição de um post requer que os dados existentes (título e conteúdo) sejam carregados ao entrar na página. 
   - O autor sugere usar um `HTTP GET` para pegar os dados do post específico, mas decide que pode simplesmente extrair as informações que já estão disponíveis no estado atual do aplicativo.

5. **Próximos Passos**:
   - Está previsto que o autor demonstrará como conectar essas informações no campo apropriado do `PostEdit`.

Esse resumo captura os principais pontos do transcript, facilitando a compreensão das próximas etapas na implementação do componente de edição de posts.

Agora vamos usar o postform dentro do edit a post.
Vamos lá.
Vamos lá pro...
Antes a gente usou o postform aqui dentro do postnew, dessa maneira aqui.
Então vamos fazer de novo a mesma maneira no post edit, tá bom?
Então eu vou tirar esse texto aqui e eu vou, em vez disso, selecionar o postform.
Esse componente, vamos lá importar.
Lá em cima.
Postform, from, mesmo diretório, postform.
Opa.
Certo?
Agora o postform leva umas propriedades que a gente fez aqui no postnew, já fez isso.
Certo?
Mas eu não vou copiar fazer tudo zero de novo.
Certo?
Então vamos lá.
Então o postform vai levar o que?
O título e o body, né?
Também tem o onTidalChange, que é a função que vai ser chamada quando você digitar alguma coisa na caixa do título.
E o onBodyChange, que é a função chamada pra update, pra atualizar o que você quer ver no conteúdo, né?
Cache do conteúdo.
E as outras propriedades, ok?
Dos botões.
Ok, press, you on, cancel press.
Tá bom?
Então o que é que vai ser esses caras?
Então primeiro de tudo, como é que a gente vai fazer pra primeiro, vamos voltar aqui no, esse cara.
Você vê que a gente vai dar a página, opa, quando você vem da V-Post, você clica em um dos posts, você vai pra essa página aqui.
Aí você quer clicar e editar.
Mas nesse caso, o título e o conteúdo já tem alguma coisa, né?
Os dados já estão entrados.
Então a gente tem que arranjar uma maneira de pegar os dados do post e botar dentro aqui.
Certo, então a gente vai fazer o pedido na HTTP get pro post específico.
Pra isso a gente vai usar um novo action creator, tá bom?
Só voltando aqui.
Action creator, aqui no src, barra actions, barra index, outro js.
A gente já tem o fetch post aqui.
Não é?
Então, talvez, vamos fazer assim, não precisa fazer o pedido HTTP novo, não.
Vamos só pegar as informações que já estão no estado do aplicativo desse ver post, entendeu?
Como a gente já tem essa informação, a gente só basta extraí-la e pô aqui nesse campo aqui.
Certo? Então vamos passar, вот aqui.
Post edit, certo?


0008-24 CRUD com o Redux & React Native

Conexão do PostEdit ao Redux e Valores Iniciais do Formulário

```markdown
# Resumo do Transcript

## Edição de Post

Quando o usuário clica em "editar" em um post, o componente `PostEdit` é montado. O fluxo é assim:

1. **Extração de Dados**: Extraímos os dados do post selecionado e atualizamos os campos do formulário que inicialmente estão vazios.
2. **Conexão com Redux**:
   - Usamos o `selector` do `post reducer` para acessar e injetar o post selecionado no `PostEdit`.
   - Conectamos o componente `PostEdit` ao Redux com a função `connect`.
   - Definimos a função `mapStateToProps` para retornar as propriedades do estado que serão injetadas no componente, especificamente o `selected post` que é extraído de `state.post.selected`.
3. **Acessando o `connect`**: É importante lembrar de importar o `connect` do `react-redux`.
4. **Atualização do Formulário**:
   - Utilizamos o método de ciclo de vida `componentDidMount` para atualizar os dados do formulário com os valores do post.
   - Chamamos os action creators `changePostTitle` e `changePostBody` para mudar o título e o conteúdo, respectivamente, usando os dados do `selected post`.
5. **Uso do Destructuring**: É sugerido o uso de destructuring para simplificar a extração de `title` e `body` do `selected post`.

## Próximos Passos

No próximo vídeo, o foco será injetar os valores do formulário para que possamos mudar os valores depois do valor inicial.

Até lá!
```


O postform aqui, quando a gente estiver aqui no ver post e clicar editar, no momento que
clica editar e com essa cena, esse componente é montado, o post edit, a gente vai primeiro
extrair os dados do post que foi relacionado e com esses dados vamos mudar os campos do
formulário que inicialmente estarão vazios, certo? Então, passo a passo, se você se lembrar do post
reducer dentro do reducer, nós temos acesso ao post que foi relacionado dentro desse selector,
entendeu? Então, a gente vai pegar esse selector e injetar no post edit, certo? Vamos primeiro fazer
isso. Como é que a gente injeta? Vamos conectar esse componente post edit ao redux, a gente conecta
via o que? A função connect aqui embaixo, certo? Esporta o componente conectado com o que? O map
state to props, mas o que é o map state to props? Vamos definir uma função aqui,
o argumento para o estado, a gente retorna o objeto com as propriedades do estado que serão
injetadas nesse componente post edit. Nesse caso, eu quero injetar o post que foi relacionado,
eu vou chamar de selected post, você pode chamar de qualquer coisa, certo? E vai ser o que? Dentro
do estado, certo? Qual o nome do reducer aqui? Post, se você notar o index do reducer, a gente
deu nome para cada parte do application state, do reducer total, né? A gente tem um grande reducer
que é dividido em subcessões, chamados sub reducers, por exemplo, certo? Eu chamei esse
caso de post e tenho outro chamado postformer. Vamos usar o do post e dentro do post tem o que?
Ele retorna no novo estado que tem, olha, tem selected, a gente quer selected. Então, vamos
voltando a post edit, selected post vai ser state.post.selected. Dessa maneira, a gente vai ter
informação do post selecionado disponível como a propriedade chamada selected post, né? No props
post edit, certo? Isso é o primeiro passo. Então, a gente já tem acesso à informação,
ah, só um detalhe, a gente não importou o connect, vamos lá em cima,
port connect from react redux, certo? Então, se eu conectei certas, às vezes eu esqueço,
connect to react redux, correto? Voltando aqui. Então, vamos lá,
vamos usar a função de life cycle, life cycle method, né? O método de life cycle,
e vamos usar o componente dead mount. No momento que o componente for montado,
o que a gente quer dar? O que? A gente vai atualizar os dados do form.
Qual era aquele action creator que muda os dados do form? Se lembra? Vamos voltar lá
para o action index, vamos lá. Cadê aquele cara? Vamos aqui, a gente tem o change post
title e tem o change post body, certo? A gente tem dois. Então, a gente vai chamar esse cara
para mudar o título, esse cara vai mudar o conteúdo, certo? Então, vamos lá. Voltando
a post edit, des, ponto props. Já, já, a gente vai jeta no map dispatch to props, ainda não
fizemos, mas vamos lá. This some props, change o que? Post title, e this props change
post body. Mas, se a gente passar o argumento, né? Voltando aqui, qual argumento? Vai ser o título ou
body? Então, qual vai ser o body aqui? Você se lembra que a gente tem acesso ao this props,
selected post, né? E selected post tem o que? Tem um ponto title e tem um ponto body, né?
Esses dois. Então, a gente vai pegar isso. Vamos lá. Vamos lá. Pega esse cara aqui, passa aqui.
E pega esse cara e passa aqui, certo? Primeiro, a gente atualiza o formulário. Primeiramente,
o formulário é vazio. A caixa do título, de texto do título, não tem nada. Por isso que,
quando a gente componentes montar, a gente vai atualizar aquele com o título do post
relacionado, para inicialmente ter valores. E ainda mesmo, maneira para o conteúdo, certo?
Tá bom? Se você quiser dar uma refatorização aqui, porque esse negócio aqui parece,
tá muito, não tá muito legal, pode dar uma extraída usando o destructuring
de dentro do props, ponto selected post. Se não quiser agitar toda essa coisa, entendeu? E não
precisa mais falar esse cara aqui. Se você extrair o title e o body dentro desse objeto aqui,
aí não precisa mais dizer a mesma coisa. Tá, a mesma maneira pode também extrair
os action creators. Depende de você. Vou deixar assim mesmo, certo? Vamos continuar,
certo? Só uma recapitulada. Primeiro passo é a gente extrair a formação do post
relacionado, que tá lá no... A gente pega do reducer e depois muda o formulário usando esses
action creators, certo? Então até o próximo vídeo, onde a gente vai fazer o próximo passo,
certo? Que é, depois de configurar esses negócios, vai ser... O quê? Vai ser a gente vai
injetar os valores do formulário para que possamos mudar os valores depois
do valor inicial, tá bom? Então vamos lá. Até o próximo vídeo.


0008-25 CRUD com o Redux & React Native

Continuação do PostEdit e Teste da Exibição dos Valores Iniciais

# Resumo do Transcript

O transcript discute a implementação de um formulário de edição de posts usando Redux em um aplicativo React. O autor explica a necessidade de injetar valores do estado do aplicativo (application state) no formulário, destacando a diferença entre o estado do formulário e os valores do post original.

## Principais Pontos

1. **Injeção de Valores no Formulário**:
   - O formulário `postform` não exibe os valores de `title` e `body` porque não foram passados como propriedades (`props`).
   - É necessário mapear o estado do `postform` no componente de edição para trazer esses valores.

2. **Modificações no Mapeamento de Estado**:
   - No `mapStateToProps`, devem ser retornados `title` e `body` do `state.postform`.
   - O autor discute como utilizar `des.props.title` e `des.props.body` no componente.

3. **Funções de Mudança**:
   - É necessário definir as funções `onTitleChange` e `onBodyChange` para atualizar o estado do formulário.
   - As funções podem ser passadas como propriedades para o componente do formulário.

4. **Problemas de Persistência de Estado**:
   - O estado do formulário é mantido ao navegar entre diferentes páginas, o que pode ocasionar a exibição de dados indesejados.
   - Sugestões são feitas para limpar o formulário quando um usuário sai da página ou ao cancelar uma edição.

5. **Injeção de Ações**:
   - O documento enfatiza a importância de injetar os action creators necessários usando `mapDispatchToProps`.
   - O autor explica duas maneiras de definir essas ações, optando por um objeto em vez de uma função.

6. **Limpeza do Formulário**:
   - Para evitar que dados antigos apareçam quando se navega para um novo formulário, o autor sugere implementar uma lógica para limpar os valores do formulário, especialmente ao sair da página de edição.

## Conclusão
O transcript foca na integração e manipulação de estados e ações no Redux dentro do contexto de um formulário em um aplicativo React, abordando problemas comuns e suas soluções.

Então, continuando, vamos aqui.
Então, a gente não, embora que tenhamos mudado o valor inicial do formulário no estado do
aplicativo, o application state ou a store, a gente não dá pra ver ele no formulário
porque o postform não recebeu o título, né, o body.
Mas onde é que tá esse título e o body?
Certo?
A gente tem que injetar porque esses caras vem do que reducer, de que reducer eles
vem do postform reducer, certo?
Não é post reducer, é o postform agora, entendeu?
São coisas diferentes.
O postform reducer vai retornar um novo estado, o estado do formulário, do title e do body,
certo?
Então, vamos lá.
Vai no post edit.
Lá embaixo, no map state to props, a gente tem que adicionar umas coisas aqui.
Retornar também o que?
O title e o body.
Mas da onde?
Do state.q postform, né?
Deixa eu ver se eu digitei corretamente.
Vou lá pro index do reducer.
Se chama postform, tá certo?
Então, lotando aqui, postform.q.title.
Da mesma maneira, state postform body.
Então, injetamos os valores do formulário dentro desse componente.
Agora, a gente pode usar aqui, des.props.tire e des.props.body, certo?
Note que esses caras aqui, embora que já tínhamos os mudados aqui modificados, não
apareceu um formulário porque a gente não deu o postform nas propriedades.
Esse action creator tá usando esse title e esse body, mas esses caras são os valores
do post relacionado.
A gente não pode mudar esse cara, porque é os valores iniciais do post.
O post tem esse valor, mas a gente tá mudando, na verdade, é o formulário e não o post
original, entendeu?
São diferentes.
Então, com isso, vamos continuar aqui.
Qual é o on title change e o on body change?
Certo?
A gente pode definir aqui também.
Certo?
Se bem que chovei aqui o negócio aqui.
Voltando ao postform, a gente passou como des.props.
Se bem que eu acho que a gente poderia usar definir o on title change e o on body change
dentro desse componente postform.
Agora que eu tô pensando aqui.
Mas se você quiser dar essa refletarização, você pode, mas toma cuidado porque como o
formulário postform são um detalhe que o postform tá sendo usado em duas páginas,
duas cenas, né?
Então, se você for pra editar, digitar alguma coisa, aí volta.
O estado vai ser mantido.
Então, por você clicar novo, vai aparecer lá também.
Eu vou te mostrar isso já, já.
Mas vamos voltar aqui.
Vamos deixar assim mesmo.
Vamos lá.
Vamos definir o on title change aqui.
Vai ser a mesma coisa que os outros, né?
On title change.
Oh, não precisa desse, desculpa.
Vai ser o que, igual, função de fletcher.
Fazer o que?
Vez.
Ah, eu botei taro aqui.
Desculpa.
Vai ser o que?
Vez.props.change.postaro com um novo taro, né?
Da mesma maneira, eu vou esperar você editar o on body change.
Certo, aí, tudo certo?
Você volta aqui, você volta pro...
Se você voltar pro post new, você vê que é a mesma coisa, né?
Esse e esse.
A gente tá fazendo a mesma coisa lá.
Então, por isso que eu sugerei que a gente talvez ponha desse cara de volta pro post form.
Certo?
Então, vamos aqui continuar.
Vou dar a copia e dupliquei a linha.
No meu caso, no do Atom, eu pode digitar comando shift D no caso do Mac.
Não sei, hotkey do Windows ou do Linux.
Se você souber, por favor, poste nos comentários.
Post aí, valeu.
Então, vamos lá.
Change pro body.
Ah, desculpa.
Vai copiar a coisa toda.
On body change.
Body.
E...
Certo.
Certo, agora vamos lá e passar desse on body change.
Esse cara vai ser passado como props pro post form e o des on body change.
Vai ser passado como props, chamado on body change, dentro do post form.
Certo?
Então, vamos só dar uma testadinha.
Vou botar aqui a função no.
Pode também retornar on define.
Não importa.
Certo?
Só pra deixar um placeholder aí.
Vamos voltar aqui e ver se não deu erro.
Se esqueci de alguma coisa, esquecemos de alguma coisa, né?
Cadê?
Tem nenhum post?
Ah, deve ser porque o hero que eu tá dormindo.
Cadê?
Opa.
Opa, desculpa.
Dá?
Até errado esse negócio.
Como é que sai daqui?
Home.
Pousse de post, Redux.
Sai, pareceu.
Acho que o hero que eu tava dormindo serve o Dino.
Como tava dormindo, reiniciou uma nova instância e apagou todos os posts.
Como a gente já falou disso, alguns vídeos atrás.
Então vamos lá.
Vamos clicar num deles.
É de tá.
Ah, esquecemos de o quê?
De injetar os action creators usando o map dispatch to props.
Então vamos lá.
O que é aí?
Post edit.
Esses caras, ele não sabe o que é.
Então vamos lá.
Constant map dispatch to props.
Então, há duas maneiras de definir o map dispatch to props.
Uma função que retorna o...
Cadê?
Função que retorna usando o combine, não sei o quê,
bind action creators é.
Essa função que retorna esse cara aqui,
chamada o bind action creators,
e o parâmetro do map dispatch to props dispatch.
Mas tem também a outra maneira que é só usando um objeto.
E esse que eu vou usar aqui.
Tá bom, só pra você aprender um outro jeito.
Map dispatch to props, vou definir como objeto.
Não uma função, tá bom?
Esse objeto vai ter o quê?
Vai ter aqueles caras, aqueles action creators que a gente usou,
que nós usamos aqui.
Change, post title e change, post body, certo?
Agora, a gente tem que importar.
Vamos lá em cima.
Certo? Vamos lá importar esses caras.
Da onde?
Unir diretório acima, barra actions.
Tenho que ir change, post body, change, post title.
Certo?
Ah, você nem importa a ordem mais, sei lá,
só pra deixar consistência.
Title e body.
Vamos lá.
Novamente, esse não tem mais nenhum erro.
Esperando, um, dois, três, ah.
Hello world.
Editar.
Ter esse ponto props, change, post body, no other function.
De novo, o que é que aconteceu?
Mais uma vez, a gente esqueceu do quê?
De passar o map dispatch props pro connect.
Então, vamos lá embaixo.
O connect tem o map dispatch props como o primeiro argumento
e o segundo argumento é o map dispatch props.
Nessa maneira, essas caras vão ser injetadas no post edit.
Então, vamos continuar?
Mais uma vez, espero...
Esperamos que não tem mais erros, certo?
Vamos lá.
Um, dois, três, cadê?
Aí, tá aí.
Então, pareceu.
O formulário já com os valores definidos.
Certo?
Mas, vamos voltar aqui.
Clica novo.
Opa, o que é que aconteceu?
Eu mecionei isso antes.
Porque, quando você clica aqui e clica a editar,
a gente pega os dados do post relacionado, esses dados,
modifica o estado do aplicativo, modifica aquele post form, né?
O title e o body.
Então, tá modificado no estado do aplicativo já.
E como a gente tá usando o mesmo formulário para o editar e para o novo,
tá aparecendo também no novo, certo?
Qual é a solução pra isso?
A solução é limpar o formulário toda vez que sair da página, da cena.
Quando você estiver no novo, e...
Só, desculpa, novo não, no editar, né?
Se você estiver no editar, se você quer cancelar ou voltar,
você tem que apagar tudo, certo?
Se não, vai aparecer no novo.
Dá mais maneira, depois de clicar OK, a gente vai limpar também.
Então, como a gente vai fazer isso?


0008-26 CRUD com o Redux & React Native

Correção do Problema dos Dados do Formulário Não Serem Limpados

# Resumo do Transcript

O discurso aborda a implementação de um método no React para limpar um formulário sempre que um componente é desmontado. Aqui estão os pontos principais:

1. **Ciclo de Vida do Componente**:
   - Utiliza métodos do ciclo de vida do React, especificamente o `componentWillUnmount`, que é chamado antes do componente ser removido do DOM.

2. **Resetar o Formulário**:
   - Para limpar o formulário, é proposto a criação de um *action creator* chamado `resetPostForm` que enviará uma ação para o Redux para resetar os estados do formulário.

3. **Definição de Ação e Redutor**:
   - Uma nova ação é definida no arquivo de ações, que retorna um objeto com o tipo `RESET_POST_FORM`.
   - No redutor, ao receber essa ação, é retornado um novo estado com o título e o corpo do formulário vazios, utilizando um estado inicial (`initialState`).

4. **Conexão dos Props**:
   - A ação `resetPostForm` é injetada nas props do componente `PostEdit` através do `connect` do Redux.

5. **Testes**:
   - O processo de teste é realizado para verificar se o formulário é limpado corretamente ao mudar de post.

6. **Alternativa Proposta**:
   - É discutida uma alternativa onde a ação `resetPostForm` poderia ser chamada em outro componente (`PostNew`), mas conclui-se que essa abordagem pode ser mais verbosa e menos eficiente.

7. **Conclusão**:
   - A solução implementada resolve o problema de o formulário mostrar dados indesejados após a edição, garantindo que o formulário seja limpo ao navegar entre diferentes posts.

Esse fluxo de raciocínio demonstra a aplicação das boas práticas na gestão de estados de formulário em aplicativos React utilizando Redux.

Então, a gente pode limpar o formulário toda vez que a gente sair daquela cena, a
gente pode usar um método de life cycle, né?
Ciclo de vida.
Método de ciclo de vida.
Nesse caso, vamos ver aqui.
Vamos lá pra página do React Life Cycles.
Só pra ver qual método de life cycle devemos usar.
Demorando um pouquinho, porque eu tô fazendo os uploads ali.
Cadê?
Tem o mounting e tem o update e tem o unmounting.
Vamos ver se cara, esse método is called when a component is being removed from the
dome.
Esse método é chamado quando o componente está sendo removido, é removido do dome.
Próximo ser removido do dome.
Então, a gente pode usar esse cara, component well mount.
Unmount.
Invocado imediatamente antes do componente ser desmontado, né?
E destruir.
Ah, não sei o quê.
Ok, então vamos lá, vamos ver se o cara vai dar.
Então vamos no post edit.
Depois o component den mount, component well mount.
Vamos ver.
A gente quer resetar o formulário.
Limpar tudo.
Quando esse componente for desmontado.
Para fazer isso, a gente tem que criar um action creator que vai mandar uma ação, uma
action dizendo por favor limpe o formulário.
Reset, não, resetar.
Então vamos lá para actions index.
A gente vai definir o quê?
Um action creator para resetar o form.
Reset form, post form, né?
Vamos ver aqui.
Certo?
Vai ser bem simples.
Uma função que retorna uma ação.
E essa ação vai ser tipo o quê?
Vamos chamar reset, post form, certo?
A gente vai mandar essa ação e o reducer, responsável pelo formulário, vai receber
isso e vai limpar o formulário.
Certo?
Então, voltando aqui no...
Vamos lá para o post form reducer, certo?
Seu cara que é responsável pelo formulário, esses caras aqui.
Então quando você...
Ele receber esse...
Case reset, post form.
O que a gente vai fazer?
A gente quer retornar um novo estado com o título vazio e o body, conteúdo vazio.
Certo?
Vai notar que a gente tem esse objeto aqui já definido nessa variável chamada initial
state.
Então nem precisa falar isso de novo, só falar return initial state da mesma maneira
que a gente fez aqui antes.
Tá bom?
É só isso.
Muito simples.
Então vamos voltar ao action aqui, só para dar uma re-fatorização.
Eu quero te mostrar uma coisa legal.
Aqui a gente definiu uma função de flash, né?
Só para retornar um objeto, que é a action.
Nesse caso você nem precisa falar return, você pode ometer isso aqui.
É só remover isso e remover isso aqui, certo?
Nesse caso você tem uma função de flash aqui retornar o objeto, mas nesse caso não
vai dar certo porque ele pensa que essas chaves estão definindo um bloco de uma função,
mas a gente está retornando na verdade um objeto.
Então por isso que a gente precisa dos parênteses.
Nesse caso agora a função entende que está retornando o objeto de tipo, objeto com
propriedade type, reset, postform.
Pode até pôr uma linha só se quiser.
Certo?
Tá aí.
Bem simples.
Só para recetar o formulário.
Luz, campus, do formulário.
Que estão no store do Redux, certo?
O title e o body.
Agora voltando para o post edit.
Nós vamos chamar esse action creator.
Vai lá do componente will amount, this.props.uk.
Reset, postform.
Certo?
Bem simples.
Mas a gente tem que primeiro injetar o reset postforms nas props do post edit.
Então vamos lá embaixo no connect.
E connect tem o map to special props.
Que tem aqui definido.
Vamos adicionar reset postform.
Agora a gente tem que importar esse cara.
Vamos lá em cima.
Vai lá em cima.
Importa o quê?
Reset postform.
Certo?
Tudo legal.
Então com esse componente post edit, se estiver prestes a ser desmontado, vai chamar o reset
postform para limpar o formulário.
Deixar tudo vazio, limpinho, para não ter problema quando a gente for para o page de
novo e assim foi adiante.
Então vamos lá.
E testar.
Vê se não tem nenhum problema.
Aí vamos clicar hello world, editar.
Certo?
Tá?
O formulário aqui.
Volta, volta.
Agora vai para o novo.
Clica em novo.
Tá limpo.
Certo?
Então tá tudo legal agora.
Vamos só testar se a gente mudar de post.
Se vai mudar.
Mudou.
Editar.
Mudou.
Volta, volta.
Clica em novo.
Tá certo.
Tudo legal, hein?
Você note até que fazendo dessa maneira componente whale amount nem precisa fazer limpar o formulário
quando der o create post.
Se a gente comentar isso aqui, vamos ver se ainda funciona.
Ah, desculpa.
Não vai funcionar porque eu botei whale amount dentro do post edit.
Mas se a gente tivesse component whale amount, this props reset post form dentro do post
new.
Dessa maneira aqui, deixa eu só copiar só para demonstrar.
O post new vai ter o component whale amount reset post form.
Vai lá embaixo.
Você não precisa fazer isso não.
Eu só quero demonstrar que dá para fazer essa maneira também.
Eu acho que essa maneira nem é tão boa porque eu tenho que digitar muitas coisas aqui, né?
Reset post form.
Vou fazer rapidinho isso para você ver.
Reset post form.
Vai lá em cima.
O post reset post form.
Salva.
Agora eu vou lá do producer e comentei esse cara.
Volto aqui no post new.
Vamos lá.
Vou testar.
Eu clique no novo.
Não sei o que.
Não sei o que.
Clique OK.
Cadê o cara aparecer?
Eu volto para o formulário e está limpo.
Certo?
Então funciona também dessa maneira.
Depende de você que maneira que eu vou voltar a maneira de antes, certo?
Usando só o próprio...
Vou tirar esse componente life cycle.
Volto no reducer.
Vou deixar esse cara aqui.
Deixa eu ser de novo.
E no post edit.
Já deixa assim mesmo, certo?
Então a gente resolveu o problema do formulário das datas aparecerem no formulário de novo.


0008-27 CRUD com o Redux & React Native

onCancelPress e onOkPress (Action Creator updatePost)

# Resumo do Vídeo

No vídeo anterior, foi resolvido o problema do formulário preenchido ao mudar entre as cenas de edição e nova postagem. Neste vídeo, o desenvolvedor volta à cena de edição de post e começa a adicionar as propriedades necessárias para o formulário de postagem, focando inicialmente na função `onCancelPress`.

### Tópicos Abordados:

1. **Função `onCancelPress`:**
   - A funcionalidade dessa função é retornar à cena anterior quando o usuário clicar em "Cancelar".
   - É preciso usar o `actions.pop` do React Native Router Flux para implementar essa funcionalidade.
   - O criador do vídeo desafia os espectadores a implementarem essa função por conta própria.

2. **Resolução de Problemas:**
   - Inicialmente, a função não estava funcionando porque não foi conectada corretamente no componente.
   - Também foi mencionado que o `actions` não foi importado no topo do arquivo.

3. **Implementação de `onOkPress`:**
   - O próximo passo é implementar a função `onOkPress`, que irá atualizar um post existente no banco de dados usando a API.
   - O método HTTP utilizado será `PUT` para realizar a atualização, e um action creator semelhante ao de criação de post será criado para esta função.

4. **Action Creator `updatePost`:**
   - Uma nova função chamada `updatePost` será criada no arquivo `src/actions/index.js`.
   - Esta função fará a requisição utilizando `axios` para atualizar o post e retornará uma ação ao Redux.
   - Barreira: será necessário usar os dados retornados pelo axios, que ficam disponíveis em `action.payload.data`.

5. **Atualizando o Reducer:**
   - O reducer responsável pelos posts terá que lidar com a nova ação `updatePost`.
   - Quando a ação for recebida, ele deve atualizar o post selecionado com os dados mais recentes.

### Conclusão

O vídeo mostra o processo de implementação de funcionalidades em uma aplicação de gerenciamento de posts, destacando a importância de uma estrutura clara no gerenciamento do estado com Redux e o uso apropriado de requisições assíncronas com Axios.

--- 

Esse resumo em Markdown fornece uma visão clara do que foi discutido no vídeo, abordando os principais pontos e as etapas de desenvolvimento.

No vídeo passado nós concertamos aquele problema do formulário estar preenchido depois
que a gente saía da cena do editar e ia para a cena do novo.
Agora nós vamos continuar o desenvolvimento voltando lá para o post edit.
Vamos continuar a adicionar as propriedades que são necessárias para o post form.
A gente ressta agora a adicionar as funções do onCancelPress e onOkeyPress.
Tá bom?
Então onCancelPress muito fácil é só dar o pop usando o actions do reactnator router
flux.
Então como desafio eu quero que você faça o onCancelPress aqui.
Vou esperar pause o vídeo quando estiver preparado continua.
E aí tudo certo?
Então vamos lá fazer o onCancelPress vai ser da mesma maneira que o que a gente fez
no post new.
Se você voltar aqui no post new você notar onCancelPress aqui vai ser a mesma coisa.
Então vamos lá voltar aqui no post edit.
Ah eu vou tirar esse semicolon aqui esse ponto em vírgula.
Continuando onCancelPress.
Vamos usar a property initializer usando igual e vamos usar a função de flash.
Definir a sua função.
O que a gente quer quando clicar cancelar?
E volte para a cena anterior.
Simplesmente uso actions o objeto fornecido pelo reactnator router flux nos permite a
mudar de cena.
Nesse caso a gente vai usar o pop para remover a cena que a gente está.
Nesse caso vai voltar para a cena anterior que no caso do editor aqui vai ser a cena
ver post.
Se eu voltar esse cancelar vai ter a mesma função desse botão aqui que já está definido.
Então actions.pop.
Salvar.
Deixa eu ver aqui.
Vamos testar.
Estive o habilitar o live reload aqui que eu não tinha antes.
Vamos clicar em um dos posts clicar editar e ver se funciona quando clicar cancelar.
E aí o que aconteceu?
Não funciona porque a gente esqueceu de conectar aqui.
Digitar o oncancelpress des.oncancelpress.
Certo?
Esquecemos de dizer qual função para chamar quando apertar o botão.
Tocar no botão.
Então clicando aqui novamente.
Editar.
Cancelar.
Ah!
Mais outro problema.
Você sabe o que aconteceu?
Isso mesmo.
Esquecemos de importar o actions.
Então vamos lá em cima no topo do arquivo.
O actions faz parte do que?
Do react-native-router-flux.
Então vamos lá import actions.
Tem que dar destruturada.
From react-native-router-flux.
Certo?
Vou salvar.
Vamos lá.
Editar.
Cancelar.
Funcionou direitinho.
Vamos só ver usando a flash que já estava funcionando.
Nós adicionamos o botão cancelar que funciona da mesma maneira que esse botão da esquerda.
Certo?
Então vamos continuar e fazer o botão de ok.
Vamos ver o que vai acontecer.
Certo?
Antes disso a gente não testou se é digital o formulário funciona.
Então antes de fazer o botão de ok vamos lá ver se esse formulário está sendo editado
mesmo.
Está tudo funcionando.
Sem problemas.
Tudo bem então.
Então para o botão de ok como é que isso vai ser?
A gente vai editar um post.
O post já existe no banco de Daz.
A gente vai usar api para fazer um pedir o que?
Put ou patch se você quiser.
Eu vou usar put.
Eu T.
Vamos usar o put para dar um update nesse post.
Para isso a gente vai precisar do que?
Vamos fazer um action creator.
Certo?
Aquel action creator da mesma maneira que a gente fez action creator criador de ação
para fazer pedir a gata de P para criar um novo post para obter as informações de um
certo post ou para obter as informações de todos os posts.
A gente tem que adicionar um action creator para fazer o update.
Então vamos lá.
Vamos no actions src-actions-index.
Vamos adicionar um action creator da mesma maneira que os outros.
E vai ser muito similar ao create post aqui.
Nesse caso essa diferença vai ser que não vai ser post vai ser put.
Certo?
E a gente vai adicionar o id do post aqui.
Nessa URL.
Nesse endpoint.
Certo?
Então vamos aqui.
Eu te desafio a fazer primeiro que eu pause o vídeo e tente fazer o update post.
Certo?
E aí?
Eu tudo certo?
Vamos lá?
Vamos lá exportar já.
Fazer um variado update post que vai ser uma função.
Certo?
Nesse caso a gente vai precisar do que?
Informações sobre process.
A gente pode pôr post como um parâmetro.
Então vamos fazer o actions put e vamos usar o que?
Vamos usar essa request URL que se você já esqueceu.
A gente vai lá em cima e lembrar.
Request URL é só um string que tem o endpoint da API.
Nesse caso eu estou usando o Hiroko.
Mas você também pode usar o localhost se você estiver rodando o JSON server localmente.
Certo?
Então voltando aqui, vai ser barra post, barra o id do post.
Da mesma maneira do get aqui você vê esse aqui.
Vai ser a mesma coisa aqui.
Esse cara aqui.
Então vamos lá.
Eu vou usar a string interpolation usando back tick.
Esse aqui como é que fala?
Centro grave?
Eu sei lá.
Deixa o comentário aí pro nome desse cara aqui.
Então vamos lá.
A gente vai dar uma interpolação na string dessa variável pro substituir o valor aqui no lugar desse cara.
Barra post, barra o id do post.
Vamos ver como é que a gente vai fazer.
Será que a gente pega o id dessa variável ou adiciona uma variável id aqui?
Tem duas maneiras de fazer isso.
O que você acha?
Qual maneira?
Deixa eu ver aqui.
A gente pega o get, tinha um id.
Quando ferro o crédito só tem o post.
Vamos deixar com o id aqui e vamos ver depois se a gente tem que mudar.
Vamos colocar o id aqui.
Post id, put.
E tem que mandar os dados como segundo argumento.
Não se esqueça.
Às vezes eu me esqueço do segundo argumento pro post ou o put.
E não sei porque tem um problema que está acontecendo.
Qual é o problema?
O segundo argumento é os dados.
Certo?
Nesse caso vamos botar esse cara dentro de uma variável.
Se note que o axios, ponto put, retorna uma promessa.
Se você não conhece bem o axios.
Se você não conhece bem o axios, ponto put, retorna uma promessa.
Então o request é uma variável que está armazenando a promessa.
E essa promessa vai demorar tempo para ser full filled.
Para ser como é que fala?
Vai pro servidor, faz o pedido e recebe a resposta.
E depois recebe a resposta, a promessa é full filled.
A gente vai retornar sempre do um axio-creer ou a ação.
Sempre retorna a action.
E essa action tem um tipo de quê?
Vamos criar um tipo que a gente fez, create post aqui.
Então vamos mudar, sei lá, update post.
Essa maneira payload vai ser a request.
Como a gente está usando o middleware chamado redux promise?
Se você se lembra, voltando aqui pro app, quanto já está essa?
Só aqui para explicar um pouquinho.
A gente está usando redux promise, esse cara aqui.
Esse pacote.
O que ele faz?
Voltando aqui para o action index.
Fazer um pedido HTTP, a sincron.
Então vai demorar um pouquinho para receber a resposta.
Então não dá para retornar esse cara na mesma hora.
Então vai ter que esperar um pouquinho.
E o redux promise?
Quando a promessa aqui for full filled.
E receber a resposta, ele vai substituir essa request com o valor da resposta.
Nesse caso, há o responso do axios.
Certo?
Então é conveniente usar o redux promise.
Tem também outra maneira de fazer esse negócio,
com o chamado redux tank.
Mais avançado que em vez de retornar um objeto do action-creer,
você retorna uma função.
Então vou deixar aí você se quiser interessar para pesquisar o redux tank.
Vou deixar no redux promise para ficar mais simples.
Certo? Então vamos lá.
Vamos ver se conferir está tudo ok aqui.
Faz um request e retorna ação update-post.
Agora toda vez retorna ação,
essa ação é despachada para todos os reducers,
quando você chama o action-creator.
Então vamos qual o reducer que vai lidar com esse negócio?
Vamos pensar.
Então quando a gente dá um update no post,
vamos lá, que é aqueles post reducers?
Tem o post selecionado.
Você note que quando a gente dá um update no post,
vai voltar para aquela cena que tem o post,
o ver post.
Então o ver post está usando essas informações,
na verdade é desse selected.
Então a maneira de a gente fazer coisas,
a gente vai ter que dar um update no selected
e substituir o valor que já tinha pelo valor atualizado.
Então esse cara vai ter que lidar com o update post.
Vai ter que dar o caso do update post.
Certo?
Então vamos lá fazer aqui o case update post.
Vamos só falar aqui no selected,
depois vamos ver se o AL também tem que mudar.
Vamos ver aqui no update post.
Então, o que é que vai acontecer?
A gente vai retornar o novo estado
e copia as propriedades do estado anterior,
e o selected agora vai ser o quê?
Vai ser o action.payload.data.
O action.payload é a resposta do Axios.
Mas para pegar aquela informação da resposta,
na verdade o valor está dentro do data,
do data, dos dados.
Certo?
E por que eu estou usando isso?
Porque eu espero, porque é um API RESTful de REST,
serviço REST.
Quando você dá um update,
você sempre obtém o objeto que foi atualizado. Certo?


0008-28 CRUD com o Redux & React Native

Terminamos de Desenvolver o updatePost

```markdown
# Resumo do Transcrito

O apresentador demonstra como realizar uma atualização de um post usando a API e o Postman, explicando passo a passo o processo de edição e a integração no código.

## Passos Seguidos:

1. **Uso do Postman**:
   - O apresentador abre o Postman para realizar uma requisição PUT.
   - Configura o body da requisição para JSON.

2. **Realizando uma Requisição GET**:
   - Primeiro, é feita uma chamada GET para obter o post que será atualizado, copiando a URL da API.

3. **Configurando Requisição PUT**:
   - A URL para a requisição PUT é montada utilizando a URL do post, incluindo o ID.
   - O corpo da requisição é modificado para alterar os campos (título e corpo do post).

4. **Enviando a Requisição**:
   - Após enviar a requisição, o apresentador verifica a resposta do servidor, que retorna um status `200 OK` e o post atualizado.

5. **Atualizando o Reducer**:
   - O post atualizado é armazenado em `response.data`, e o reducer é configurado para utilizar este novo post.

6. **Implementação no Componente**:
   - No componente de edição de post, o apresentador implementa a lógica para chamar o action creator `updatePost` ao pressionar OK.
   - A ação utiliza o título e o corpo do formulário, além do ID do post selecionado.

7. **Refatoração do Código**:
   - O apresentador realiza um refactoring para simplificar o código usando destructuring para extrair propriedades do objeto `this.props`.

8. **Navegação Após Atualização**:
   - Após a atualização, o apresentador comenta sobre a necessidade de retornar à tela anterior, utilizando a função `pop`.

9. **Testando a Atualização**:
   - A funcionalidade é testada, e o apresentador identifica e corrige um erro no código que impedia a atualização de ser feita.

10. **Verificação Final**:
    - O resultado é verificado no servidor usando outra chamada GET para garantir que o post foi atualizado corretamente.
    - O apresentador nota que a lista de posts não foi atualizada, prometendo resolver isso no próximo vídeo.

## Conclusão:
O tutorial ilustra perfeitamente o fluxo de edição de um post, mostrando como as requisições funcionam, como os dados são manipulados no frontend e a importância de garantir que todos os componentes estejam adequadamente conectados entre si.
```


Só para demonstrar aqui a resposta da API eu vou abrir o postman, certo?
Você se lembra desse cara?
Vou abrir o postman aqui e vou fazer um pedido put, o body, body, raw, em vez de text, JSON,
application, JSON.
Então, vai ser o que?
Deixa eu ver aqui.
Se eu abrir uma nova aba antes disso, vou fazer um get do post que a gente quer atualizar.
Deixa eu copiar o RL aqui do meu API aqui.
Vou aqui no index do actions, vou copiar a minha request RL, certo?
Pro meu postman.
Se eu dar um get, vai pegar esse cara, barra posts, todos os posts, certo?
Post número um, esse cara.
Agora eu vou pegar esse aqui, vou copiar, certo?
Eu vou voltar para outra aba e vou colar aqui no body, certo?
Deixa eu copiar o RL, voltando para o outro, copiando um RL, incluindo o ID do post,
está certo?
Barra posts, barra um.
Importante ter o ID aqui, a gente está fazendo o pedido put, é post barra o index, o ID
do post.
Nem precisa desse cara aqui, certo?
Porque já está aqui.
Então, a gente vai mudar aqui para hello para hello lá e vamos mudar o body e vamos
tirar esses negócios aqui.
Muito legal.
Então, vamos ver o que acontece.
Clica send, vou aumentar aqui para você ver todo o cara.
Clica send e ver o que acontece.
Então, a resposta do servidor está aqui embaixo, vou dar uma rolada, vou rolar aqui para
baixo, ganhei 200 OK, 200 OK, e você note que você recebe de volta como resposta o
próprio post, incluindo o ID e o post já está atualizado na resposta, tem um legal
e hello world, certo?
Por isso que a gente vai usar esse cara que vai ser o response.data, response.data,
está bom?
Voltando aqui.
Para o post reducer.
O que a gente vai fazer?
O selected vai ser o novo, aquele post, aquela resposta que a gente obteu com o post atualizado.
Certo?
Vamos voltar, a gente fez o action creator, agora vamos ver se está funcionando.
Voltando ao post edit.
Vamos ver o que?
Vamos fazer o OK press, e você já sabe como é que faz, não é?
Como é?
Vou esperar você fazer o OK press e você vai chamar aquele action creator, update post que a gente fez,
certo?
E você vai usar esse tira aqui e esse body que vai vir do des.props,
desculpa, não é?
Desse.props, select post não, é do title e do body do formulário, certo?
E aí deu tudo certo?
Vamos lá fazer.
OK press.
Vamos lá, desse.q
Update post.
A gente tem que passar o que?
Press a função, para essa função, tem que ter o, primeiro de tudo tem que ter o post.
O post é um objeto, o objeto tem o título e o objeto tem o body.
Mas cadê esse cara?
Está dentro do props, vamos lá embaixo para o map state props, esses caras aqui.
Note que é o título e o body do formulário, não é do selected post, selected post é o original.
O title e o body são os valores que foram modificados, eles contêm os valores que foram modificados.
Então vamos usar des.props.tirefdes.props.body.
Certo?
E o segundo argumenta é o id do que?
Do post.
Mas como é que a gente vai obter esse id?
Bem, a gente tem o post selecionado, não tem aquela informação?
Voltando lá embaixo para o map state props, a gente tem acesso ao post original.
E esse cara original contém o id, certo?
Então vamos pegar o id do selected post.
Vamos lá, voltando aqui.
SelectedPost.id, nesse caso é des.props.
Eu sei que não dá nem para ler mais, deixa eu botar o soft wrap aqui.
Mas eu não gosto de linha longa, é preferência, mas vamos fazer o refactoring, a refatorização.
Normalmente o título, o body e o selected post estão dentro do objeto des.props.
Então vou fazer o destruturamento aqui do s6.
Vou extrair as propriedades, título, body e o selected post do que?
Do des.props.
Nessa maneira, a gente não tem que digitar mais des.props e nem aqui.
E como esse cara aqui, essa chave, esse valor, a propriedade de título, tem o mesmo nome que o seu valor,
podemos usar essa maneira aqui mais curta, não é?
Só precisa digitar o body e o body, mesma coisa que a gente tinha antes.
Certo? Fica melhor, eu acho melhor ver assim.
Então vai chamar update post, um título e body, um objeto que é o post e o ID.
E voltando aqui, deixa eu botar aqui lado a lado para você visualizar o post added e o index.
Cadê? Vou botar esse cara para cá.
Então aqui, a gente está aqui chamando update post,
aqui o update post, level post, level post ID, não é?
E dá o request, request usa o post ID para o RL e o post é mandado como segundo.
Argumento para o access.put, certo?
Então vou voltar aqui, tudo ok?
E o que é que vai acontecer depois que a gente dá o update?
A gente quer voltar para a cena anterior, certo?
Então o que a gente pode fazer? Aqui nesse caso pode dar o pop, como a gente já lhe deu com o update post
dentro do reducer aqui, que muda o selected, então não tem problema usar pop aqui.
Então vou usar o pop, actions.pop, mesma coisa que o oncancelpress, né?
Pode até chamar esse cara também se você quiser, para não digitar mais o que eu estou fazendo.
Então tudo certo? Vamos testar.
Vamos lá? Cadê?
Clique em cara, editar, deixa eu mudar o título primeiro.
Vou clicar ok.
Nada aconteceu? Será que eu atualizei o negócio?
Deixa eu atualizar.
Ah, eu sei o que aconteceu, acho.
Esquecemos de o que?
Voltando aqui, des.updatepost, está errado, né? Des.props.
O action creator é injetado como props no componente.
Para injetar esse cara, precisa fazer o que? Primeiro vai lá no map dispatch to props e adiciona ele.
Certo? Qual é? Update post.
E para poder usar esse cara aqui, tem que o que? Importar.
Não sabe o que é, vai lá em cima, importe o que? Update post do actions. Certo?
Acho que essa linha já está muito longa e eu vou quebrar o link aqui.
Certo? Vamos testar novamente. Já deu update.
Editar, vou remover esse negócio do título.
Tira esse arquitecto, não sei o que.
Ainda não funciona. Então, você sabe qual é o problema?
Voltando aqui, post edit. Quando a gente clica ou toca no botão OK, a gente vai chamar o onpress do touchable opacity.
Mas qual é o onpress desse cara aqui? Não tem nada. Então, o que devem adicionar? Des.onpress, que está aqui.
Certo? Agora vai chamar esse cara quando a gente clicar OK.
Editar. Vamos lá, vamos lá. Espero que não tenha mais erros, que não tenhamos esquecido alguma coisa.
Funcionou. Certo? Vamos editar de novo, só para ver. Vamos adicionar.
Oi, oi, oi. Tudo OK. Oi, oi, oi, tudo OK. Então, modificou esse cara.
Será que modificou no servidor mesmo? No banco de dados? Vamos verificar.
Eu vou voltar aqui para o postman para o meu pedido get. Vou pegar o get do primeiro post.
Vou mandar. Ah, desculpe, é o segundo post, né? Segundo post número dois.
Vou mandar. Você note o título. Oi, oi, oi. E tudo OK. E o id número dois. Certo?
Então, tá. Tudo OK no servidor e no front end aqui. No back end e no front end.
Agora, vamos ver se modificou o título na página, na lista. Volta aqui na lista.
Você note que o título não está atualizado. Isso. E agora?
Então, a gente vai ajudar com isso no próximo vídeo.


0008-29 CRUD com o Redux & React Native

Resolvemos o Problema da Lista de Posts não ser Atualizada Depois de Atualizar um Post

# Resumo do Transcript

O transcript aborda o problema de uma lista de posts que não atualiza corretamente após a edição de um post. A solução proposta envolve a atualização da lista quando um post é editado. 

## Estrutura do Estado

- O estado da aplicação possui uma propriedade chamada `all`, que é um array contendo objetos de post.

## Processo de Edição de Post

1. **Identificação do Post**: Ao atualizar um post, identificado pelo seu `id`, o sistema deve gerar um novo estado da lista de posts.
2. **Uso do `map`**: O método `map` do JavaScript será utilizado para iterar sobre todos os posts. Para cada post:
   - Se o `id` do post for igual ao `id` do post que está sendo editado, o novo post atualizado será retornado.
   - Caso contrário, o post original continuará sendo retornado.

## Implementação

- A função `map` cria uma nova lista com a atualização.
- É importante garantir que a nova lista não altere a lista original inadvertidamente.

### Exemplo de Código

A implementação destacada inclui a definição de uma função que usa o `map`:

```javascript
const novosPosts = state.all.map(post => {
  if (post.id === action.payload.data.id) {
    return action.payload.data; // Retorna o post atualizado
  }
  return post; // Retorna o post original
});
```

## Testes de Funcionamento

- O sistema foi testado após as edições, e os resultados mostraram que a lista foi atualizada conforme o esperado, mantendo outros posts intactos.
  
### Notas Finais

- Uma sugestão foi adicionada para encapsular variáveis em um bloco adequado para evitar conflitos de escopo.
- O autor sugeriu melhorias para simplificar a notação e o código, abordando o uso de chaves e a leitura do código.

## Próximos Passos

- A próxima etapa do projeto envolve a implementação da funcionalidade de deletar posts.

Continuando, então você vai saber o problema da lista não ser atualizada depois que a gente
editar um post.
Então, o que a gente vai fazer?
Então, essa lista aqui, primeiro de tudo, ela está usando aqui, que parte do estado
do aplicativo.
Nesse caso, se você olhar no post, o Reducer aqui está usando esse all, né?
Essa propriedade chamada all, que tem uma array, uma lista de objetos aqui.
Então, o que a gente vai fazer?
Uma maneira de resolver esse problema é, quando der o update post, a gente também
vai atualizar a lista de posts, certo?
Então, vamos ver aqui como é que a gente vai fazer isso.
Então, você note que a gente mudou o objeto de id número 2, esse segundo aqui, certo?
A array all tem dois objetos, primeiro esse all, não sei o que, e depois esse cara.
O que a gente vai fazer?
A gente vai pegar e retornar o novo estado, é certo que a gente vai pegar e vai copiar
essa lista e, em vez de quando a gente se depara com o cara, o post que a gente editou,
a gente vai saber porque a gente tem o id.
A gente vai, em vez de retornar o mesmo cara, vai retornar o post atualizado, certo?
Então, vamos lá.
Você conhece a função map do JavaScript?
Se não conhecer, vamos aqui no terminal só para você dar uma relembrada.
Então, vou abrir o node aqui, só para a gente fazer um JavaScript.
Ah, não tem clear, vou estar com um OK.
Então, vamos fazer uma lista aqui, certo?
Vou botar objetos aqui id 1, certo?
Id 2, e assim por diante.
Tem uma lista de objetos, dois objetos, certo?
Essa lista.
Então, se eu fizer a lista map, função map, e o parâmetro dessa função aqui, o map
é uma função que recebe outra função, certo?
Então, vamos receber a função cujo parâmetro, o primeiro parâmetro é o objeto.
Nesse caso, vou botar chamar de item.
Eu vou fazer a função de flash, tá bom?
E aqui é a definição da função.
Nesse caso, eu só vou retornar o próprio item.
Então, o que vai acontecer?
Eu retorno, mesma coisa.
Então, se você não entender essa parte aqui, se você não sabe, é s6, é a mesma coisa
que essa coisa aqui, sabe?
Function, item, return, item, certo?
Mesma coisa.
É certo que eu estou usando s6, primeiro de tudo, em vez de falar function, eu vou mudar
para a função de flash.
De essa maneira.
E porque só tenho um argumento, só vou precisar de um?
Eu nem preciso digitar os parâmetros, certo?
E ainda mais, como eu só estou retornando uma linha, eu vou fazer o retorno implícito.
Nem preciso da palavra-chave, nem preciso das chaves aqui, do braces, dessa maneira.
Certo?
Então, aqui eu não fiz nada.
Mas eu posso fazer, por exemplo, item retorna um novo objeto, sei lá, com o...
Sei lá, muda o id, multiplica por 2, sei lá, vamos ver aqui.
Eu vou fazer item, vou copiar.
Será que já tem esse negócio no Node?
Eu não sei, não.
Se tem disponível o spread, operador spread.
Vou tentar.
Item, copia as propriedades do item e retorna...
Tem que ter os parâmetros.
Aqui eu vou retornar o objeto, em please.
Propriedade do item com o id sendo item.id, multiplicado por 2.
Ah, peraí, que eu esqueci o...
Chave lá.
E agora?
Ah, desculpa.
Deixa eu copiar de novo.
É que eu esqueci aqui esse cara.
Tem esse.
Eu acho que o Node não tem esse cara ainda não, minha versão.
Então, a gente usa o Babel no React Native, por isso que funciona.
Então, vou tirar isso.
Vamos ver aqui.
Vamos só fazer retornar o novo...
Ah, definir lista de novo.
Deve definir de novo.
Videos object.
Vamos retornar um objeto cujo id é item id 22, tá bom?
Certo?
Então, a gente pega, vai dar...
Vai para cada item dentro dessa lista.
A gente vai fazer uma operação e retornar esse resultado aqui.
Desse caso, o item primeiro de tudo é esse cara, o objeto cujo id é 2.
Então, o que é que eu faço?
Eu retorno um objeto, eu retorno em Plist, então a gente precisa adicionar o parêntese,
se for um objeto, se não vai confundir como um bloco de outra função, né?
A gente está retornando.
Retorno objeto, propriedade id é o item, pôte id nesse caso, esse cara aqui, vezes 2.
E o primeiro cara vai ser o quê?
1 vezes 2 é 2.
Então, vai retornar um objeto cujo id é 2 e vai adicionar a nova lista, certo?
Nova array.
Não é a mesma, é uma nova.
Então, adicione esse cara aqui e, da mesma maneira, vai para o próximo.
O próximo item é esse.
Pego id 2 vezes 2 é 4.
Então, pega esse resultado e adicione essa nova lista aqui no final.
E recebe esse novo array.
Tá bom?
E assim, usa o map.
Então, voltando aqui para o nosso desenvolvimento, a gente vai usar aquele conceito o map, né?
Para poder dar o map para todas as alls.
Vamos aqui.
Então, vamos lá, all.map, nesse caso, o all está dentro do state, do estado, certo?
.map.
E qual é cada...
Cara, é um item ou um post, sei lá se você quiser ir.
Item. Vou botar post, certo?
O que eu vou fazer aqui?
Então, eu vou ter que... vou definir retorno explícito, tá bom?
Então, eu estou botando o bloco da função.
Então, eu quero retornar o próprio post, a não ser que seja o post selecionado.
E se for selecionado, a gente vai retornar o não original, mas o atualizado, que está dentro dessa variável aqui, action payload.data.
Então, vamos lá.
Se o post.d for id for o quê?
O action payload.data.data vai retornar o quê?
Retorna o action payload.data.
Se não, retorna o próprio post.
Entendeu?
Isso vai gerar uma nova lista, certo?
Eu vou botar dentro de uma variável.
E aqui no return, além de copiar o estado anterior, que nem precisa nesse caso porque a gente já vai definir o all.
Só tem duas propriedades nesse cara aqui.
Nem preciso, mas vou deixar.
E vou adicionar o all aqui.
Vai ser o all que a gente definiu aqui acima.
Certo? Vamos ver se esse cara vai funcionar.
Então, só para dar uma revisada aqui nesse cara, se você não entender.
Então, state.all é aquela lista de posts.
Então, ponto map, a gente vai para cada item na post, a gente vai gerar uma nova lista.
E essa lista vai adicionar os valores que foram retornados nesse cara aqui.
Nesse caso, se o primeiro post, o id do primeiro post for o id do post que a gente editou, certo?
A gente vai retornar o post editado.
Se não, a gente vai retornar o próprio post sem nenhuma mudança.
Nesse caso, como a gente só editou um post, a gente espera que todos os itens serão os mesmos, exceto por um, né?
Exceto um.
E esse um é o cara que a gente modificou, que a gente vai retornar.
Certo? Vamos testar isso.
Então, vamos ver se vai dar certo.
Eu vou clicar o La World.
Vou editar, vou adicionar ABC no título, ok?
Mudou aqui, vou voltar.
Mudou aqui também, certo?
Vamos ver se outro aqui.
Vou retirar só oi, oi, oi.
Ok?
O que aconteceu? Será que o que aconteceu?
No, ABC, o no estresse, o que?
Tá lá, certo? E os outros não mudaram.
Se você quer adicionar outro post para ver se não deu nada,
vou adicionar oi, adicionou e vou mudar esse La World, vou tirar o ABC.
Tirou e tirou aqui também, certo? Tá tudo ok.
Não tem problema aí, não tem problema aqui.
Fizemos os testes, tudo certo.
Tá bom?
Então, ah, só um detalhe aqui, eu esqueci.
Eu estou definindo variável dentro de um caso, então você pré bom botar um bloco aqui
para definir o scopo da variável para ser só local para esse bloco.
Só um detalhe.
E também, acho que a gente devia fazer uma half-atalização aqui
para deixar esse aqui melhor.
Primeiro aqui nesse guy return, a gente está usando a mesma chave.
O nome da chave é o mesmo nome.
Tu valor, então vou tirar isso aqui.
Tá bom?
Eu posto no seu que? Posto no seu que?
Vamos ver se esse guy, a gente pode fazer algo melhor aqui.
Se der.
Se quiser, pode postar na variável e usar de novo.
Se pode, sei lá.
Eu vou deixar como desafio para você fazer aí, pensar aí.
Se tiver alguma melhor maneira de escrever isso aqui.
Certo?
Então, vou salvar.
Vamos lá, só ver se não deu nada errado.
A mudança que eu fiz no 9.99 está tudo ok.
Certo?
Então, a gente fez o edit post.
Editar.
Certo?
Agora só falta o botão de deletar e vai ser no próximo vídeo.
Até logo.


0008-30 CRUD com o Redux & React Native

Botão de Deletar Post

### Resumo do Vídeo sobre Deletar Posts

Neste vídeo, o apresentador demonstra como desenvolver a funcionalidade de deletar um post em uma API. A seguir estão os principais pontos abordados:

1. **Verificação da API**:
   - O apresentador utiliza o Postman para realizar um `GET` e visualizar todos os posts.
   - Observa uma inconsistência com os IDs dos posts, que não são sempre numéricos. Faz uma comparação com a API fictícia Jsonplaceholder e nota que eles retornam IDs inteiros.

2. **Processo de Deleção**:
   - Decide deletar um post específico. Para isso, ele copia o ID do post a ser deletado.
   - Realiza uma requisição `DELETE` através do endpoint da API, e observa que a resposta do servidor é `200 OK`, apesar de que o esperado normalmente seria um `201 Created`.

3. **Implementação do Botão de Deletar**:
   - O apresentador menciona a necessidade de adicionar um botão para deletar posts no componente de edição.
   - Utiliza `TouchableOpacity` para criar o botão e define o texto como "Deletar Post".
   - Define uma função `onPress` que irá chamar um acionador (action creator) para deletar o post.

4. **Criação do Action Creator `deletePost`**:
   - No arquivo de ações (`actions`), ele cria a função `deletePost`, que retorna uma ação para a deleção de um post.
   - Esta ação faz uma requisição `DELETE` utilizando Axios, passando o ID do post como parâmetro.

5. **Testando a Funcionalidade**:
   - O apresentador planeja implementar uma função `onDeletePress` para vincular a ação de deletar ao botão, incentivando os espectadores a testarem o código.

### Considerações Finais
O vídeo é uma demonstração prática de como manipular uma API para a deleção de registros, apresentando tanto a parte técnica da chamada a API quanto o desenvolvimento da interface no frontend.

Neste vídeo nós vamos desenvolver aquele botão de deletar o post.
Antes de prosseguir, nós vamos dar um olhado da resposta e como é a resposta da API quando
a gente der o delete, tá bom?
Vamos lá pro postman que tem o endpoint da minha API, vou dar um get pra todos os posts.
Tem o post número um, dois, assim por diante.
Você não acha que o ID desse cara aqui não é o número?
Eu criei uns outros recordes que eu notei que o ID aqui não é o número, não sei por que isso acontece.
Quando eu uso a Json server no Hiroko, por algum razão o ID esse número aqui, eu já fui no experimento vendo aqui.
Se eu der um post usando a nossa minha API aqui do Hiroko, não sei o que, a resposta é com o ID assim, não é o número.
Mas se eu usar o tpcode, você se lembra do tpcode é aquele site que nos permite usar a API falsa,
vou no navegador, por exemplo, Jsonplaceholder.tpcode.com.post, você note aqui se eu usar esse cara aqui e criar o novo post, vamos ver o que acontece.
Se a gente, o que tipo de ID a gente obtém? Abitem um inteiro, número inteiro, não sei por que isso acontece, se você souber, seria legal se você postar os comentários sobre isso.
Certo, é só um detalhe aí. Mas voltando aqui pro que a gente tá fazendo, vamos falar de delete.
Nesse caso a gente tem essa lista de post, vamos deletear um deles para ver qual é a resposta do servidor.
Então eu não gosto desse cara aqui, então vamos deletear. Então para deletear precisa primeiro de tudo o ID, vou copiar esse ID aqui, certo?
Copio o ID e eu vou aqui criar uma nova aba, deixa eu adicionar o meu API URL, barra post, barra o ID, o ID é esse aqui.
Então vamos lá em vez de guess, dá o delete. Vamos lá e ver o que acontece.
Você note que a gente não pega nada. Nesse caso essa API, normalmente a gente retorna 201, mas essa API tá retornando 200, ok.
Vamos ver se realmente funcionou. Eu vou voltar aqui a minha aba que tem o get, eu vou dar o get de novo aqui.
Você note que o terceiro já, se foi, se eu usar o ID, aquele mesmo ID, barra o ID, já não existe, 404 not found, 404 not found.
Então deleteou, certo? Então é isso, a resposta do delete não tem nada.
So, dao 200, ok. Normalmente é 201, mas esse cara dá 200, ok. Tá bom, então vamos lá.
Voltando aqui ao nosso desenvolvimento, vamos lá para o post edit, você note, vamos lá lembrar do sketchpad aqui,
nosso wireframe que a gente já fez o novo botão dela tá post aqui no final, então vamos adicioná-lo.
Vamos lá, post edit, vai, então, vai para os botões, ah, tá dentro do post form, mas a gente não quer adicionar o da data dentro do post form, tem que ser fora.
Então depois desse post form que inclui esses título, caixa de título, conteúdo, ia, caixa do conteúdo e esses botões de cancelar e ok,
nós vamos adicionar no próprio componente post edit aqui o botão, tá bom.
Primeiro de tudo vamos usar o totable highlight, desculpa, totable opacity, eu vou fazer da mesma maneira dos outros botões,
eu não quero perder muito tempo com o estilo agora, tá bom, então plotable opacity, botão texto dentro, o que que vai dizer, vai dizer que deletar post, certo.
Agora o totable opacity, ele leva a própria chamada on press e o que vai acontecer é você tocar esse botão, certo.
Ainda não definimos, vamos só botar under fine aqui, só para ver o que acontece.
Vamos importar esses componentes porque estamos usando aqui, lá em cima import view text, totable opacity e o, ah, o text já tá aqui,
então text e o totable opacity do react nade.
Vamos ver aqui, vamos adicionar o estilo para esse botão aqui, vou copiar o estilo dos outros, não é muito bom, o estilo não é muito bom,
mas só para dar consistência, voltando aqui no post form vou copiar o estilo aqui dos botões, certo.
Vou copiar o estilo tudo aqui mesmo, então voltando ao post edit, vou quebrar uma linha, deixa eu fechar isso aqui,
Abba, pane, close pane, então vou adicionar a propriedade style, aqui, border 9, a borda,
vamos mudar essa cor para vermelho, red, vamos ver o que acontece, cadê, voltando aqui o simulador novo,
não é novo, é de estar, é de estar aqui, o dela está a post já está aqui, certo, então é só isso,
tá lá o botão, então vamos lá implementar essa implementação, primeiro de tudo o que a gente vai fazer,
da mesma maneira do update post a gente vai ter que criar um action creator, esse action creator para dela estar o post,
qual as informações precisa, só precisa do id do post, não é, só isso, então vamos lá, vamos lá para o arquivo index do actions,
certo, vamos lá embaixo e vamos criar aqui uma função chamada delete post, tá, e vou deixar como você fazer aí primeiro,
pause o vídeo, defina esse action creator, depois vamos continuar, e deu tudo certo, então vamos lá,
vamos fazer essa variável delete post que é uma função e vai retornar no final uma action, vamos exportar para ser disponibilizado
também de outros arquivos, em outros arquivos, então a gente vai fazer o que, no final a gente vai retornar uma ação
com tipo o que, vamos criar um tipo aqui, delete post, certo, só precisa disso, não precisa de payload, certo,
então delete post e o que a gente vai fazer o axioth.q, ponto delete com o rl, request rl,
barra post, barra o id, a gente precisa do id, então vamos adicionar o id aqui como um parâmetro para essa função,
então o id aqui, vamos interpolar, certo, só isso e retornar o delete post, se quiser pode usar o payload,
porque a gente tá usando o meroware, chamado redux promise, a gente pode usar o payload aqui e definir esse cara no request,
nem que esteja usando, só para esse cara só mandar despachar essa action quando o pedido for realizado,
se a gente não tivesse assim, sem o payload, eu acho que a gente iria retornar o objeto na mesma hora que fez o pedido,
nem que o pedido não tenha sido realizado, então por isso que eu vou só adicionar esse request aqui,
só para poder retornar a action quando o pedido for realizado e esse request, ponto data, data,
vai retornar o objeto vazio, a gente nem vai usar, mas só para fazer esse negócio retornar ser despachado
somente quando o pedido for realizado, a resposta vir, certo, então vamos lá, vamos testar esse cara,
vamos lá para o post edit, vamos definir aqui on press, vamos chamar de this, ponto on, que delete press, sei lá,
on delete press, vamos definir essa função, des, então a função


0008-31 CRUD com o Redux & React Native

Continuação do Botão de Deletar Post

# Summary of the Transcript

**Function Definition and Implementation for Deleting Posts**

In the transcript, the speaker discusses implementing the `onDeletePress` function within a component that manages posts. The key steps include:

1. **Setting Up the Function**:
    - The function is responsible for deleting a post by utilizing the `delete post` action creator.
    - The ID of the post to be deleted is accessed through `props.selectedPost.id`.

2. **Navigating After Deletion**:
    - After the post is deleted, the application must navigate back to the post list to avoid showing a non-existent post.

3. **Resetting Post State**:
    - The action `actions.list` is called to reset the state of the post list, ensuring it is updated and reflects the deletion.

4. **Configure `mapDispatchToProps`**:
    - The `deletePost` function needs to be injected into the component's props.
    - The relevant action needs to be imported into the component.

5. **Reducer Updates**:
    - In the `postReducer`, a case for `deletePost` needs to be handled:
        - The state should keep previous properties but set `selected` to null.
        - No need to modify the `all` posts, as reloading the list will take care of refreshing the displayed posts.

6. **Testing and Debugging**:
    - The function is tested by trying to delete posts.
    - A potential bug was encountered where a post without a title was causing issues during deletion.

**Next Steps**:
- Further testing and debugging are required to ensure the deletion process works as intended and that the application behaves correctly after post deletion.

This summary encapsulates the key points discussed regarding the implementation of post deletion functionality in a web application, providing insights into function setup, navigation, state management, and debugging.

chamado de this.on.q.
Delete press, sei lá.
On Delete Press.
Vamos definir essa função.
This, então a função do componente post add.
Vamos lá aqui.
On Delete Press.
Função, opa.
A gente vai chamar aquele action creator, list.props,
vai ser injetado como props,
vai ser aqui disponível,
chamado delete post, certo?
A gente precisa do id do post que será deletado.
Nesse caso, se você se lembrar,
a gente tem acesso ao post via o Select post aqui.
Select post tem o id, então vamos lá.
Vê esse ponto props, ponto selected post, ponto id.
E é só isso.
E depois de deletar, a gente tem que ir para list do post.
Não pode voltar para a página do post,
porque não tem mais post, né?
Então vamos lá.
A gente pode dar um actions, ponto list,
e resetar, tá?
Aí fica assim.
O tipo, esse objeto dado a função list.
Nesse caso, list é a chave aqui do nosso componente,
chamado list, né?
Se você voltar no router aqui,
você note que aqui da cena que define aquele list, né?
Tem aqui chamado list,
e por isso que a gente usa as lists, né?
O actions nos permite mudar de cena.
Nesse caso, a gente vai mudar para essa cena,
cuja aqui é list, então pode chamar a função
com o mesmo nome daqui.
Então list, e vou passar esse objeto aqui
só para resetar o negócio.
Recetar por quê?
Porque quando a gente deletar o post,
aquele post, a gente tem que arranjar uma maneira
de remover-a da lista.
Eu acho que fica fácil de só resetar aquela lista
em vez de mudar o estado do...
Da, do all, né?
Do post, ponto all, do reducer.
Diretamente aqui, eu vou deixar ele dar o fat post de novo.
Certo?
A mesma maneira que a gente fez quando a...
A gente fez o post new.
Eu não sei se lembra do post new aqui,
a gente usou actions.list e recetou tudo
porque tinha aquele problema do pop, né?
Da... do list não ser atualizada
depois de criar um novo post.
Então vamos voltar lá para o post edit.
Actions.list, type reset.
Certo? Então vai letar o post
e depois vai voltar para a lista de posts.
Certo?
Agora vamos lá e definir esses caras dentro desse arquivo.
Primeiro de tudo, o delete post aqui.
Primeiro tem que injentar as props.
Vai lá no map dispatch to props, lá embaixo.
Add the post, adiciona.
Depois vai lá em cima.
E importa o delete post do actions.
Tudo certo? Vamos lá continuar com o quê?
A gente já importou actions, né?
Lá em cima.
Está importado.
Então vamos...
Voltando aqui, salvar.
Ok, agora o próximo passo é lidar com aquele...
aquele tipo de ação chamado o delete post.
Lá no reducer, post reducer.
O que a gente vai fazer?
Primeiro de tudo, a gente tem que setar o selected.
O post que essa vai ser notado para na...
para no de novo, tá bom?
Vamos lá lidar com o case, o quê?
Delete post.
Vamos retornar o novo estado.
Copie as propriedades anteriores.
E o que é que eu vou fazer?
Você tá o selected para ser novo,
porque a gente não tem mais post, né?
Isso é?
E a gente não precisa modificar o all
porque a gente vai dar uma recetada.
Então o componente list vai ser montado de novo.
E você se lembra que o list tem o component dead mount
que tem o fat post que vai modificar aquele all
e pegar e obter os posts novamente.
Então nem precisa fazer nada a respeito disso.
Já está feito.
Certo? Volta aqui para o post reducer.
O que mais que a gente tem que fazer?
Acho que mais vai deletar.
Deixa o select para no.
Ok, então vamos voltar aqui.
Ah, também.
Uma coisa aqui, vamos ver.
Vamos testar.
A nextpective, não sei o quê.
Archive actions index unexpected token.
Esperou 1,68.
Vamos lá. 68.
Ah, esqueci da virgula aqui no objeto, certo?
Salva.
Cadê meu Live reload?
Então vou clicar nesse cara aqui.
Editar.
Ah, deletar post.
Vamos ver qual é esse cara.
Não sei o quê, não sei o quê, 9.
Está aqui deletou, né, vi?
Deletou.
Então, opa.
O que que aconteceu aqui?
Vamos ver.
Vamos deletar.
Ah, esse cara não tem título nem...
É porque eu criei um recorde sem título, sem baureia, por isso está aparecendo em branco.
Mais vamos ver, testar mais esse cara.
Deletar.
Deletar.
E será que deletou mesmo?
Vamos ver aqui.
As coisas...
Parece que não mudou aqui.
Então vamos ver aqui.
Vamos lá na API usar o post, man.
Pedido get para todos os posts.
Então agora no banco de dados tem o quê?
Vamos ver.
Tem dois posts aqui.
Esse aqui, o Lowry, tem esse outro.
Então esse cara está errado.
Então vamos lá.
Vamos procurar o quê que está errado aqui.


0008-32 CRUD com o Redux & React Native

Investigação de um Problema Estranho

# Resumo do Problema com o Aplicativo

## Contexto
Durante a gravação de um vídeo, o autor testou um aplicativo que envolve a adição e exclusão de posts utilizando uma API. Um problema peculiar foi identificado após adicionar um novo recurso.

## Problema Encontrado
- Ao tentar deletar um post, em algumas situações o post não era removido conforme esperado.
- Quando um novo post era criado, comportamentos inesperados também ocorriam.

## Análise do Problema
- O problema estava relacionado ao uso de **ações assíncronas** com a API.
- O autor observa que, ao chamar o `action creator`, a função executa de forma assíncrona e não espera pela resposta da API antes de continuar a execução.
- Isso leva a um estado inconsistente, onde a mudança de cena acontece antes que a atualização dos posts seja concluída.

## Demonstração do Problema
- Para ilustrar, foi sugerido o uso de um `setTimeout` para simular um atraso na resposta da API.
- Após definir um aguardamento de três segundos, o autor demonstra que:
  1. A cena muda imediatamente após a requisição de deleção.
  2. A lista de posts não é atualizada enquanto a requisição não finaliza.
  3. Quando a resposta chega, o estado da lista ainda não reflete as alterações.

## Causa Raiz
- O componente da lista não se atualiza porque não houve mudança no estado que gere a re-renderização.
- A ação de deletar o post foi enviada, mas ela não alterou o estado que a lista utiliza para renderizar os posts, resultando em uma discrepância entre o que está na interface e o que está no estado da aplicação.

## Conclusão
A questão central reside na necessidade de garantir que o estado da aplicação seja atualizado adequadamente após operações assíncronas para que a interface do usuário reflita corretamente as alterações.

Então algo muito estranho aconteceu no vídeo passado quando a gente estava testando o aplicativo
depois de adicionar aquele botão de da letal. Então o problema é por causa dos pedidos da gata tp
que são assíncronos. Então vamos olhar com isso em detalhe. Então eu criei os novos post aqui.
Essa lista aqui está 4 posts. Eu vou dar um get para a minha API. Eu criei uns posts aqui,
deletei aqueles outros só para a gente analisar o que é que está acontecendo, ver esse problema.
Então o problema que a gente encontrou quando a gente estava dando o deletar, às vezes nem deletava,
e também quando eu criei um novo post isso também acontece. Eu me deparei com isso também
no nosso post. Então a gente encontrou um bug. Então vamos dar uma analisada. Vamos dar uma olhada aqui.
Então se eu voltar lá para o deletar, que post edit, você nota que a gente está chamando um action
creator e também está chamando actions aqui para mudar de cena. O problema aqui é que o
esse action creator aqui é assíncrono. Então vai fazer um pedido a gata tp e leva um tempinho
para receber a resposta. Mas o JavaScript não vai parar e esperar esse cara completar. Ele
executa esse statement aqui, esse comando e vai continuando executando os outros enquanto a
resposta espera a resposta ao mesmo tempo. Então pode acontecer que esse cara aqui tenha mandado
a resposta, mas mandado o pedido, mas a resposta ainda não vem quando esse cara aqui executa.
Tá bom? Esse é o problema. Para demonstrar isso, eu posso fazer um set time out desse cara aqui.
Para ser executado somente depois de, por exemplo, três segundos. Vou botar três segundos aqui.
É milliseconds, então tem que botar vezes mil, três segundos. Então o set time out vai,
depois de três segundos, vai executar essa função. Então vai simular aquele pedido a gata tp de levar
um tempo para receber a resposta. Então nesse caso, esse aqui não vai ser executado até três
segundos depois. Então primeiro vai fazer o action.less que vai mudar de cena para lista. E quando
moda de cena para isso, a lista ainda vai estar com aqueles posts antigos, não vai estar atualizada.
Depois que a gente ler, eu estou, ainda vai estar lá. Então para demonstrar, vamos salvar.
Voltando aqui. On the list press, eu vou deletar esse ola world primeiro e vou editar e vou deletar.
Primeiro post. Pertei, deletar, você vê que já mudou de cena. O pedido foi feito e provavelmente
três segundos vai receber a resposta, mas nada vai acontecer. Cade? Nada aconteceu. Então o
set atualizada, você note que já removeu. Então por que não atualizou? Então o, esse componente aqui,
só vai atualizar quando você mudar o estado. Mas nesse caso, quando eu fizer o delet post,
ele chama action creator, retorna esse delete post. Mas o delete post não muda nenhum estado,
senote que a gente faz o delete post aqui, mas a gente muda só selected, mas o selected não é
usado na lista. Quem é que é usado na lista? É só o all, esse cara aqui.


0008-33 CRUD com o Redux & React Native

Correção do Problema Assíncrono dos Posts as Vezes não Serem Deletados

# Resumo do Transcript

O áudio discute a resolução de um problema relacionado ao manejo de ações de exclusão (delete) de posts em uma aplicação. Aqui estão os pontos principais abordados:

1. **Erro de Lógica Inicial**: O autor inicialmente mencionou que não era necessário remover o post deletado da lista de posts, mas depois corrigiu essa afirmação, explicando que é fundamental devido a problemas causados por pedidos assíncronos.

2. **Uso do Redux Thunk**: O autor menciona que, se estivesse utilizando Redux Thunk, poderia retornar uma promessa ao deletar um post, o que facilitaria a manipulação do estado após a conclusão do pedido.

3. **Filtragem de Posts**:
   - A solução envolve criar um *reducer* para deletar o post da lista.
   - O método `filter` é utilizado para criar uma nova lista de posts que exclui o post com o ID correspondente ao selecionado para deletar.

4. **Exemplo Prático**: 
   - O autor demonstra como filtrar uma lista de objetos em Node.js, exemplificando como remover um item da lista com base no ID.
   - É destacado que a comparação deve garantir que apenas posts com IDs diferentes sejam mantidos na nova lista.

5. **Correção de Erros**: 
   - O autor enfrentou alguns erros, como tentar acessar métodos de objetos indefinidos, e fez correções para garantir que o estado fosse acessado corretamente.

6. **Finalização**:
   - Depois de várias tentativas e correções, o autor conseguiu resolver o problema de exclusão de posts.
   - Ele menciona que no próximo vídeo será abordado um bug semelhante relacionado à criação de novos posts.

---

Esse resumo encapsula os principais aspectos abordados na discussão, focando nos problemas encontrados e nas soluções propostas para a manipulação de posts em uma aplicação.

Então, para resolver esse problema, o que a gente vai fazer?
Aqui quando vai lidar com o delete post, a gente tem que remover o item, o supposed
relacionado, o post que foi deletado da nossa lista, ó, né?
Antes eu tinha dito que não precisava fazer isso, mas na verdade tem que fazer, desculpa.
É por causa do pedido acinco no que dá esse problema.
Se o, se o, se o, se o, se o destino ponto prop, ponto delet post, se a gente tivesse
usado o chamado redux tank, eu poderia ter retornado uma promessa e dessa maneira eu
teria usado o ponto den nessa promessa e dentro do den eu usaria o actions.list, certo?
Essa maneira só iria mudar de cena depois que o pedido for realizado.
A resposta vi.
Nesse caso a gente não está usando redux tank, então por isso que está tendo esse problema.
Então problema do last synchrono aqui, né?
Então para resolver isso, o que a gente vai fazer?
Vamos lá para o post reducer na delete post, o caso do delet, deletar post.
A gente tem que filtrar, né?
Pegar a lista de posts que já existe e criar uma nova lista.
A gente vai filtrar ou remover aquele item que foi deletado.
Se lembra que a gente tem o, o quê?
Tem já o, o, o, como é, o ID, né?
Do post selecionado.
Então vamos fazer o quê?
Vamos lá, vamos pegar aqui o all.
Da mesma maneira que a gente fez um update post, a gente usou map lá, mas aqui a gente
vai filtrar, então a gente vai usar essa função chamada filter, certo?
Então só para revisar, eu vou, vou aqui no terminal para você ver como é que faz isso.
Vou, estou aqui no node, vou criar a minha lista, né?
Já tenho essa lista aqui, a lista de objetos.
Então vamos filtrar esse ID, vamos adicionar um novo aqui, ID3.
Vamos filtrar esse ID2, a lista, vamos tirar esse cara aqui, como é que a gente faz?
Vamos fazer assim, ó, lista.filter.
E o item é o argumento, primeiro parâmetro.
E a gente vai filtrar se o quê?
Se o item, o ID for 2.
Tá bom?
Ó, desculpa, não for 2.
Só filter os caras de ID que não for 2, certo?
É isso que remove o, o objeto corrigido ID é 2.
Então só relembrando aqui, a gente usa o filter.
Aqui o argumento item que vai ser cada um.
E faz a comparação e retorna esse, o próprio item para adicionar uma nova array.
Nesse caso primeiro o item vai ser esse objeto.
Item.id não é igual a 2, verdade.
Então se for verdade, pega esse item, adiciona uma nova lista.
Nesse caso vai adicionar nessa nova lista aqui.
Depois vai por 2, o item se torna 2, item.id é 2, não é igual a 2.
Isso é falso, então não faz nada.
Procega para o próximo item.
Próximo item, o id é 3.
Então item.id3, not equal, não é igual a 2, verdade.
Então adicione esse item para a nova lista nesse caso aqui.
Então fica com esse cara, a lista sem o caro de id2.
Então vamos fazer dessa mesma maneira aqui.
Então vamos dar o filter, o post, e qual é o post que a gente quer filtrar?
Certo, a gente vai dar o quê?
O post.id, a gente não quer que seja o post que foi selecionado, que tinha sido selecionado.
Nesse caso o selector está dentro do estado.
Então vamos dar selector.id, certo?
Vai filtrar os posts e vai remover aquele que a gente tinha selecionado.
Nesse caso é o post que foi removido.
Então vamos adicionar esse cara no variável aqui, vou chamar de all.
E vou adicionar aqui.
Na verdade nem preciso desse cara aqui de copiar o state, que eu já estou fazendo esse.
Mas eu deixei aqui no outro, mas nem precisa, porque não tem outras propriedades.
Se tivesse outra propriedade eu teria que adicionar isso de novo.
Sei lá se quiser deixar aí.
Então selector, a gente pega a lista de posts, remove o post que foi, faz uma nova lista
com todos os posts anteriores, acerto aquele que a gente removeu.
E a gente retorna no novo estado com aqueles caras e seta o selector para no.
Porque não tem mais posts selecionados.
Vamos salvar aqui.
Como eu estou usando a variável eu gosto sempre de adicionar esse bloco.
Certo, vamos ver se vai resolver o problema.
Vamos remover esse 2, 3, não sei o que.
1, 2, 3, KD.
Ah, I cannot read proper filter of undefined. Ah, teve problema aqui.
Não tem filter de indefinido, você não sabe que é all, porque eu esqueci de votar a state.all.
Desculpa, então tem que acessar o all dos states desse cara aqui.
Certo, vamos sentar novamente.
Vamos deletar o AB.
Editar, deletar, 1, 2, 3.
Selected is not defined.
Mais outro problema, eita, eu sou muito esquecido, então como é que a gente a isso?
Eita isso.
E aí, adiciona state, um selected.
Esqueci também aqui.
O selected está dentro dos states.
Vamos de novo, espero, esperamos que não tenha mais erros, nem tem mais posts.
Vamos ver o all high-all aqui, esse é o japonês.
Editar, deletar, 1, 2, 3.
Desapareceu, finalmente.
Agora funcionou.
Isso.
Certo, então assim que agente esse problema.
Que ele bug nem dava para notar por causa do action creator, o que era chamado.
A resposta veio depois que a gente mudou de cena, né?
Então estava tendo problema.
Certo?
No próximo vídeo a gente vai ver que esse bug também está presente na post new, né?
Quando cria o novo post, às vezes acontece.
Então até o próximo.


0008-35 CRUD com o Redux & React Native

Ajeitamos o Bug que Tínhamos Encontrado no PostNew

# Resumo do Vídeo sobre Resolução de Bugs no ActionCreatorC

Neste vídeo, o apresentador aborda um bug encontrado em vídeos anteriores relacionados ao `ActionCreatorC`, onde a resposta de operações não estava sendo exibida corretamente após a mudança de cena. O problema ocorre não apenas com a operação de delete, mas também ao criar novos posts.

## Demonstração do Bug

1. O apresentador tenta criar um novo post, mas a resposta não aparece após clicar em "OK".
2. Para ilustrar o problema, ele usa `setTimeout` para simular atrasos, mostrando que a resposta não chega a ser atualizada antes da mudança de cena.

## Resolução do Bug

Para corrigir o problema, o apresentador aponta que é necessário lidar com a ação `create post` no `post reducer`. Aqui estão os passos tomados:

1. **Adicionar Caso para `create post` no Reducer**:
    - Um novo caso para `create post` é adicionado ao reducer.
  
2. **Imutabilidade do Estado**:
    - O estado anterior é retornado e um novo array é criado usando `concat` para adicionar o novo post.
    - O uso de `push` é evitado, já que modifica o estado original. O princípio de programação funcional é seguido, criando novos objetos.

3. **Usar o Payload da Ação**:
    - O `action.payload.data` é usado para obter o novo objeto criado e concatená-lo à lista.

## Teste da Solução

Após implementar a correção, o apresentador testa a funcionalidade novamente:

- Ele cria um novo post e verifica que, após alguns segundos, a nova entrada aparece corretamente, confirmando que o bug foi resolvido.

## Conclusão

O vídeo termina convidando os espectadores a comentarem caso encontrem mais bugs no projeto, e agradecendo pela atenção.

Até a próxima!

Neste vídeo nós vamos resolver o problema, aquele bug que a gente encontrou nos vídeos
anteriores do ActionCreatorC, da resposta só via depois de mudar a cena.
Tá bom, então isso também acontece, não só com o delete que a gente viu aqui com o
delete, tá, mas do novo, que a gente nem toquei antes.
Então vamos criar um novo aqui.
Neste caso funcionou, mas às vezes não funciona, porque?
Porque o quê? Vamos lá.
No post new, né?
Vai post new aqui.
Quando você dá o on ok press, às vezes a resposta desse cara aqui vem depois de mudar de cena.
Para ilustrar isso, vou botar o set time out novamente da mesma maneira que eu fiz antes.
Certo?
Dê pra esse cara.
Depois de três segundos.
Opa!
Certo, para ilustrar esse erro.
Esse bug.
Não nem erro, um bug, né?
Vamos aqui.
Criar um novo.
Oi, não vem.
Clica ok.
1, 2, 3, nada aconteceu.
Eu vou atualizar o aplicativo para você ver que tá lá mesmo, mas não atualizou antes.
Então vamos consertar esse bug da mesma maneira que a gente fez o delete.
Então como é que a gente vai fazer?
Vamos lá para o reducer, né?
A gente tá emitindo a ação chamada create post.
Vamos para o post reducer, né?
Cadê o create post aqui?
A gente não tá lidando com o create post, né?
Então como a gente vai resolver isso?
A gente vai adicionar o novo item a o all lá em cima.
Se lembra do all?
Então vamos lá.
Vamos aqui.
Vou adicionar o caso.
Create post.
Vou adicionar o bloco aqui porque eu vou usar um variável.
Vou retornar o estado anterior e o all vai ser o quê?
Vamos fazer um variável all, state.all.
Vamos pegar os caras do all e adicionar mais um.
Como é que a gente adiciona?
A gente pode dar o push, mas a gente não quer mudar o estado, tá bom?
Não podemos mudar.
A gente tem que criar uma nova lista sempre, né?
A gente quer fazer que usar o princípio de functional program e programação funcional.
Sempre criando novos objetos, novos, nunca modificando o original.
Como a gente pode fazer isso?
Esse aqui é uma lista.
A gente pode usar várias maneiras.
O maneiro que você vai fazer é usando o concat.
Se eu vou terminar o node aqui, suponha que a gente tenha essa lista aqui e aqui adicionar o novo objeto.
A gente pode dar o push, mas o push modifica o original.
Então eu quero criar uma nova lista com os mesmos objetos, mais um.
Eu vou usar esse concat, tá bom?
E vou adicionar o quê?
O objeto id4.
Você note que aqui a gente recebe um novo objeto com o id4 adicionado.
Se você olhar em lista de novo, não foi modificado, isso aqui é uma nova lista.
Então é isso que a gente quer, tá bom?
Então vamos dar o concat.
Ponto concat, o quê?
A gente quer concat o novo post.
Nesse caso, vai ser o quê?
Se você se lembrar do action creator, voltando aqui para o action creator, do create post, lá no arquivo src-actions-index.
E a gente tem o payload, que é a request.
Quando a gente faz o pedido ao KTP de post, normalmente a gente recebe o objeto que foi criado.
Só para confirmar, eu vou no postman, tá bom?
Vamos lá no postman.
Eu vou criar um novo post aqui, deixa eu ter aqui kd.
Vou copiar a url aqui, barra post.
E vou criar esse novo post aqui, certo?
Eu vou dar send.
Mandou e recebeu aqui a resposta, a resposta ao novo post.
201 created, tá bom?
E tem esse cara aqui com o id, certo?
Então, vamos usar esse cara, que vai estar no request.data, né?
Nesse caso, é o payload.
Então, esse cara aqui, voltando ao reducer, a gente vai concat o quê?
Action.payload.data, certo?
E retorno o estado com o ó, aquele ó ali.
Como esse nome é o mesmo, eu vou fazer assim.
Certo? Então, vamos ver se vai funcionar.
Vou voltar aqui para o simulador.
O sinal de que ele já está aqui.
Eu vou funcionar um novo.
Tudo.
Vou clicar OK.
Vamos esperar um, dois, três.
E veio o cara, certo?
Então, isso resolve o bug, a jeita que ele bug,
que a gente tem do action creator, você receber a resposta,
depois da cena ser mudada, tá bom?
Então, se você achou mais bugs desse nosso projeto,
deixe comentários aí, valeu?
E por esse vídeo é só. Até a próxima.


0008-34 CRUD com o Redux & React Native

Removemos o setTimeout e Revisamos o wireframe

```markdown
# Resumo do Vídeo

No vídeo anterior, foi resolvido o problema de atualização da interface após a criação ou exclusão de um post. O desafio estava relacionado ao fato de que a requisição HTTP nem sempre retornava imediatamente, especialmente após a troca de cena, além de que o estado da cena não era atualizado corretamente.

## Problemas Identificados
- A interface não atualizava devido à ausência de atualização do estado utilizado pela cena.
- O uso de `setTimeout` foi ilustrado para demonstrar a falha na atualização.

## Correções Realizadas
- Remoção dos `setTimeout` que eram utilizados para o debounce, pois o problema foi corrigido.
  - No evento de criação de novo post (`on ok press`).
  - Na edição de post (`on delete` e no `post edit`).

## Funcionalidade do Aplicativo
- O aplicativo começou como uma lista simples de posts.
- Cada post tem título e conteúdo, com páginas separadas para visualizar e editar posts.
- Implementação de um botão para criar novos posts, que inclui um formulário com opções de cancelar e confirmar.
- Ao criar ou editar posts, após sucesso, o usuário volta à lista de posts atualizada.
- Foi adicionado também um botão para deletar posts, que remove o post da lista e retorna à tela principal.

O aplicativo agora está funcionando corretamente tanto em iOS quanto em Android.
```

No vídeo passado nós resolvemos o problema que a gente tinha da interface não ser atualizada
corretamente depois que nós criamos um post ou deletamos um post.
O problema era que o pedido HTTP às vezes só vinha depois de mudar a cena, certo?
E também tinha aquele problema da interface da cena não ser atualizada porque o estado não era atualizado.
Então a cena só vai atualizar se o estado atualizar, o estado que está sendo usado pela cena atualizar.
A gente nós ilustramos o problema usando o set time out do JavaScript para entender porque isso acontecia.
Se eu vou aqui não ver, cadê o post?
Post new.
A gente usou o set time out aqui e gostaria de removê-lo que a gente não precisa mais, já terminamos de fazer o debug
e corrigir esse problema. Então vou remover esse set time out.
Também tem outro no post edit, tá tudo ok?
No delete, on delete do post edit, tá bom? O deletal time out também.
Se ele não tem mais time out, não tem mais, ok?
Então no on delete press do post edit, não a gente não precisa mais de time out, terminamos de corrigir o problema.
E no post new, on ok press, removemos o set time out, certo?
Então aqui está o nosso aplicativo, ó, dando no iOS e no Android aqui, certo?
Vamos voltar aqui e dar uma revisada.
Então a gente começou muito tempo atrás, um aplicativo simples, uma lista de posts que quando clicava em um desses itens ia para a página de ver o post.
O post tem um título e um conteúdo, certo? Esse foi a da set introdução ao Redux.
Depois disso, com essa set, com Redux, nós adicionamos o botão de editar com a página para editar o post e também o botão novo que vai para a página de criar o novo post.
Então nós fizemos o novo post que tem o formulário, botão de cancelar, botão de ok, que quando o post é criado, volta para a lista de posts e o novo post é adicionado.
Na mesma maneira, muito o editar post, a gente reutilizou esse formulário que estava sendo usado no novo post e a gente autocompletou os campos de texto aqui, usando os detalhes do post que estava selecionado e a gente clicou o editar.
Adicionamos o botão de deletar post aqui para deletar o post e voltar para a lista de posts com o post deletado, removido da lista.
Tá bom?


0008-36 CRUD com o Redux & React Native

Criador de Ação deselectPost

# Resumo da Transcrição

O desenvolvedor está revisando um aplicativo que apresenta uma lista de posts no iOS e Android. Durante a demonstração, ele mostra como editar, adicionar e deletar posts, explicando a funcionalidade que foi implementada. 

## Problemas Identificados

1. **Experiência do Usuário**:
   - Ao clicar em um post, se a requisição HTTP demorar, o conteúdo anterior se mantém visível até que a nova informação seja carregada. Isso gera uma experiência insatisfatória para o usuário.

2. **Solução Proposta**:
   - Para melhorar isso, a ideia é deselecionar o post quando o usuário voltar à lista de posts, assegurando que não haja um post previamente selecionado.

## Implementando a Solução

- **Ações no Redux**:
  - Um *action creator* chamado `desselectPost` é criado e quando a cena de detalhe do post é desmontada, essa ação é despachada.
  
- **Reducer Atualizado**:
  - O reducer de posts é modificado para lidar com a nova ação e atualizar o estado do post selecionado para `null`.

- **Ciclo de Vida do Componente**:
  - O método `componentWillUnmount` é utilizado para chamar o *action creator* quando o componente de detalhe do post é desmontado.

## Consequências da Mudança

- Com a implementação, ao retornar à lista de posts, não aparece mais o conteúdo do post anterior, resultando em uma melhor experiência do usuário.
- A ação `desselectPost` é despachada corretamente, e o estado é atualizado sem manter dados indesejados.

## Conclusão

O desenvolvedor testou as alterações e confirmou que a nova funcionalidade está funcionando conforme o esperado. O vídeo termina com uma nota positiva, indicando que não há mais problemas e que o projeto pode seguir adiante.

Vamos dar uma olhada no nosso aplicativo para ver se não tem mais nenhum bug ou problema
aqui.
Aqui o aplicativo rodando no iOS e no Android.
Certo?
Tenho uma lista de posts, dois posts.
Vamos dar uma olhada.
Hello, world.
Não sei o que.
Olá, mundo.
Vamos editar.
Adicionamos essa funcionalidade.
Dá um OK.
Você note que um, dois, três não está mais aí, não está mais aqui.
Certo?
E podemos deletar.
Vamos adicionar um novo primeiro.
Não sei o que.
Adicionei.
Vamos deletar o hola mundo.
Editar.
Ela está a post.
Vou embora o hola mundo.
Certo?
Concegar.
E assim por diante está tudo.
OK, mas tem um detalhe aqui.
Se notar que quando a gente clica em um post aqui, se o pedido do HTTP for rápido, ele
muda rapidinho o conteúdo e o título daqui.
Mas se não for, vai demorar um pouquinho.
Se notar que inicialmente quando a gente clica, aparece carregando.
Não nem deu para ver, mas aparece a palavra carregando, não é?
Porque não tem nenhum selecionado.
Mas no momento que você seleciona um e depois volta e seleciona o outro, aquele que
foi selecionado anteriormente, a gente instala no estado do aplicativo.
Para demonstrar isso, eu vou adicionar um set time out quando a gente der um FED post.
Certo?
Então eu vou lá para o post detail.
SRC, barra components, barra post detail.
Quando o post detail é montado, ele faz aquele FED post.
Ele chama o action creator para pegar os dados do post.
Eu vou adicionar o set time out aqui para simular o apetite HTTP para demorar um pouquinho.
Porque normalmente demora um pouquinho.
Então eu vou dar o set time out, vou mandar uma função e essa função vai chamar o des
props FED post.
E o time out vai ser de dois segundos.
Certo?
Então eu vou salvar e vamos ver o que acontece.
Eu tenho uma lista, vou clicar em Hello World.
O senote carregando apareceu.
Um.
E depois de dois segundos, finalmente obtemos o nosso post.
Note que esse post tem Hello World.
Vamos voltar aqui.
Agora vou clicar em ASD no seu quê.
O Hello Order ainda está aqui.
E depois de dois segundos, o conteúdo foi substituído com o do post que a gente selecionou.
Então esse negócio não é muito bom para a experiência do usuário.
Então para solucionar esse problema, eu vou propor o que você faça o quê.
Quando você voltar aqui para a lista de posts, você vai descelacionar o post.
Ou seja, você vai no estado do aplicativo e naquela selected, se lembra do post reducer.
Post reducer tem o all e tem o selected.
O que a gente vai fazer?
Setar o selected para no de novo.
Dessa maneira, não vai ter nenhum post selecionado depois que a gente voltar para a lista de posts.
Então para fazer isso, o que a gente vai fazer?
A gente quer mudar o estado do aplicativo do Redux.
Toda vez que a gente quiser mudar, a gente tem que fazer o quê?
Tem que criar um action creator.
O action creator vai retornar uma ação.
E aquela ação vai ser despachada a todos os reducers.
Nesse caso, o reducer que vai se importar com essa ação vai ser o quê?
O post reducer, esse cara aqui.
Então a gente vai adicionar um caso.
E esse caso, a gente vai retornar, nesse caso a gente vai retornar um novo estado.
E nesse novo estado, a gente quer setar o selected para no.
Para nada.
Não tem mais nenhum post selecionado, então a gente vai setar o cara para no.
Isso que a gente vai fazer.
Vamos lá.
Voltando aqui no post detail.
Eu vou deixar o time out aqui, só para ilustrar o exemplo, mas depois nós vamos remover.
Certo?
Então, como a gente pode fazer para remover?
Como é que a gente vai fazer quando chamar o action creator?
Você nota que a gente chama o action creator quando você volta para a cena anterior.
Mas voltando para a cena anterior, na verdade você está desmontando a cena de ver post.
Você está desmontando o post detail.
Você nota que a gente tem o método de life cycle component-demount,
mas tem também outro método chamado component-will-amount, certo?
Esse cara aqui que é chamado quando o componente está preciso desmontar, ser desmontado.
Então eu vou usar esse método de life cycle, certo?
E o que a gente vai fazer?
A gente quer chamar o action creator para desselecionar o post, né?
Remover aquele post que está dentro do selected.
Então vamos lá.
O action creator sempre vai ser injetado como a props, então eu vou falar desse ponto props.
Vamos dar um nome para ele, sei lá, desselect post, que tal, esse nome.
E não precisa de nenhum argumento.
É simples assim, certo?
Então quando esse componente ver post desmontar, vai chamar esse cara, certo?
Então a gente está usando this like post para poder ser injetado as propriedades desse componente.
A gente tem que ir no map dispatch to props, vamos lá embaixo.
O segundo argumento para o método connect é o map dispatch to props.
Nesse caso eu estou usando a versão mais de objeto, que é mais simples, tem que digitar muita coisa.
Então já tem o fet post aqui, eu vou adicionar o quê?
Vou adicionar o desselect post, certo?
Deixa o toggle soft wrap aqui para você ver, certo?
Então tal desselect post, vamos importá-lo porque aqui a gente está injetando o cara como as props,
como a propriedade do componente, mas a gente ainda não tem acesso a ele.
Então vamos lá em cima e importar.
Então aqui vamos importar também o desselect post, que vai estar dentro do actions.
Nós vamos definir, já já, certo?
Então só revisando, quando o componente está prestes a demontar, vamos chamar o action creator, chamar desselect post.
Para poder usar o action creator a gente tem que injetá-lo como props do componente post detail.
Nesse caso vai lá no map dispatch to props, que é o segundo argumento para função connect.
Nesse caso adicionamos o desselect post lá.
Note que o argumento aqui é um objeto, certo?
Para poder usar esse cara tem que importar lá em cima, import desselect post,
que vai estar dentro do arquivo chamado actions.js.
Então vamos lá definir o desselect, voltando aqui.
Vamos lá para o src, barra actions, barra index.
Vamos lá embaixo e adicionar essa função desselect post.
Vou fazer a função de flash, certo?
Nesse caso essa função vai retornar o quê?
Vai retornar uma ação, porque é um action creator, criador de ação.
Então, nesse caso nem tem nenhum pedido HTTP, então eu só vou retornar um objeto, certo?
A maneira que você pode retornar um objeto sem ter que digitar return no seu quê,
é só botar os parênteses e o objeto, certo?
Nesse caso vai ser uma ação com tipo, vamos chamar desselect post, certo?
Falta o c aqui.
Então action creator tem essa função de flash que retorna um objeto,
retorno implícito de objeto requer os parênteses,
se não vai pensar que é o bloco da função, que não é, é na verdade o objeto, certo?
Não precisa de payload, é só o tipo, certo?
Vou adicionar o ponto de vírgula ali e vou exportar esse cara, não se esqueça.
Exportar para disponibilizar o desselect post em outro arquivo,
nesse caso post detail, né?
Certo?
Então, como a gente definiu action creator, agora a gente tem que fazer o quê?
Quando o action creator for chamado, a ação de tipo desselect post
vai ser despachada para todos os reducers, mas qual é o reducer que vai se importar com esse cara aqui?
Vai ser o post reducer.
Vai lá no post reducer.
O que a gente quer no post reducer?
Aqui a gente quer setar o selected para node novo, né?
Quando você seleciona o post, o selected vai ser o post aqui,
vai ter esse título e vai ter esse conteúdo que vai estar dentro do selected.
Mas quando a gente voltar, a gente não quer que aquele cara permaneça lá.
Você nota que ainda está aí, depois de dois segundos aqui muda.
Então, vamos aqui adicionar um caso, esse desselect post, certo?
Nem precisa disso.
E vou fazer o quê?
Vamos retornar sempre o novo estado, né?
Esse é o negócio do reducer.
Ele não vai modificar o estado assim, diretamente, né?
Nunca modifique o state avaliado diretamente.
Sempre temos que criar, fazer uma cópia do estado, certo?
Sempre retornar o novo estado.
São aspectos de functional programming, programação funcional.
Certo? Então, a gente vai retornar o novo objeto.
Nesse caso, a gente vai retornar o novo estado, certo?
Esse objeto vai copiar as propriedades do estado anterior
e vai adicionar ou vai modificar o selected para ser o quê?
Node. A gente vai setar o selected para node,
o quê não vai ter mais nenhum post selecionado
quando a gente voltar para a lista de posts, certo?
É simples assim.
Vamos salvar.
Certo? Então, vamos lá dar uma olhada.
Se deu tudo certo.
Está aqui o cara lista de posts.
Quando a gente clicar no Hello World,
demora um pouquinho carregando e apareceu.
Agora, quando a gente voltar,
vai desmontar o componente,
vai chamar o Action Creator.
O Action Creator vai despachar aquela ação.
A ação vai ser lidada aqui.
Vai chegar nesse reducer.
Chega aí de Select Post.
O caso foi...
Nesse caso, vai retornar o novo estado com o selected node.
Vou voltar aqui.
Vou clicar no outro.
Você note que já apareceu carregando aquela palavra.
Por que aparece carregando?
Se você voltar para o post de tail,
você note que na pulsão de render,
se não tiver o post definido,
ele manda o test carregando.
Por isso que apareceu carregando.
Porque o post não estava definido.
Isso está corretamente.
Está tudo correto porque quando a gente volta de volta,
o Select agora é node.
Parece carregando.
Está aí o cara.
Vamos voltar e clicar no outro, no Hello World.
Apareceu carregando de novo.
E agora o Hello World.
Não tem mais aquele negócio de ver o post anterior aparecendo.
E depois a cena modificar com o post que foi selecionado.
Certo?
Essas coisas?
Por isso que é bom também fazer o time out
para ver que essas coisas acontecem.
A gente corre de um problema.
Então vou remover o time out.
Não precisa mais.
Certo?
Tudo ok?
Certo?
Certo?
Então por esse vídeo é só.
E até a próxima.


0008-37 CRUD com o Redux & React Native

Explicação de Como Iremos Validar o Formulário de Criar/Editar Post

```markdown
# Resumo do Vídeo sobre Validação de Formulário

## Introdução
A implementação básica do aplicativo está complete, mas melhorias são necessárias. O foco deste vídeo é a validação do formulário para criar ou editar um novo post.

## Problema Identificado
Atualmente, ao submeter o formulário vazio, um novo post é criado sem conteúdo, o que não deve ser permitido.

## Soluções Propostas
1. **Desabilitar Botão de Envio**
   - O botão de OK para enviar o formulário deve ser desabilitado se os campos de título e conteúdo estiverem vazios. 
   - Ambos os campos são requeridos, ou seja, precisam ter pelo menos um caractere.

2. **Limite de Caracteres**
   - O título terá um limite de 40 caracteres, e o conteúdo, 512 caracteres. Esses limites são arbitrários e podem ser ajustados.

3. **Mensagens de Erro**
   - Acionar mensagens de erro em vermelho abaixo de cada campo de texto, explicando o erro e como corrigi-lo.
   - O fundo dos campos inválidos deve ser vermelho para melhor visualização.

## Implementação
- **Uso do Ubridux**: O estado do aplicativo será gerenciado com Ubridux.
- **Ação de Validação**: Durante a digitação, a função `onChange` é chamada para validar o conteúdo em tempo real.
  - Se o título estiver vazio, um erro será registrado no estado do Redux (propriedade `titleError`), o que fará com que o campo fique vermelho e exiba a mensagem de erro.
- O mesmo processo será aplicável ao campo de conteúdo.

## Conclusão
O vídeo preparará os espectadores para a implementação da validação de formulários nos próximos vídeos.

**Até o próximo vídeo!**
```


A implementação básica do nosso aplicativo está completa, embora que haja muitas coisas
a melhorar.
Neste vídeo, nós vamos focar em um aspecto que a gente ainda não lhe deu, que é a validação
do formulário de criar ou editar um novo post.
De caso, você note aqui que nós se apertamos OK com o formulário vazio, vai criar um
novo post aqui embaixo sem nenhum conteúdo.
Nós não queremos que isso seja permitido, então nós iremos adicionar a validação
a este formulário aqui.
Antes de pular para código, vamos lá uma olhada no nosso design aqui, que é as mudanças
que a gente vai fazer, as novidades, feature.
Então, primeiramente, o botão de OK de enviar esse formulário tem que ser desabilitado
se o conteúdo e o título estiverem em base.
Então, por causa disso, esse campo de título e de conteúdo terão que ser validados e eles
são requeridos.
Está bom?
Isso significa que ele precisa ter pelo menos um caractere.
Outra validação que vamos adicionar é o limite de caracteres para cada campo.
Nesse caso, eu vou dar o limite para 40 caracteres para o título e 512 caracteres para o conteúdo.
Esse número é arbitrário e você pode escolher qualquer limite.
E para o usuário, para entender o que aconteceu, que o formulário que ele não vai conseguir
enviar, nós vamos adicionar uma mensagem de erro aqui debaixo de cada campo de texto.
Uma mensagem com um texto em vermelho, certo?
Vai indicar ao usuário do aplicativo que houve um erro na submissão do formulário
e com explicação que permitirá entender como corrigir.
Também vamos fazer o background, o cor do fundo de cada campo de texto vermelho para
que o usuário visualize melhor os campos que estão inválidos, certo?
Tudo ok?
Então vamos aqui pensar um pouco como a gente vai fazer tudo isso.
Nós estamos usando o Ubridux para manter o estado do nosso aplicativo.
Então nós vamos precisar sempre fazer aquele mesmo passo a passo do Ubridux que é chamar
o Action Creator que retorna uma ação.
Essa ação será despachada a todos os reducers.
Um dos reducers vai se importar com o tipo de ação e vai retornar ao novo estado que
terá as mudanças.
Nesse caso vai ser o erro.
Então para um dia que a chamada para o Action Creator vai acontecer, você note que quando
você digita alguma coisa, por exemplo, na caixa aqui do título, ele chama aquela função
chamada onChange.
Nesse caso eu acho que era onTitleChange.
Vamos aqui, por exemplo, postEdit tem essa função onTitleChange.
Certo?
Então toda vez que hoje digita cada caracter que você digita essa função aqui é chamada.
Então nessa função nós vamos validar em tempo real o formulário.
Se o usuário digitar alguma coisa vai chamar essa função.
Então a gente vai checar, obviamente vai ter alguma coisa que ele digitou ou ele pode
ter deletado tudo o conteúdo.
No caso dele deletar todo o conteúdo.
Nós vamos checar o título e o título vai ser uma string vazia.
Então nesse caso vai ser inválido, caso inválido.
Então a gente vai chamar o Action Creator para mudar o erro, adicionar um erro ao
estado do Redux, certo?
O erro no título.
E por causa disso vai ter a propriedade no estado do aplicativo que é o titleError,
erro do title.
Essa propriedade vai fazer com que esse campo aqui se torne vermelho e a mensagem que aparece,
mensagem de erro, vai aparecer embaixo da caixa de texto do título, certo?
Assim que nós vamos prosseguir, vamos também desabilitar o botão baseado no se tiver algum
erro no estado do aplicativo.
Obviamente estamos fazendo a mesma coisa para o conteúdo, certo?
Seguindo a mesma linha de raciocínio.
Certo?
Espero que tenham entendido o que nós vamos fazer nos próximos vídeos, a validação
de formulário.
Então, preparado?
Então até o próximo vídeo.


0008-38 CRUD com o Redux & React Native

Adicionamos titleError e bodyError ao Form Reducer

# Resumo da Implementação do Formulário de Postagem

Neste trecho, a discussão gira em torno da implementação de um formulário para a criação de um novo post, focando no componente `post new`.

## Estrutura do Estado

1. **Propriedades do Formulário**: O estado do formulário já contém propriedades para armazenar o `título` e o `body` do post.
2. **Tratamento de Erros**:
   - Serão adicionadas duas novas propriedades: `titleError` e `bodyError` para armazenar os erros específicos de cada campo.
   - Inicialmente, ambas as propriedades terão o valor `null`, indicando que não há erros.

## Tratamento de Ações

1. **Criação de Ação**: Uma nova ação chamada `Change Post Error` será criada para lidar com a alteração dos erros no formulário.
2. **Modificação do Estado**:
   - A ação retornará o novo estado, copiando as propriedades do estado anterior e atualizando as novas propriedades de erro.
   - Como a ação pode ser aplicada a ambos os campos, o erro correspondente será passado através do `action.payload`.

## Dinamicidade

- A implementação permitirá a atualização dinâmica do campo de erro, utilizando a sintaxe de colchetes (`square brackets`) para se referir ao nome da propriedade a ser modificada, facilitando assim a manipulação de ambos os campos de erro sem a necessidade de criar ações separadas para cada um.

Essa abordagem inicial é simples, mas há espaço para melhorias futuras, como a criação de uma única propriedade de erro capaz de lidar com todos os tipos de erros no formulário.

--- 

Esse resumo descreve a implementação de um formulário para criar posts, com a inclusão de um sistema de gerenciamento de erros utilizando Redux.

Para começar a nossa implementação vamos focar aqui no fórmulares de criar o novo
post, certo?
Na post new aqui, neste componente.
Primeiro de tudo nós temos que ir lá no reducer do post form.
Nós temos a propriedade título e body que são responsáveis para armazenar os valores do formulário.
Agora nós irão precisar de duas novas propriedades para armazenar o erro de cada campo.
Eu vou chamá-las do mesmo nome que a propriedade seguida da palavra error.
Erro, certo?
Então nós vamos adicionar o title error e o body error, certo?
A minha escolha aqui é fazer duas propriedades para deixar esse negócio simples, mas talvez se você quiser
aprimorar o código depois você pode ter só uma propriedade chamada error que vai envolver todos os tipos de erros do seu formulário.
Mas como estamos?
Vamos deixar simples.
Agora, só agora, certo?
Então, inicialmente essas propriedades serão no porque não tem erro, certo?
Agora, se tiver algum erro, a descrição do erro vai ser armazenada com o valor dessa propriedade, certo?
Meu design vai ser assim.
Se tiver o erro, então vai ser algo assim, vai ter um string que representa que vai dizer que tipo de erro é.
Mas se não tiver erro, vai ser só no.
Então, inicialmente é no, certo?
Agora, para poder mudar essas propriedades por causa do Vurdux, a gente tem que sempre chamar o action creator
para criar um tipo de ação, certo?
E esse tipo de ação, vamos chamar de quê?
Vamos adicionar o caso aqui.
Vamos dizer Change Post Error.
Ah, nem preciso de vir, vou lá, desculpe.
Change Post Error, esse aqui é o tipo de ação que nós vamos usar para descrever o ajuste desses erros, certo?
Você poderia fazer dois tipos de ações Change Post Error do título ou ir dublar.
Mas eu vou fazer só uma ação que vai cobrir todo tipo de erro, certo?
Você vai ver já, já como isso vai acontecer.
Então, essa ação retorna o novo estado, copia os propriedades do estado anterior e seta o erro.
Nesse caso, nós temos Title Error, certo?
Mas também temos o Body Error.
Então, como vamos fazer para lidar com qualquer tipo de erro?
Espera um pouco aí, vamos só fazer o Title Error.
Nesse caso aqui, a gente vai pegar a mensagem do erro do payload, do action.payload,
que vai ser passada pelo action creator, tá bom?
A mensagem de erro vai estar dentro do payload, da ação, certo?
Esse aqui serve por causa do Title, mas não serve para dubar.
Então, o que a gente vai fazer?
Você não disse que fosse body, a gente só mundaria essa palavra aqui.
Então, o que a gente vai fazer?
A gente pode setar essa propriedade, o nome da propriedade dinamicamente.
Como é que isso funciona?
Você põe esses aqui, chamados square brackets.


0008-39 CRUD com o Redux & React Native

Adicionamos case para CHANGE_POST_ERROR e definimos changePostError action creator

```markdown
# Resumo do Transcript

O segmento discute a implementação de um action creator para lidar com erros em um formulário. A seguir, as principais ideias abordadas:

1. **Objetivo**: Capturar o valor do erro e do campo (title ou body) em um action creator ao chamar `postCreator`.

2. **Estrutura do Payload**:
   - O payload será um objeto contendo duas propriedades:
     - `field`: O nome do campo que apresentou erro (ex: title ou body).
     - `error`: A descrição do erro que ocorreu.

3. **Acesso às Propriedades do Payload**:
   - Para acessar o erro e o campo de maneira mais limpa, as propriedades podem ser extraídas do `action.payload`, evitando a repetição de `action.payload` a cada uso.

4. **Uso da Interpolação de Strings**:
   - A interpolação de strings (usando backticks) é sugerida para formatar a mensagem de erro de forma mais legível (ex: `title error`, `body error`).

5. **Mudanças no Estado**:
   - Ao modificar o estado, duas novas propriedades são adicionadas: `title error` e `body error`, que armazenam a descrição do erro se houver um problema no formulário.

6. **Criação do Action Creator**:
   - Um novo action creator chamado `changePostError` é introduzido, recebendo dois parâmetros (campo e erro) e retornando um objeto de ação com um tipo (`type`) e um payload.

7. **Retorno de Ação**:
   - O action creator retorna um objeto contendo o tipo da ação e um payload, onde as propriedades têm o mesmo nome que os valores providenciados (usando a notação simplificada do ES6).

# Conclusão

De forma resumida, o processo visa facilitar o manejo de erros nos campos do formulário ao incluir informações úteis no estado, melhorando a experiência do usuário ao fornecer feedback claro sobre onde ocorreram os problemas.
```

os coxetes e nós temos que arranjarmos o jeito de pegar o valor Tiro, o valor body de
um local.
Nesse caso vai ser do action creator.
Quando a gente chama action creator, já já vamos criar, por exemplo, a gente chama post
creator, nós vamos adicionar o nome da propriedade e o erro.
Essa maneira talvez.
Então, nós podemos passar esse cara aqui com o payload, dentro da payload.
Especialmente, eu gostaria de usar esse cara aqui como payload, mas como vai precisar
também desse cara, nós podemos adicionar esses dois como um objeto, certo?
O objeto que vai ser, deixa eu abrir uma nova, para explicar isso.
Então, payload, em vez de ser só um one string, assim, vai ser na verdade o objeto.
Esse objeto vai ter duas propriedades, um aqui vai descrever o erro e a outra que
vai ser o nome do erro, nesse caso eu vou chamar field, vai ser Tiro ou vai ser body,
entendeu?
E dessa maneira a gente vai falar action.payload.error, para pegar a descrição do erro e action.payload.body
para, ah, desculpa, ponto field, para saber qual o campo que houve um erro, o erro, certo?
Desculpando aqui após o reducer, a propriedade aqui vai ser o action, ponto payload, ponto
field, seguida do palavra error, certo?
Se fosse Tiro, isso iria ficar Tiro error e assim por diante, certo?
E no caso aqui do descrição do erro vai ser na verdade ponto error, certo?
Se você achar que isso está muito long, pode extrair essas propriedades do action.payload
aqui, vamos fazer isso então.
Como eu vou fazer uma variável aqui dentro desse case, eu vou adicionar as chaves aqui
para acertar o scopo local para essa variável que eu vou criar, certo?
Vou extrair o field e o erro de dentro da action.payload, aí não precisa mais digitar
o action.payload aqui, certo?
Outra coisa que podemos aprimorar é essa concatenação aqui, não precisa fazer se
no sc você pode usar o back tick que é o acento, sei lá, grave?
Deixe comentar aí com o nome desse cara, acho que acento grave, não é o agudo, agudo
é esse outro, né?
Anyway, então vamos lá.
Vamos dar um string interpolation, interpalação de string, certo?
Então deixa esse cara dentro e a variável vai ser field, então vou adicionar esse
cara aqui assim.
Field é uma variável que contém o valor título, title ou body.
Vai ser interpolado aqui, o valor vai ser substituído por exemplo, assim ficando title
error ou body error, certo?
E esse cara vai servir como o nome da propriedade aqui que vai ser modificada no estado, certo?
Que vai ser dada como novo estado.
Vamos salvar.
Então só revisando aqui, nós modificamos o estado inicial, adicionamos duas novas
propriedades, a title error e a body error, são propriedades que se houver algum erro
no formulário irão conter a descrição do erro, certo?
O caso aqui vai ser esse tipo de ação chamado change post error, vai pegar o campo que o
erro aconteceu e a descrição do erro e vai setar isso aqui e retornando como novo estado.
Vamos lá agora fazer o action creator para poder fazer retornar essa ação aqui.
Vamos lá para a pasta src, action, index, certo?
Se nós já temos change post title, change post body e assim por diante.
Então vamos adicionar um novo action creator aqui chamado change post error, certo?
Então nós fazemos só esse action creator com dois parâmetros, primeiro parâmetros sendo
o nome do campo que houve o erro e o segundo parâmetro sendo a descrição do erro.
Se você quiser só usar um parâmetro você pode passar um objeto, certo?
Eu vou deixar só com dois parâmetros mesmo.
Você pode fazer...
Então sinta-se à vontade de escolher a maneira que ele achar melhor.
Então vamos definir e vou chamar esse cara de field e o outro vai ser a descrição do
erro.
Então vamos chamar só de error, sei lá.
Agora sempre retornamos uma ação do action creator, um objeto que tem o tipo type, nesse
caso change post error e tem outra propriedade, a outra propriedade como convenção chamou
de payload mas você pode na verdade chamar de que quiser.
Eu chamo de payload, então vamos ser o objeto que tem o field, que é field, you error, error.
Certo?
Essa propriedade field tem o valor field que se refere na verdade ao primeiro parâmetro
da função.
A propriedade error tem o valor que é essa variável aqui segundo a parâmetro da função.
Como a propriedade tem o mesmo nome que o seu valor nós podemos fazer isso aqui.
Mesma coisa.
Graças a JavaScript S6.
Certo?
Então bem simples o nosso action creator retornação change post error.
Contém o campo que houve o erro e a descrição do erro.
Tá certo?


0008-40 CRUD com o Redux & React Native

Validamos o campo de título (cor de fundo vermelha)

# Resumo do Transcript

## Introdução
O foco da implementação é a interface do aplicativo, utilizando Redux para gerenciar o estado, incluindo Action Creators, casos de ação e Reducers.

## Implementação do Componente `Post New`
1. **Validação do Título**:
   - O campo de título é obrigatório.
   - Utiliza a função `onTitleChange` para monitorar o input.
   - Se o título estiver vazio, é gerado um erro usando o `action creator` `changePostError`.

2. **Injeção das Props**:
   - O `changePostError` deve ser injetado como props no componente `Post New`.
   - É necessário atualizar a função `mapDispatchToProps` e realizar a importação do `changePostError`.

3. **Estilo do Campo**:
   - A caixa de texto deve alterar a cor de fundo para vermelho se o título for inválido.
   - Um estilo é aplicado com base no estado do erro.

4. **Código do Input**:
   - O estilo é gerado por meio de uma variável, onde a propriedade `backgroundColor` é ajustada de acordo com a presença de erros.

5. **Mapeamento do Estado**:
   - O `titleError` e `bodyError` são extraídos do estado no `mapStateToProps` para serem utilizados no componente.

6. **Testes de Funcionalidade**:
   - Ao digitar, o sistema valida e altera a cor para indicar erros.
   - Um erro deve ser resetado quando o título se torna válido.

## Conclusão
O próximo passo é replicar o processo para o campo de corpo (body) do formulário, utilizando a mesma lógica de validação implementada para o título. O desenvolvimento continua no próximo vídeo.

Então vamos lá e começar a trabalhar com a nossa interface.
Agora que já temos o negócio do Redux já definido, o Action Creator, o caso da ação
e o Reducer lá.
Então vamos para o Post New, tá bom?
O Post New, vamos aqui voltar para o app para aplicativo, o formulário de novo.
Então vamos ver aqui, vamos começar com o título, o título aqui é requerido, tá bom?
Então para a gente poder saber quando você digitar alguma coisa se houve um erro ou
não, nós vamos usar a função on title change, né?
Você note que eu tenho um console log lá, toda vez que eu digito alguma coisa, aparece
aqui.
Então nós vamos adicionar código a essa função para validar esse campo.
Então vamos lá.
No on title change do componente post new, antes de mudar o título eu vou validar.
Primeira validação aqui é que esse campo é requerido.
Então se o título for vazio, né?
String vazia está inválido.
Nesse caso o que é que a gente vai fazer?
Nós temos que indicar, setar aquela propriedade no estudo chamado Tarot Error.
A gente criou o action creator chamado change post error que leva dois argumentos aqui,
primeiro argumento vai ser o nome do campo que tem o erro e segundo argumento é a descrição.
Certo?
Título é...
Não pode ficar vazio, sei lá, mensagem assim.
Título é...
Título não pode...
Uma coisa assim.
Então esse cara vai adicionar um erro para o título.
Certo?
Vamos salvar aqui.
Vou dar um console log para você ver.
Título está inválido, só para aparecer lá.
Ah, nós usamos o action creator mas nós não injetamos como props a esse componente post
new.
Então você se lembra como fazer isso?
Então pause o vídeo aí e injete esse action creator nesse componente.
E aí deu certo?
Então vamos lá embaixo.
Vamos lá para o map dispatch to props.
Vamos adicionar o change post error.
Injetá-lo como prop ao componente post new.
Como estamos usando o change post error, temos que importá-lo lá em cima nos imports aqui.
Action eu vou adicionar change post error.
Certo?
Agora não vai ter erro.
Utilizar o aplicativo e ver se digita alguma coisa.
Está válido.
Agora está inválido porque não tem nada.
Parece eu aqui.
Digitar, digitar e assim por diante.
Certo?
Então vamos agora fazer com que essa caixa de texto fique vermelha se for o título foreign
válido.
Nesse caso nós estamos lidando com o estilo desse text input.
Nós podemos adicionar o estilo para a cor do fundo para ser vermelho.
Certo?
Se tiver um erro.
Vamos fazer isso.
Vamos lá.
Vamos dar uma olhada no código da função de render.
Render aqui.
Está usando post form.
Certo?
E dentro do post form.
Vamos lá para o post form.
O post form é só um componente normal assim.
Não é conectado ao redux.
Então a gente vai ter que arranjar uma maneira de fazer esse cara ter acesso àquele erro
do estado.
Mas antes disso vamos lá ver onde está aquele text input para o título.
Esse cara aqui.
Então você nota se eu adicionar o estilo aqui.
Background color red vermelho.
O cara vai ficar vermelho lá.
Cender assim que a gente quer.
Algo assim.
Então para fazer isso o que eu vou fazer?
Então eu vou tirar esse cara aqui.
Estrair para fora aqui.
Fazer um variável.
Certo?
Vai ser...
Sei lá.
Vou chamar input style.
E vou remover esse background red.
Certo?
Você vai ver o que eu vou fazer já.
Eu vou só extrair o estilo para fora com uma variável.
Certo?
O que vai acontecer?
Se houver um erro nós vamos adicionar aquele background color red.
Se tiver um erro nesse caso que?
Tiro error.
Se tiver um tiro error ainda não definimos isso mas a gente quer fazer algo assim.
Vamos adicionar a propriedade ao input style.
O background color e vamos setar para red.
Algo assim, tá bom?
Mais um dia que vai...
De onde é que vai ver esse title error?
Nós podemos passar como prop.
Tá bom?
É uma das maneiras.
Mais um ponto prop no title error.
Se tivesse cara definido vamos adicionar red.
Certo?
Então voltando a false new.
Eu vou adicionar a propriedade aqui.
Tiro error.
Que vai ser da onde?
Esse cara vem lá do Redux, né?
Estado do aplicativo.
Nós vamos injetá-lo como props.
Esse componente também.
Certo?
Então para injetar o title error do estado do aplicativo ao componente false new nós
vamos lá embaixo para o map state props.
Certo?
Vamos pegar do estado state.postform.
Você sabe que é the reducer.
Postform reducer.
Tem aquelas propriedades aqui.
Nós extraímos o título e o body, mas também queremos essas duas aqui.
Então vamos escrever aqui, vamos extrair também o title error e o body error.
Certo?
E retorna os mesmos.
Certo?
Retorna eles, que vai ser agora disponibilizado no post new, que nós iremos usar aqui.
Vamos passar como prop ao post form.
Esse cara aqui que foi injetado no post new vai ser passado como title error para o post
form e o post form recebe seus props e dá uma olhada se tiver algum erro no título.
Vai mudar o background para vermelho.
Vamos testar.
Dilita alguma coisa, tudo ok.
Vamos dar tudo.
Certo?
Agora ficou vermelho.
Vamos digitar alguma coisa de novo.
Opa, o que aconteceu?
Ah, a gente solida com os erros, mas esquece de limpar o erro quando a gente passa todas
as condições de erro lá no title change.
Então a gente tem que adicionar alguma coisa para resetar esse erro.
Então vamos lá.
Estamos aqui no post new e no title change.
Aqui é inválido, não sei o que, não sei o que.
Eu vou dar um else aqui e nesse else.
Se não foi inválido, eu vou só resetar o erro.
Certo?
Change post error para o title.
Eu vou botar no aqui para resetar o erro.
Limpar o erro.
Certo?
Na próxima vez que você digitar alguma coisa e não tiver nenhum erro, vai só remover
qualquer erro que tinha depo antes ou se não tiver nenhum erro não vai fazer nada.
Só deixa no de novo.
Então vamos testar de novo.
Digitar alguma coisa, ter um erro, digitar de novo.
Então ficou ok novamente.
Certo?
Agora como é que é isso?
Quero ver você fazer isso, a mesma coisa para o body conteúdo.
Certo?
Vamos até terminar.
Vamos ver a sua solução no próximo vídeo.


0008-41 CRUD com o Redux & React Native

Validamos o campo de conteúdo (cor de fundo vermelha)

# Resumo do Transcript

Neste vídeo, o apresentador mostra como validar o campo de conteúdo em um formulário da mesma forma que foi feito para o título. 

## Passos da Validação

1. **Função de Validação**: Quando o usuário digita no campo de conteúdo, a função `onBodyChange` é chamada.
2. **Verificação de Erros**:
   - Se o corpo estiver vazio, é considerado inválido. Utiliza-se `changePoseError` para comunicar o erro.
   - Em caso de correção (se um erro havia sido previamente identificado), a cor de fundo vermelha é removida.
3. **Estilos**: 
   - O estilo do campo de conteúdo precisa ser modificado para indicar um erro. O fundo deve ser vermelho se houver um erro no corpo.
   - Um novo objeto de estilo, `bodyStyle`, é adicionado que considera a propriedade `bodyError` passada do componente `postNew`.

## Implementação

- O `postform` utiliza propriedades injetadas por meio de `mapStateToProps` para acessar os erros de título e corpo.
- Quando não há erros, o estado é resetado.
- A lógica de verificação e apelo à função de estilo é implementada no componente `postform`.

## Observações Finais

- O apresentador ressalta a similaridade entre as implementações para o título e o corpo. Ele sugere que, ao se deparar com repetição de código, deve-se considerar formas de reduzir a duplicação.
- O vídeo conclui convidando os espectadores para o próximo.

---

Essa é uma visão resumida, sendo que o conteúdo detalha a implementação de validações e ajustes de estilo em um formulário React.

Então vamos agora validar o campo do conteúdo da mesma maneira que nós fizemos um título,
certo?
Então, no momento que você digitar alguma coisa, vai chamar a função onBodyChange,
certo?
O que a gente vai fazer?
Vamos ver a mesma coisa de antes, vai checar se o body ou vazio está inválido, né?
Então vou dar desse ponto props, changePoseError, qual é o campo, body e descrição do erro?
Vou só copiar.
Eu vou dar um parajeitado em branco, vazio e se não tiver nenhum erro, nós vamos apenas
recetar o erro.
Caso a gente já tenha um erro e a gente corrige o erro, vai tirar aquela cor vermelha do fundo.
Então vamos de novo, desse ponto props, changePoseError, vamos recetar o erro do body, opa,
certo?
Então vamos lá, está tudo ok.
Então uma coisa, apaga tudo, nada aconteceu, porque nós esquecemos de mudar o estilo do
campo de conteúdo, mas se eu der um console log aqui, conteúdo está inválido, vai aparecer,
vou olhar aqui, tenho modificado, conteúdo está inválido, certo?
Então vamos lá, vamos mudar esse acordo de fundo, background, cola para vermelho.
Então vamos voltar ao postform e dar aquele estilo, está aqui, estou no postform na função
render, certo?
Você note o text input, o segundo text input se refere ao conteúdo, tem esse estilo com
height e border, certo?
Então vamos remover esse cara.
Vamos adicionar aqui outro objeto que define o estilo e se tiver o bodyError, certo?
Se lembra do bodyError foi propriedade que injetamos usando o map, dispatch to props
lá embaixo, desculpa, que foi injetada a esse componente postform do postnew, certo?
O postnew aqui na função render, ele manda essa prop chamada bodyError, certo?
Que a gente se não pôs ainda, então vamos pô, o bodyError vai ser des, ponto props,
ponto bodyError.
Essa propriedade que é passada para o postform chamada bodyError é injetada no postnew,
certo?
Des, ponto props bodyError lá embaixo usando o map state to props, está bom?
Está aqui já, voltando aqui para o postform.
Se tiver eu, você adiciona propriedade para o input bodystyle, background color vai ser
red, certo?
E agora, volta aqui no text input e põe input bodystyle.
Agora vamos aqui.
Salvar, esqueci de salvar, salvar, certo?
Vermelho.
Então está tudo certo agora.
Vamos revisar mais uma vez aqui.
Lá no postform reducer, nós adicionamos duas propriedades chamadas titleError e bodyError,
cujo valor é no se não tiver nenhum erro ou um string que descreve o erro, certo?
Quando você digitar alguma coisa lá no postform aqui, vai chamar a função onChange,
então aqui no postnew, onBodyChange, a função vai checar o body, se a gente digitou algo
e apagou tudo e a body estiver vazia, vai chamar actionCreativeChangePostError, com
dois argumentos, o primeiro sendo o campo em questão e o segundo sendo a descrição
desse erro do campo body.
Nesse caso, com o string estar vazia, você não digitou nada, isso é um erro, o conteúdo
não pode estar vazio, em branco.
Por causa disso, o postnew que lá embaixo tem um maps.tip props, ele extrai o titleError
e o bodyError do estado do aplicativo e injeta e dá como propriedade ao postform o titleError
e bodyError que vem desses caras aqui das props do postnew.
E lá dentro do postform, a gente checa se tiver algum erro no conteúdo, você sete
o background para vermelho e como está usando essa variável input bar style, é usada como
estilo aqui.
Certo?
Contando aqui o postnew, você note que a gente fez quase a mesma coisa no ontário
change e no ontário change.
Se você se ver repetindo as coisas, sempre é bom pensar em alguma maneira de ser menos
repetitivo.
E é isso que a gente vai fazer no próximo vídeo.
Até a próxima!


0008-42 CRUD com o Redux & React Native

Refatorização (“refactoring”) de código usando a nova função validateField()

# Resumo do Transcript

Neste trecho, o autor discute a refatoração de duas funções chamadas `TireAndChange` e `NumBodyChange`, que utilizam códigos semelhantes. A proposta é criar uma nova função chamada `ValidateField` para evitar a repetição de código, permitindo que ambas as funções a utilizem.

## Principais Pontos:

- **Refatoração Necessária**: Observou-se que as funções `TireAndChange` e `NumBodyChange` compartilham grande parte do código.
- **Criação da Função `ValidateField`**: A nova função receberá um objeto que contém três propriedades: 
  - `name`: nome do campo em inglês.
  - `value`: valor atual do campo.
  - `label`: nome do campo em português.
  
- **Implementação**:
  - O código para validar os campos foi simplificado utilizando interpolação de strings para gerar mensagens de erro personalizadas.
  - A função `ValidateField` é chamada nas funções existentes ao invés de repetir o código.

- **Resultados dos Testes**: Após a implementação da função, testes demonstraram que tanto o título quanto o corpo estavam válidos, e as mensagens de erro foram exibidas corretamente.

- **Próximos Passos**: O autor menciona a adição de uma validação para limitar o número de caracteres em um futuro vídeo.

## Conclusão
A refatoração proposta não apenas melhora a legibilidade do código, mas também promove a reutilização de código, facilitando futuras manutenções e extensões.

Então, vamos dar uma refatorização aqui.
Essas duas funções, um Tire and Change,
um Tire and Change, NumBodyChange,
porque a gente está usando quase o mesmo código
para fazer a mesma coisa.
Então, que tal a gente fazer uma nova função
que faz essa mesma coisa e chama essa função
dessa função, um Tire and Change,
dessa função, a Bary Change.
Dessa maneira, a gente só precisa escrever aquela função
uma vez e usá-la várias vezes de outras funções.
Então, você note que comparando as coisas que diferem
entre essas duas é esse cara aqui, que é o campo,
aqui é a Bary, que nesse caso vai ser o valor do campo,
em questão, e é o mesmo desse ponto próprio
que a gente post era, não muda nada,
e muda esse nome do campo aqui, que é Tire,
e do outro que é Bary, e muda a descrição,
a descrição é quase a mesma, só muda esse cara aqui,
que o detalhe que eu usei, o nome português,
mas aqui o nome do campo é inglês,
então a gente tem que pensar nisso também.
Se os dois foram os mesmos, ia ser mais fácil,
podia usar esse aqui, esse aqui como mesmo variável.
Mas então, porque são diferentes,
a gente tem que fazer outra,
passar o seu argumento na função que a gente vai criar.
Então, vou recortar aqui, vamos pegar esse cara aqui,
vou recortar, vamos fazer uma função aqui dentro do post new,
após um Bary Change, vou fazer a função,
eu vou chamá-la de Validate, Field, certo?
Porque eu estou usando 10.props,
eu vou usar o property initializer, que é dao igual,
e define a função como função de Flash.
Vou colar, e vamos começar a refatorização aqui com essa função.
Note que esse cara aqui vai ser o valor da chamada do campo,
chamada Field, que vou chamá-la de Field, certo?
Então, tem o valor do Field,
tem o nome do Field, que nos casar e tem o nome Português.
Então, como argumento, como parâmetro dessa função,
eu vou pegar três coisas,
o nome da Field, que é Tidal,
o valor que está dentro dessa variável aqui,
e o nome Português,
para eu poder, eu utilizar na mensagem de erro.
Esse cara, na verdade, nem precisava,
você pode só, poderia usar a mesma mensagem,
aí não precisaria ter essa terceira coisa,
mas eu vou fazer.
Então, em vez de pegar três argumentos,
eu vou fazer só um objeto,
um único argumento que é um objeto, certo?
Então, esse objeto, vou chamar de, só de Field,
certo?
E dentro desse objeto vai ser assim,
voltando aqui,
a função TidalChange, a gente vai chamar o value de Field
e vai passar um objeto, certo?
Nesse objeto vai ter,
esse objeto é a Field, vai ter três coisas.
Então, primeiro eu chamar o name para o nome da Field,
certo? Nesse caso vai ser Tidal.
O segundo é o value, vou chamar o valor,
vai ser o que? Vai ser o valor que está dentro da variável Tidal,
que é Dada, essa função.
E o terceiro eu dar o nome Português,
certo?
Vou chamar de Level, sei lá.
Chama de Tidal.
Certo?
Então, um único objeto com três propriedades,
name, value e level.
Name é o nome do
Camp em inglês.
Value é o valor do Camp que está dentro da variável Dada,
função onChange.
Level vai ser o título, o nome da variável
do Camp em Português,
certo?
Então, vai chamar o value de Field assim.
Então, esse objeto vai ser chamado Field,
dentro da value de Field, voltando aqui.
Então, if, o quê?
A gente quer comparar o valor dessa, dessa camp,
né? O valor vai estar dentro de Field.value,
certo?
Field.value.
Fone branco, está inválido.
Vamos dar a console log,
eu vou tirar esse console log já, já,
mas deixe aí.
A gente pode usar aqui
o nome desse Field.
Name,
está inválido.
This will prop change post error
qual o nome da propriedade aqui nesse caso.
Vai ser Field.name,
certo?
Olha lá em cima,
certo?
E esse,
essa mensagem aqui,
vamos usar o back tick para fazer
interpolação de string,
string interpolation.
Esse cara título é o nome em Português
que eu chamei de label.
Field.label,
certo?
O valor da variável aqui vai ser
substituído aqui.
E no final aqui,
só para finalizar isso aqui, é o nome do Field.
Certo?
Então, vamos voltar lá em cima.
A gente chama validate field,
toda vez que está um change.
A mesma coisa,
vai ser num body change,
mas antes disso,
vamos testar ver se não aconteceu nenhum problema,
não teve nenhum problema para o título.
Validate fields,
não tem nenhum problema,
não tem nenhum problema para o título.
Validate fields,
Validate fields, not defined.
Então, qual é esse problema?
Como é que corrige?
Olha aqui como é que eu chamei validate field.
Está faltando alguma coisa antes?
Isso, tem que ter o des,
porque eu defini a função
no próprio componente.
Salvar.
Voltando aqui.
Então, deu certo.
O título está em Valido.
Tyrum está em Valido.
Certo?
Note que eu dei a interpalação no nome do Field.
Não era o nome português,
mas o nome próprio do Field.
Field.name.
Então, na mesma maneira,
eu quero ver você fazer
aqui para um body change,
dê uma pausa,
e vamos continuar já já.
E aí, deu tudo certo?
Então, vamos remover esse cara aqui,
e adicionar
des.validate field,
passo um objeto.
O name vai ser o quê?
Body.
O value vai ser o próprio valor da variável aqui,
e o level
vai ser o nome português
do teudo.
Certo?
Salvar.
Vamos testar.
O body está em Valido, está vermelho.
Certo?
Então, é isso.
Eu fico melhor assim.
E, se lembra que a gente tinha falado
de impor um limite ao número de caracteres?
Isso que a gente vai fazer no próximo vídeo.
É só adicionar outro FLC
dentro do Validate Field,
que vai dar tudo ok.
Certo?
Até o próximo.
Tchau.


0008-43 CRUD com o Redux & React Native

Resetamos os Valores no Redux do Formulário para Criar Novo Post

# Resumo da Apresentação sobre Redux e Manipulação de Estado

## Introdução
- A apresentação discute a manipulação e validação de campos em um formulário de postagem usando Redux.

## Comportamento do Estado
- Se um usuário clica em "novo" e insere dados, ao voltar e clicar em "novo" novamente, os dados permanecem. Isso ocorre porque os campos estão conectados ao estado do Redux que mantém os valores.

## Comportamento ao Editar
- Ao clicar em "editar" e voltar, os campos não mantêm os valores. Isso se deve à chamada do ciclo de vida `componentWillMount`, que reinicializa o formulário.

## Solução Proposta
- Para resolver o problema do formulário em "novo post":
  1. Adicionar a função `componentWillMount` na cena do novo post.
  2. Chamar o `resetPostForm`, que é um action creator que redefine o estado inicial dos campos.
  3. Importar `resetPostForm` e injetá-lo no componente.

## Implementação
- Após a implementação da função no ciclo de vida e a chamada do action creator, o formulário deve ser redefinido corretamente ao retornar à cena de "novo post".

## Conclusão
- O uso correto dos ciclos de vida e Redux permite uma melhor gestão do estado e a resolução de problemas de persistência de dados em formulários.

Antes de continuar com a validação dos caracteres de cada campo, gostaria de mostrar
uma coisa aqui.
Se você clicar em novo, digitar alguma coisa e depois ela está e ainda se deixa algum
conteúdo aqui ou ainda no título e voltar, aí clica em novo de novo, olha o que acontece.
Ele mantém o estado.
Isso porque esses campos são ligados ao estado do Redux e por isso quando a gente entra
nessa nova cena, nesse novo post, como o estado é conectado ao Redux, sempre vai ter o mesmo
valor, né?
Isso não acho que a gente tinha algo parecido quando você clica em um novo post e clica
em editar.
Deixa eu ver aqui.
Carregando um pouco.
Clica em editar, digite alguma coisa e volte.
Você se tiver algum problema, note que não tem nada aqui, não apareceu nada, porque
quando você dá o pop do editar post, vai chamar aquele life cycle, aquela função
do life cycle, se você lembra?
O component will amount.
Então vamos voltar aqui para o editar, para o par de um editar post.
src-components-postedit.
Senote que a gente tinha esse negócio aqui.
Component will amount para recetar o form.
Certo?
A gente vai prestar a mesma coisa para ajeitar a corrente de aquele problema na cena de
novo post.
Aqui você vai para o novo post, digita alguma coisa, esqueceu, volta, ainda está lá, porque
o estado do Redux está mantido.
Essa função que a gente fez reset post form é um action creator.
Se você voltar para o actions, você ir ao actions.index, cadê o reset?
Se uma despachação chamada reset post form, que o post reducer retorna o initial state,
o novo estado com os valores dessa variável chamada initial state, que receta tudo.
Título e body ficam vazios e o title arrow e o body vão ser no.
Então a gente quer fazer isso.
Então para corretir o problema, vamos para a cena que tem o problema, o novo post.
Vai para o novo post.
E a gente vai definir o component will amount, certo?
Está aqui post new.
Eu acho que deveria pagar tudo, mas se você quiser deixar formular assim para quando voltar
para o novo, ainda está mantido, você pode fazer isso também, mas só para te ensinar
como corre de, se você achar isso, que isso foi um problema.
Então só adicionar a função de life sack no post new.
Component will amount, certo?
E dentro do component will amount, chama aquele action creator para reset o post form.
Como a gente está usando action creator, vamos injetá-lo no post new lá embaixo.
No map dispatch to props reset post form.
Opa.
E também vamos importá-lo lá em cima.
Importa aqui.
Reset post form, certo?
Vamos testar agora.
Eu acho que já está apagado, né?
Então está aí a direita aquele problema, certo?
Só adicionar a função life sack e chamar o reset post form para recertar o formular
e quando o novo post, após essa cena, foi removido, dá o pop.


0008-44 CRUD com o Redux & React Native

Validação dos Limites de Caracteres para Cada Campo Usando a maxLength do TextInput

# Resumo do Vídeo sobre Validação de Limite de Caracteres

## Introdução
- O vídeo aborda a validação do limite de caracteres para os campos de título e conteúdo.

## Métodos de Validação
1. **Permitir entrada livre**: O usuário pode digitar quantos caracteres quiser, com uma mensagem informando o limite após a digitação.
2. **Impedir entrada excessiva**: O usuário não pode digitar além do limite definido, o que é mais intuitivo.

## Implementação
- A validação escolhida é a segunda, utilizando a propriedade `MaxLength` do componente `TextInput` no React Native.
- Esta propriedade limita o número máximo de caracteres que podem ser inseridos.

## Passos para a Validação
1. Habilitar o **Hot Reloading** para não reiniciar o aplicativo toda vez que mudanças no código forem feitas.
2. Adicionar a propriedade `MaxLength` aos componentes `TextInput` do título e do conteúdo:
   - Título: limite de 40 caracteres.
   - Conteúdo: limite de 512 caracteres.

## Teste da Implementação
- O apresentador testa a validação configurando o limite inicialmente em 3 caracteres, confirmando que não era possível digitar além desse limite.
- A configuração é então ajustada para 40 e 512 caracteres para os respectivos campos.

## Conclusão
- O uso da propriedade `MaxLength` é uma solução conveniente e eficiente para controlar a entrada de dados.
- O vídeo encerra com uma expectativa de que o público tenha gostado do conteúdo apresentado.

--- 

Espero que este resumo tenha sido útil!

Olá a todos!
Este vídeo vai ser sobre a validação do limite de caracteres para cada campo de
texto do título e do conteúdo.
Então, há duas maneiras de fazer essa validação aqui nesse formulário aqui.
A primeira seria se primeiro deixar o usuário digitar quantos caracteres ele quiser.
Então mesmo, por exemplo, o título, se o título tivesse o limite de três caracteres,
por exemplo, aí o usuário digitar, se o usuário digitar uns mais de três, cinco, dez, você
poderia deixar o usuário digitar e só mostrar a mensagem, Ei, você não pode digitar mais
de três caracteres.
E tem também outra maneira de validar que é a maneira de impedir o usuário de digitar
mais de três, automaticamente impedi-lo de fazer.
E essa que eu vou usar nesse caso, que eu acho muito mais fácil de fazer e mais conveniente,
que o usuário já vai entender que não pode digitar mais de três caracteres, porque
não vai aparecer na tela, ele vai ficar digitando, mas nada vai acontecer, não vai
adicionar mais caracteres, certo?
Então nós vamos fazer a validação da maneira, da segunda maneira e para fazer isso vai
ser bem fácil, nós vamos usar uma propriedade do TextImport chamada MaxLength, se você
for a documentação do React Native, eu estou usando versão 36, por isso que eu estou escolhendo
documentação 36, mas funciona nas versões novas também.
Indo aqui para a documentação do TextImport, do componente TextImport, você vai usar,
nós vamos usar a MaxLength, aqui é a explicação, limita o número máximo de caracteres que
pode ser entrado, digitado, certo?
E eles até recomendo usar esse, em vez de fazer, de escrever a lógica, usando JavaScript
para prevenir esse negócio de Flickr.
Então a gente vai aplicar essa propriedade, vai definir a propriedade do TextImport com
o número de caracteres para ser o limite daquele campo, certo?
Eu acho que eu falo aí nos vídeos anteriores que a gente iria adicionar uma propriedade,
um condicional à função ValidateField, mas nós não vamos fazer isso, em vez de mudar
o ValidateField que tinha lá no PostNew, eu não vou mudar esse cara, eu vou em PostForm,
componente PostForm, que é esse aqui, que está sendo usado pelo PostNew, e pelo PostEdit,
certo?
Eu estou na página no Post, e vou adicionar a propriedade a esse TextImport e o outro
TextImport para o conteúdo, certo?
Antes de começar, eu só vou habilitar aqui o chamado Hot Reloading, que eu não quero
reiniciar o aplicativo toda vez que eu fazer uma mudança, certo?
Ele já tem esse chamado Live Reload, quando você tem o Live Reload habilitado, qualquer
mudança no código causa o aplicativo a reiniciar automaticamente.
Agora com Hot Reloading, qualquer mudança no código, ele vai reiniciar o aplicativo
mais com o mesmo estado anterior, por exemplo, aqui eu estou na página de novo Post, mas
quando dá o Live Reload, ele reinicia tudo e volta para o começo, dessa maneira.
Mas se usar o Hot Reload, ele vai manter esse estado aqui e vai saber voltar para onde
é que eu estava anteriormente.
Então, só para demonstrar, ele vai habilitar Hot Reloading.
Agora eu estou novo e vou fazer uma mudança aqui.
Salvei o arquivo, senão te apareceu Hot Reloading no topo e nem reiniciou.
Hot Reloading está no mesmo estado, vou digitar uma coisa, mudar de novo, Hot Reloading está
no mesmo estado.
Agora deixa de desabilitar aqui.
Desabilitar Hot Reloading, vou digitar alguma coisa e vou mudar o arquivo para ver.
Agora tem Live Reloading, certo?
Salva, você acha que o Live Reloading reiniciou tudo e volta para a cena principal.
Então vou voltar e habilitar o Hot Reloading.
O Hot Reloading mantém o estado.
Estou aqui no formulário novo post, vamos começar a validação.
É bem fácil, adicione a propriedade MaxLength com o número de carteres para ser o limite.
Nesse caso, eu tinha falado antes que o limite seria, eu tinha escolhido o limite de 40
carteres para o título e 512 para o conteúdo.
Então eu salvei aqui o arquivo e automaticamente o Hot Reloading aplicou as mudanças.
Então vamos tentar digitar mais de 40.
Na verdade eu quero demonstrar antes de 40 que isso está funcionando, vou botar só 3,
desculpa, vamos botar só 3 aí para ver se realmente essa propriedade está funcionando.
Salvei, deu o Hot Reloading.
Eu estou digitando e não vai mais de 3, certo?
Pode digitar quanto quiser que não vai.
Então eu ouvi eu digitando aqui, não vai.
Então está funcionando.
Ele impede o usuário digitar mais de 3 carteres para propriedade MaxLength.
Certo?
Então vou voltar para 40 que é o que eu queria, que eu escolhi.
E eu quero que você faça a mesma coisa para o conteúdo.
Eu vou escolher 512, limite de 512 carteres.
Se você tiver escolhido outro, está legal também, mas quero ver você fazer pro si próprio.
E aí, deu certo?
Então vamos lá, esse é o texto ímper do conteúdo, vamos adicionar MaxLength para meu caso 512.
Certo?
Mas antes disso para ver se está funcionando realmente, vou botar 3 carteres, salvar.
Ele deu o Hot Reloading, as mudanças já foram salvadas.
Estou digitando aqui, mas não consigo digitar mais de 3 carteres, então está tudo ok.
Vou voltar esse cara para 512.
Certo?
E por isso é a validação do limite de carteres.
Usando essa propriedade bem conveniente chamada MaxLength do TextInput.
Com isso essa propriedade impede o usuário de digitar mais do que os números de carteres que foram definidos aqui.
Certo?
Então espero que tenha gostado desse vídeo e até a próxima.


0008-45 CRUD com o Redux & React Native

Adicionamos Uma Mensagem de Erro Debaixo do Campo de Título

```markdown
# Resumo do Vídeo sobre Validação de Campos

Olá a todos! Neste vídeo, o foco é adicionar mensagens de erro abaixo de cada campo de texto em um formulário, indicando erros de validação. O principal erro tratado é o erro de requerimento.

## Principais Pontos Abordados

- **Erro de Requerimento**: Caso o usuário insira alguma informação e depois a delete, o campo ficará vermelho. Será adicionada uma mensagem abaixo do campo notificando que ele não pode ficar vazio.
  
- **Limite de Caracteres**: Para o limite de caracteres, não haverá mensagem, pois o sistema já implementa a propriedade `max length`, que limita a entrada a 40 caracteres.

- **Gerenciamento de Estados com Redux**: O vídeo menciona a integração com o Redux, onde foi definida a função `validateField` para gerenciar erros. O estado da aplicação possui propriedades para armazenar erros como `titleError` e `barError`.

- **Renderização das Mensagens de Erro**: O componente `PostForm` deve ser conectado ao Redux para acessar os erros. O componente pai `PostNew` é quem está conectado e passa as propriedades para o `PostForm`, permitindo que as mensagens de erro sejam exibidas.

- **Uso do Ternário**: Foi sugerido o uso do operador ternário na renderização para evitar a exibição de um componente vazio quando não há erro, evitando espaços indesejados no layout.

## Conclusão

O vídeo aborda a implementação de validações em um formulário, lidando especialmente com a exibição de mensagens de erro no caso de campos obrigatórios e discutindo boas práticas de gerenciamento de estados com Redux.
```


Olá a todos!
Tudo bem?
Este vídeo vai ser sobre...
Nós vamos adicionar uma mensagem de erro debaixo de cada campo de texto indicando o erro de validação.
Nosso caso só tem o erro de requerimento, certo?
Se o usuário digitar alguma coisa e deletar tudo.
Por exemplo, eu vou digitar alguma coisa, aí eu deleto tudo.
Isso já é norte que já fica vermelho, mas também que nós vamos adicionar a mensagem debaixo desse...
Deixa o caixa de texto dizendo que o campo não pode ficar em branco, está em branco.
Na mesma maneira, para o conteúdo.
Agora para a mensagem da limite e caracteres não vai ter nenhuma mensagem porque o usuário já sabe que não pode digitar mais...
Ele não pode digitar mais de 40 porque a gente usou a propriedade max length no vídeo anterior.
Então só vai ter a mensagem dizendo que a propriedade é requerida.
Para fazer isso, a gente tem que lembrar do nosso estado do aplicativo, a nossa store do Redux.
Lembra que a gente definiu aquela validate field? Vamos aqui no PostNew, componente PostNew.
A gente definiu a validate field aqui que seta o erro no estado do Redux.
Change post error com a descrição do erro.
Então lá no Reduxer, o PostFormRedux, tem esses propriedades chamadas TaroError e Barrier,
que vão conter as descrições de cada erro ou contém não se não tiver nenhum erro.
Então a gente pode usar esse cara aqui para mostrar o erro, a descrição do erro aqui.
Então vamos lá, vamos aqui para o PostNew, estou no Post.
Aqui debaixo dessa caixa de texto para o título, que na verdade está dentro do PostForm,
então a gente tem que ir para o PostForm, então vamos lá para o PostForm.
A gente pode sonar aqui um texto embaixo desse cara que vai ser a descrição do erro.
Mas onde é que está esse erro? Está no estado do Redux, como é que a gente pega aquela propriedade
e injeta no componente? É através daquela função chamada MapStateToProps, certo?
Mas esse componente aqui, PostForm, não está conectado a Redux, mas quem é que está conectado a Redux?
É o componente que contém o PostForm, nesse caso o componente PostNew, certo?
O PostNew, se você ir lá embaixo, está conectado a Redux e tem o MapStateToProps aqui,
que já inclui o titleError e barError que a gente fez antes.
Então a gente só precisa passar esse cara como propriedade para o PostForm e o PostForm vai saber que tem um erro.
E a gente já fez isso, você note que o PostForm a gente já passou como propriedade, o titleError e o barError.
Então tudo que a gente precisa fazer é só chamar esse cara que está dentro da propriedade do PostForm.
PostForm aqui, voltando a PostForm, lá para debaixo do TextInput do título,
é só dizer this.props.taroError, certo?
Nesse caso, se tiver um erro, vai aparecer o erro aqui dentro da componente Text.
Eu dei o Hot Reloading, né?
Se note que eu salvei aqui e automaticamente dei um update aqui que eu estou usando o Hot Reloading,
que reinicia quando faz uma mudança no código,
reinicia o aplicativo com o mesmo estado anterior, por isso que não voltou à tela inicial.
Então apareceu aqui o título, não pode ser lá em branco, vamos digitar alguma coisa e já apareceu a mensagem, né?
Certo?
Agora eu acho que tem uma coisa que deixa eu remover esse negócio para ver o que acontece nesse espaço aqui.
É, uma coisa para você notar aqui é se você tem o Text,
componente Text, a gente usou Error e se tiver um erro, vai aparecer aqui, né?
Deixa eu salvar, salvar Hot Reloading, aparece aqui, mas se não tiver erro,
esse cara vira uma string em branco, né?
Ou no, nesse caso é no, né?
Esse cara é no, mas como tem no aqui, ainda vai ter o componente Text aparecendo,
por isso que tem esse espaço entre a Text input e o conteúdo.
Se note que a gente não tinha isso antes, se eu deletar esse texto aqui e salvar,
você o espaço foi embora.
Então se você quiser, não quiser ter esse espaço, você tem que fazer algo como, por exemplo,
algo assim para se tiver, como é Error, Error,
se tiver um erro, você põe o componente de Text com o Error,
dessa maneira, ou nada, uma string vazia, certo?
Eu estou usando o operador Ternário aqui, que é a mesma coisa que você fosse usando o condicional,
se isso é verdadeiro, você pode pôr esse cara aqui,
se esse cara for falso, você pode pôr uma string vazia.
Nesse caso, string vazia vai aparecer, cadê?
Error Text, must be wrapped in explicitly, Text component.
O que que aconteceu aqui?


0008-46 CRUD com o Redux & React Native

Adicionamos uma Mensagem de Erro Debaixo do Campo de Conteúdo

```markdown
# Resumo do Transcript

O instrutor discute como lidar com mensagens de erro em um aplicativo React Native, enfatizando as diferenças em relação ao React para Web. 

## Principais Pontos:

- **Tratamento de Erros:**
  - No React Native, todo texto deve estar dentro de um componente `<Text>`, ao contrário do que ocorre no React Web.
  - Se houver um erro no título (por exemplo, se o título for `null` ou `undefined`), deve-se exibir um `<Text>` com a descrição do erro. Caso contrário, nada será exibido.

- **Estratégias de Implementação:**
  - O instrutor sugere usar um ternário para decidir se o erro deve ser exibido. Se o espaço em branco for um problema, o ternário pode ser removido.
  - Uma abordagem alternativa é criar uma função de auxílio (`helper`) que utilize uma declaração `if` para retornar os erros, evitando código longo e melhorando a legibilidade.

- **Estilos:**
  - O instrutor menciona a adição de estilos para os componentes de erro, como definir a cor do texto como vermelho.

- **Adição de Erros:**
  - O conceito apresentado para o `title error` deve ser igualmente aplicado ao `body error`, implementando um componente de texto para a mensagem de erro do corpo.

- **Refatoração:**
  - O instrutor encoraja a refatoração do código para melhor organização, como a criação de um arquivo de estilos e a utilização de helpers para diminuir a complexidade e o tamanho do código.

- **Encerramento:**
  - O vídeo termina com agradecimentos e um convite para que os espectadores pratiquem as atividades sugeridas.

**Objetivo Geral:** Ensinar como adicionar mensagens de erro abaixo de cada campo de texto em um formulário no React Native.
```

Ah, desculpa, que isso é permitido no React para Web, mas não é permitido no React Native
porque todo string test tem que estar dentro de uma text, component text, por isso que está dando eu
então em vez de string vazia vou pôr no, certo?
Então pôr no aqui, a ser nada
Então se tiver algum erro de título, se esse cara não for no ou indefinido, ele vai pôr um componente de texto com o erro, a descrição do erro
Se isso não for definido, tiver no, não vai pôr nada na tela, com isso a gente tem aquele problema do espaço aparecer ali
mas se você gostar do espaço, só não precisa ter esse ternário aqui
Você pode também refatorizar esse negócio e em vez de usar o ternário aqui você pode fazer uma função de ajuda
Aqui antes do render pode chamar rendereroncq que faz um if statement
Se isso aqui for verdade, verdadeiro você retorna a esse, certo?
Depende de você, eu vou deixar como exercício para você fazer e chama esse helper aqui desse cara aqui dessa maneira
em vez de ter tudo assim, chama esses para você fazer se quiser
Então eu vou voltar para o ternário, o kit antes e deixar assim mesmo
Agora apareceu aquele title error, se digitar alguma coisa
Você pode adicionar estilos para esse título, se quiser
Style aqui
Color red
Algo assim
Não acho que esse negócio já está meio long, então é melhor fazer aquele função de ajuda
Certo, deixa eu dar um soft wrap aqui
Agora vamos adicionar a mesma coisa para o conteúdo
Vamos lá, a gente recebe como propriedade do post new
Esse body error, então da mesma maneira que a gente fez o title error
Eu quero que você faça também o body error, então vai aqui
De baixo desse cara e da mesma maneira adicione a mensagem de erro do conteúdo
Vou esperar você fazer antes de continuar
E aí, está tudo certo?
Então vamos lá, vamos adicionar o texto, componente text, com o des, ponto props, ponto
Body error
Certo?
Vamos ver se funciona, apareceu
Vou adicionar um estilo
Color red
Agora o vermelho
Vou fazer aquele mesmo esquema do props body error
O pera do ternário retorna o texto, se tiver o erro definido, senão só retorna no
Certo?
Certo?
Já espero que tenham gostado, eu acho que tem
Muita coisa que você pode refatorizar aqui, eu deixei tudo explícito
E usando o operador do ternário, e fica meio longo
Mas você pode quebrar a linha ou fazer aquele esquema do rendererror
Certo? Vou deixar com meus exercícios
E também pode fazer um folho de estilos e essas coisas
Mas aqui meu foco é a funcionalidade e
Espero que você tenha aprendido como adicionar esse mensagem de erro
De baixo de cada campo de texto
Certo? Obrigado por assistir e até o próximo vídeo


0008-47 CRUD com o Redux & React Native

Começamos a Implementação para Bloquear o Botão OK se Houver Erros no Formulário

# Resumo do Vídeo

No vídeo anterior, foram abordadas validações de erro para campos de texto, como garantir que o título não esteja em branco e que o conteúdo possua texto. No entanto, um problema identificado foi que, ao clicar em "novo post", um post vazio estava sendo criado, o que não é desejável. 

## Pontos Chave

1. **Validação do Botão de OK**: 
   - O botão "OK" deve ser desabilitado se algum dos campos de entrada não for válido.
   - Para implementar isso, é utilizado o componente `TouchableOpacity`, que possui uma propriedade chamada `disabled`. Quando essa propriedade é definida como `true`, todas as interações com o botão são desabilitadas.

2. **Implementação da Lógica**:
   - O estado da aplicação deve ser monitorado para determinar se os erros estão presentes.
   - Se `titleError` ou `bodyError` estiverem definidos, o botão deve ser desabilitado.
   - Utilizando uma abordagem boolean para checar esses erros, pode-se usar o operador de negação duas vezes (`!!`) para forçar um valor booleano.

3. **Testes e Ajustes**:
   - O autor faz testes no navegador para verificar se a lógica de habilitação/desabilitação do botão está funcionando corretamente.
   - Existe uma ênfase na aplicação da lógica dentro do componente pai e como ele alimenta o componente do post novo com os estados relevantes.

O vídeo mostra o progresso no desenvolvimento, destacando a importância da validação e controle de estado na criação de um formulário de post.

no vídeo anterior nós fizemos a validação, mostrando o mensagem de erro aqui para cada
campo de texto, esse caso de título não pode estar em branco e o conteúdo tem que ter
alguma coisa assim por diante, mas tem também outra coisa aqui que a gente ainda não fez
foi, é o negócio do botão de ok, você note que se eu clicar no novo post e clicar
no novo post, ele cria um novo post que é vazio, a gente não quer que isso aconteça,
entendeu?
Não, porque é a realzir isso, que acontece.
Vamos aqui, a gente vê o post aqui, está vazio, fazer de novo, novo post, clicar ok,
e pareceu que o cara aqui é vazio, eu cliquei no cara vazio, então vamos lá, o que a gente
vai fazer?
A gente tem que desabilitar o ok se qualquer um desses campos estiver inválido, certo?
Agora o botão é enderezado usando a totable opacity, um componente chamado totable opacity,
que quando você clica e segura, aparece esse negócio, eu estou clicando e segurando
o botão, esse que o totable opacity faz visualmente.
Agora esse cara, se você olhar na documentação, eu estou aqui na documentação do yaknere,
versão 36.36 totable opacity, certo?
Ele pega as propriedades do totable without feedback, eu vou clicar lá, e as propriedades
de um dos delas é disabled, essa que a gente quer, para desabilitar o botão, então se
esse propriedade for dada com o valor true, vai desabilitar o botão, desabilita todas
as interações com esse componente.
Então vamos tentar lá, vamos ver.
Então só para testar, estou no totable opacity, do ok, eu vou adicionar disabled, certo?
True.
Vou salvar, eu tenho hot reloading, então ele já dá uma atualizada, e mantém o membro
estado, volta para o mesmo par.
Senorte eu estou clicando aqui, e nada acontece, eu estou clicando no botão ok, e nada acontece,
porque está desabilitado, certo?
Se eu tirar esse cara e botar false, ou tirar a propriedade, senorte já funciona de novo.
Certo?
Vou voltar para true.
Só um talk aqui, se você não souber desse negócio, se você tiver uma propriedade que
é boolean, é verdade ou false, você não precisa fazer explicitamente true, você
pode deixar assim, em please, o valor implícito do disable vai ser true, certo?
É a mesma coisa desses caras aqui, só para você saber, então vou salvar, só para
demonstrar, nada acontece quando eu clico.
Porque esse cara em please, o valor em please disable já é true, certo?
Eu gosto de fazer assim, deixar assim.
Mas a gente tem que definir esse valor para ser desabilitado somente quando tiver um
erro.
Então como a gente vai fazer isso?
Então a gente sabe que vai ter erro se tiver o quê?
Vai ter erro se o title error e se o body error, qualquer um dos dois, estiver definido,
né?
Esses caras aqui, title error e body error, são dados com propriedade ao post porn pelo
pai, componente pai, nesse caso a gente está lidando com um novo post, então é post new,
componente e esses caras vêm da onde?
Vêm do estado do aplicativo que nesse caso foi injetado no componente post new via a
função map state to props.
Apeou o sub reducer do post porn, chamado post porn, né?
Agora vamos aqui voltando a post porn, então a gente quer desabilitar o botão se o quê?
Se esse ponto props ponto title error for definido ou se esse ponto props ponto body error for
definido?
Se qualquer um dos dois for definido, a gente quer que esse cara seja true, né?
Note que o valor desse variável aqui vai ser dois.
Tem dois casos.
O primeiro é se não tiver erro vai ser no, se tiver erro vai ser uma string, certo?
Mas no JavaScript a string, se não for vazia, tem valor verdadeiro, certo?
Então esse cara vai se tornar verdade, embora que seja uma string.
Mas se você quiser realmente forçar esse cara a se tornar valor Boolean de true, você
pode usar essa técnica aqui dos dois exclamações, certo?
Para demonstrar isso eu vou aqui no navegador, eu vou abrir meu console, certo?
Então se eu tiver assim erro aconteceu uma string, né?
Deixe aumentar aqui.
Esse aqui, se você estiver dentro do if ou no dentro de qualquer negócio, eu vou estar
assim.
Se for verdadeiro esse cara, se isso for verdadeiro vai dar console log sim.
Não deu console log sim, porque esse cara é uma string e foi verdadeiro, né?
Mas se você forçar esse cara para ser uma Boolean, essa fazia assim.
Se torna true.
Por quê?
Porque ele pega uma string, quando você dá o operador de negar, esse cara que tem
valor verdadeiro, a gente chama true, em inglês, true, contrário, é false.
Então vai se tornar false, se estiver só um e põe mais outro para forçar a ser true,
certo?
E por isso é só, vamos voltar o nosso aplicativo.
Se você quiser forçar, pode põe esse cara, mas vai funcionar do mesmo jeito.
Certo?
Voltando aqui para o simulador.
Vamos ver se funcionou aqui.
Opa, desculpa.
Novo.
Opa, o que está acontecendo?
Não está funcionando?


0008-48 CRUD com o Redux & React Native

Movemos o Métodos de onChange e validateField para Dentro do Componente PostForm

# Resumo do Transcript

O problema abordado é a validação de um formulário de postagem. O transcript discute como os campos de um formulário podem inicialmente ser considerados válidos, mas se tornam inválidos quando o usuário interage com o formulário e limpa todos os campos. Isso impede que o botão de envio seja clicado.

## Principais Pontos

1. **Validação de Campos**:
   - A validação do formulário deve ocorrer após o usuário interagir com ele.
   - É necessário validar todos os campos antes de determinar se o botão deve ser habilitado ou não.

2. **Reutilização de Funções**:
   - A função `validateField` e os manipuladores de mudança (`onTitleChange`, `onBodyChange`) devem ser movidos do componente `postNew` para o `postForm`.
   - Essa mudança permite que tanto o `postNew` quanto o `postEdit` utilizem a mesma lógica de validação, evitando a duplicação de código.

3. **Transferência de Propriedades**:
   - As funções que definem a validação devem ser passadas como propriedades do `postNew` para o `postForm`.
   - O `changePositario` deve ser injetado corretamente como uma prop no `postForm`.

4. **Ajustes Finais**:
   - Após mover os handlers de mudança e as validações para o `postForm`, foi necessário ajustar as chamadas apropriadas para garantir que o formulário funcione corretamente.

## Conclusão

O processo de refatoração foi realizado com sucesso, e a lógica de validação está agora centralizada no componente `postForm`, pronto para ser utilizado também no `postEdit`. O próximo passo será replicar os mesmos ajustes no componente de edição de postagens.

O problema aqui é que os campos estão na verdade válidos porque o title error e o
body error têm valores não.
Na verdade a gente só dá a validação depois que o usuário interage com o formulário
pela primeira vez.
Nesse caso eu digito alguma coisa e depois delito tudo.
Agora está inválido e agora não dá para clicar.
Eu tento clicar mas não dá.
Nós no começo inicialmente está válido.
Então a gente tem que agitar isso.
Então não podemos usar esses carros diretamente.
Temos que fazer o que?
Temos que validar o formulário completamente antes e depois de validar tudo de novo tudo
aí que vamos saber se devemos desabilitar ou não.
Mas cadê aquela função de validar cada field, cada campo?
Não está aqui no postform.
Está no componente que é pai do postform.
Nesse caso postnew.
Dentro do postnew se lembra que a gente definiu validate field e todos esses on body change
e on title change não sei o que.
Então a gente vai precisar usar essa função aqui.
Uma opção é passar essa função como prop para o postform aqui em baixo.
É uma das opções.
Nesse caso já já nós temos muita prop aqui.
Na verdade esse cara vai requer ir a rapatorização depois que ele já tem muita coisa.
Eu não quero ir nessa rota.
Eu quero ir em outra rota.
Então você note que esse validate field, on body change, on title change vai ser o
mesmo para o post edit.
Se lembra a gente tem também a página de editar um post.
Voltando aqui, clique em postexistente e clique em editar.
Ops.
A gente deu erro porque a gente modificou o postform enquanto a gente estava usando o
postnew.
Vamos para o postform.
Você note que o post edit vai ter o mesmo on title change, o mesmo on body change junto
com esse validate field.
Então o que eu vou fazer?
Eu vou pegar esses caras todos eles e vou por dentro do postform.
Vou recortar do postnew e por dentro do postform.
De essa maneira o post edit e o postnew não irão precisar das definições, as mesmas
definições para o mesmo formulário.
Voltando a post edit aqui, a gente tem um ontar on body change, sem validação a gente
iria adicionar validação da mesma maneira que o postnew mas iria digitar a mesma coisa.
Então eu vou pegar esses caras e vou por dentro do postform.
Vamos passar a passo.
Vamos começar lá.
Vamos aqui no postnew.
O que eu vou fazer?
Primeiro vou pegar esse ontar on change, e o on body change e o validate field.
Vou recortar esses aqui.
Do postnew vou para o postform, componente postform e vou colar aqui dentro do componente.
Acima da função render tem um ontar on body change e o validate field.
Tá certo?
Agora vamos.
Então olha daqui como modificar esses caras todos.
A gente recortou algo e pôs aqui, mas vamos ver esse cara aqui.
Ele chama o validate field que já tá definindo aqui e chama o des.propos.change.positario.
Esse cara aqui a gente tem que passar como propos para o postform se não não vai achar.
Certo?
Então eu vou voltar aqui para o postnew e para o postform aqui eu vou passar essa prop chamada
changePositario.
Desculpa.
ChangePositario que vai ser desse ponto props.changePositario nesse caso aqui.
Então o que a gente tá fazendo?
Esse des.propos.changePositario do postnew é o action creator injetado no map dispatch
to props.
Certo?
ChangePositario.
A gente tá passando esse cara, é injetado como props no postnew e do postnew a gente passa
ele ao postform para o postform lá dentro poder usar aqui nessa ontária o change.
Certo?
Procedendo agora para o próximo body change.
Vamos só confirmar que a gente tem definido o validate field aqui e esse cara aqui tem
que ser passado como props também.
ChangePositario.
Voltando ao postnew.
A gente tem que passar aqui.
ChangePositario vai ser o que?
O des.propos no changePositario que foi injetado como props ao postnew.
Certo?
Salvar.
Então esse cara tá tudo ok.
Agora validate field, vamos ver.
Validate field não sei o que, tá usando essa função changePosterior.
Então a gente tem que passar isso também.
Vamos voltar aqui no postnew.
Passa o changePosterior.
Des.propos no changePosterior.
Esse changePosterior é injetado como props no postnew.
A gente tá usando e passa como props pro postform.
Agora vai tá definido aqui sem nenhum problema.
Certo?
Salvar.
Agora como a gente definiu um body change, you want a title change dentro do componente
postform, nós temos que ir lá embaixo e mudar as declarações que a gente fez pro on change
text de cada caixa de texto.
Nesse caso esse é o on change text pro título.
Esse cara aqui que vai ter uns exos a gente vai consertar já.
Então esse on change text tá chamando o des.propos, mas não é mais des.propos, que a gente vai
remover, a gente vai usar o on title change não das propriedades, dados, mas do próprio
componente postform que vai tá definido aqui acima.
Esse cara aqui, esse aqui, esses são métodos do componente postform.
Por isso não precisamos desse cara, a gente quer usar o do componente, então é des.ontariochange.
Da mesma maneira pro on body change que des.on body change.
Certo?
Salvei.
Agora volta no postnew, não precisamos passar esse on title change body change porque a gente
removeu.
Vamos deletar.
Certo?
Agora.
Voltando aqui em cima.
Vou limpar as coisas.
Então os on change handlers foram passados, agora estão definidos no postform.
E a gente modificou o postnew pra poder funcionar daquele jeito.
Só ver que isso não deu problema, eu tô dando o post.
Tá tudo funcionando direitinho ainda, certo?
Então no próximo vídeo nós vamos fazer a mesma coisa, through post edit.


0008-49 CRUD com o Redux & React Native

Modificamos o PostEdit para Também Conter Validações

**Resumo do Vídeo: Refatoração do Post Edit**

Neste vídeo, o foco é refatorar o componente `post edit` da mesma forma que foi realizado no `post new`. A abordagem inclui a remoção de manipuladores de eventos específicos, como `onTitleChange` e `onBodyChange`, que foram transferidos para o `post form` para permitir a reutilização.

### Passos da Refatoração:

1. **Remover Manipuladores Desnecessários**:
   - Os métodos `onTitleChange` e `onBodyChange` no `post edit` são removidos, já que agora estão definidos no `post form`.

2. **Passar Props Necessárias**:
   - Funções como `changePostTitle` e `changePostBody` são injetadas como `props` no `post form` por meio da função `mapDispatchToProps`.

3. **Adicionar Validação**:
   - A validação do campo é configurada para `post edit`, semelhante ao que foi feito para `post new`, incluindo a injeção do `changePostError`.

4. **Erro de Título e Corpo**:
   - Os erros de título e corpo são passados para o componente `post form` no `post edit`. É necessário garantir que essas propriedades estejam definidas no `mapStateToProps`.

5. **Verificação e Teste**:
   - Após as alterações, foram realizados testes para assegurar que os erros aparecessem corretamente. 
   - O retorno à funcionalidade do botão "OK" também foi abordado, com ajustes para que o botão seja desativado apenas quando houver erros.

6. **Validação Final**:
   - A função `validateField` é utilizada dentro do componente `post form` para validar o título e o conteúdo, permitindo a desabilitação do botão com base nos erros de validação.

### Observações Finais:
- Após a implementação dessas mudanças, o funcionamento e a estrutura do `post edit` se alinham mais com as práticas de reutilização e validação implementadas. As validações e erros foram corretamente integrados e testados.

Neste vídeo nós vamos refatorizar o post edit.
A mesma maneira que a gente fez o post new, o que a gente tirou o onTidalChange, onBodyChange
e o validate field de dentro do post new e depois dentro do post form para a gente poder re-usar
a mesma coisa do post edit.
Se eu volto no post edit, e vou no post edit, a gente não vai precisar mais desse onTidalChange
e onBodyChange definidos no post edit porque já estão definidos no post form.
Então, eu vou remover como a gente removeu.
A gente vai voltar aqui e a gente tem que passar o quê?
Se não, eu te vou voltando aqui, deixa eu voltar, desculpa.
A gente usou o change post title e o change post body.
Então, a gente vai precisar passar esses caras para o post form.
Então, vamos lá.
Change post title, esse é o 10 ponto props.
Change post title porque foi injetado.
Vamos pro props usar no map dispatch to props lá embaixo.
Change post.
Change post to props and change.
Certo?
Estes dois e voltando aqui.
Salva.
Você note que a gente tinha definido o validate field, onBodyChange,
com a validação já quando estava fazendo post new.
A gente tem que fazer a mesma coisa para o post edit.
Eu vou ter que passar esse cara aqui, change post error também.
Certo?
Então, vou lá pro post edit injetar esse change post edit action creator
no map dispatch to props aqui.
Primeiro, a gente tem que importar lá em cima.
Então, vou importar o change post error.
Certo?
Vou voltar aqui.
Vou colocar as ações, actions, vou lá embaixo,
injeta no map dispatch to props.
E agora vai estar disponível dentro do componente
e por isso eu vou passar como propriedade.
Essa é a maneira pro post form.
E vai automaticamente para lidar tudo porque já está definido lá no post form.
Vamos ver aqui se funcionou novo.
Tá ok, vamos lá pro edit.
Editar.
Tudo está tudo.
A gente não passou os erros, por isso não apareceu nenhum erro.
O senor de que no post new a gente tinha esse title error, body error passados
pro post form.
A gente tem que passar isso também.
Propost edit.
Então aqui eu vou adicionar pro post form title error.
Error.
Body error.
Mas esses caras não estão definidos ainda, eu acho.
Não são injetados como props, vamos lá embaixo no map state props.
Temos que adicionar pro title error.
Vem da onde?
State.postform.taroerror.
E o body error que essa propriedade aqui
está disponível como desprop props.body error dentro do componente post edit.
E vai vir da onde? Vai vir do state.postform.body error.
Certo?
Salvar. Vamos ver, tentadamente deu hot reload.
Deixa eu ver. Um title error.
Ainda não foi.
Ah, esse cara aqui não precisa, a gente já está definido lá dentro.
Vou tirar.
Vamos ver aqui.
A gente passou o title, o body, title error, body error.
Será que tem todos esses caras aqui?
Change post.taroerror. Já está aqui.
Está importado.
Vou lá no postform.
Vou ver se vai aparecer.
Vou reiniciar aqui para ver.
Editar.
Vamos ver.
Está aí. Apareceu.
Vou só precisar reiniciar tudo.
Certo?
Se eu não editar, apareceu já.
Vou ver se o botão OK que a gente estava fazendo não funciona agora,
mas ainda tem aquele problema de que a gente vai resolver já, já,
de ficar ativo, mas a gente não valida ainda.
Então, depois de fazer toda essa reflutarização,
finalmente podemos consertar esse botão de OK.
Agora que a gente está dentro do postform e tem acesso ao validate field,
a gente pode usar o validate field aqui para validar o título e o conteúdo
e só desabilitar o botão se não tiver nenhum erro depois de validar.
Vamos lá em baixo, no disabled,
eu vou tirar esses caras porque ele não valida inicialmente.
Então, vamos fazer o que?
Vamos validate field.
Essa função vem do próprio componente,
desse ponto validate field, com os argumentos.
Deixa eu voltar aqui em cima.
É a field que tem um valor e tem um nome.
Certo, voltando aqui, a gente vai validar field com o nome.
Primeiro do título, valor,
10.props.tiro.
