Nesta série de vídeos nós aprendemos a usar o Redux para lidar com os dados do nosso aplicativo.

Introdução ao Redux com o React Native

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

Tutorial Iniciante de Redux com React Native (Curso Prático Completo Grátis)

Aprenda Redux com React Native - Tutorial do Zero (Curso Gratis Completo para Iniciante)

# Resumo do Vídeo sobre Redux em React Native

Neste vídeo, o apresentador (NBK) introduz uma série sobre como utilizar Redux em um aplicativo React Native. 

## Principais Pontos

- **Histórico do React**: O React foi criado pelo Facebook juntamente com uma arquitetura de dados chamada Flux.
- **Flux vs Redux**: O Redux simplificou o Flux ao combinar várias stores em uma única store chamada `ApplicationState`.
- **Objetivo**: O objetivo do tutorial é construir um aplicativo simples, uma lista de posts, utilizando Redux em conjunto com React Native.
- **Funcionalidade do Aplicativo**:
  - A lista de posts exibirá títulos que, ao serem clicados, levarão o usuário a uma nova cena com o título e a descrição do post.
  - Um botão permitirá voltar para a cena anterior.
- **Fonte de Dados**: O apresentador usará a API JSONPlaceholder (jsonplaceholder.typicode.com) para fornecer dados de posts falsos em formato JSON.

O foco principal do tutorial será entender como implementar e usar Redux dentro do contexto do React Native.

Pala pessoal, NBK, tu tô falando.
Nesta série de vídeos, a gente vai aprender a usar o Redux na nossa aplicativa do React Native.
Então, quando o Facebook criou React há alguns anos atrás, eles criaram junto com a arquitetura de dados chamada Flux.
Então, a maneira que os dados fluem ou correm dentro dessa aplicativa React
é determinada pelo Flux originalmente, mas depois disso veio o Redux.
Em poucas palavras, o que o Redux fez foi pegar as várias stores,
chamadas stores do Flux, e combinar todas as stores em só uma store,
chamada ApplicationState.
Então, a gente vai dar uma olhada como fazer o Redux com o React Native,
e a gente vai começar do zero, vai olhar como é o Down Overview,
e ver como a gente vai usar, combinar o Redux com o React Native.
Então, vai ser um aplicativo muito simples, uma lista de posts que eu tenho aqui.
Eu vou ter essa lista de posts, e cada lista tem o título do post,
e quando você clicar no título do post, por exemplo, quando eu clicar em desse aqui, com ciência política,
vai para outra cena, e nessa outra cena a gente tem o mesmo título e alguma descrição do body do post.
E você pode clicar no botão para voltar para a cena anterior.
Vai ser muito simples, mas a razão disso é porque a gente vai focar no Redux
para aprender como é que a gente vai usar o Redux para fazer esse aplicativo.
Então, eu achei esse website aqui, chamado JSONPlaceholder.typecode.com,
que é um API para fornecer dados para o nosso aplicativo aqui, API de dados falsos, fake data.
E eu só vou usar esse post aqui, tá bom?
Então, JSONPlaceholder.typecode.com, e eu vou usar esse post aqui.
Então, ele já me deu os dados em formato JSON.
Então, você nota que cada post, cada dado tem um título, title, e tem também o body, esses negócios aqui.
Então, a gente só vai usar esses aqui.
Tá bom?


0004-01 Aprenda Redux com React Native - Tutorial do Zero (Curso Gratis Completo para Iniciante)

Explicação Geral dos Conceitos do Redux: Action Creator, Action, Reducer, Application State

# Resumo do Vídeo sobre Redux em React Native

Neste vídeo, o apresentador discute a utilização do Redux na versão 0.36 do React Native, usando o exemplo de um aplicativo que gerencia uma lista de posts. 

## Estrutura do Redux

1. **Action Creators**: 
   - Funções que retornam uma Action.
   - Exemplo: ao montar o componente da lista de posts, é chamada uma Action Creator.

2. **Actions**: 
   - Objetos que têm uma propriedade chamada `type`.
   - Um exemplo de Action para a lista de posts poderia ser `FETCH_POSTS`.

3. **Reducers**: 
   - Funções que retornam partes do Application State (ou Redux Store).
   - Usam um `switch` para verificar o tipo da Action recebida e retornar um novo estado, se aplicável.

4. **Application State**:
   - Representa o estado global da aplicação, diferente do estado local dos componentes.

## Funcionamento

- As Actions são despachadas para todos os Reducers, mas apenas os Reducers que se importam com a Action vão atualiza o estado.
- O novo estado é então refletido no aplicativo através da conexão das props do componente com o Application State do Redux.

## Implementação

- Uma Action normalmente é um objeto JavaScript com um `type` e, possivelmente, um `payload` contendo dados obtidos de uma API (por exemplo, uma lista de posts).
- Dentro do Action Creator, é realizado um pedido HTTP (GET) para obter dados e criar a Action.

### Exemplo de Código

```javascript
const FETCH_POSTS = 'FETCH_POSTS';

const fetchPosts = () => {
  return (dispatch) => {
    // faz pedido HTTP e obtém dados
    dispatch({
      type: FETCH_POSTS,
      payload: [/* lista de posts */]
    });
  };
};

const postsReducer = (state = [], action) => {
  switch (action.type) {
    case FETCH_POSTS:
      return action.payload;  // atualiza o estado com a lista de posts
    default:
      return state;  // retorna o estado atual se não houver mudança
  }
};
```

## Conclusão

O entendimento do Redux pode ser desafiador inicialmente, mas com prática e experimentação, fica mais claro como tudo funciona junto. No próximo vídeo, a criação do aplicativo e a escrita do código serão abordadas em detalhes.

Antes de começar, deixa eu só dizer que eu estou usando a versão 0.36 do React Native,
tá bom?
Esse vídeo vai ser baseado nessa versão.
Agora vamos dar uma olhada no...
O maneira que a gente vai usar o Redux, tá bom?
Então, a gente tem aqui o nosso aplicativo, né?
Nesse exemplo, a gente vai usar uma lista de posts, né?
Então, por exemplo, a lista de posts, quando a gente montar o componente da lista, a gente
vai chamar o que é chamado?
Vai chamar um Action Creator, tá bom?
Essa é uma função e essa função retorna uma Action, tá bom?
Essa Action vai ser despachada para todos os chamados Reducers, tá bom?
Então, Reducer é só uma função que retorna uma parte do Application State.
Então, não confunda o Application State com o estado do componente, que é totalmente
diferente.
O Application State é também chamado de Redux Store, tá bom?
Então, as Actions, a Action é despachada para todos os Reducers, mas só o Reducers
que se importam com essa Action que vão fazer alguma coisa.
Então, ele Reducer olha no tipo da Action e decide, ah, eu me porto com isso, senão,
deixa passar e nada acontece, mas se ele se importar com a Action, o tipo da Action,
ele vai retornar o novo State, tá bom?
O novo State para essa parte da aplicativa, do Application State.
Então, essa nova, novo State vai ser refletido no aplicativo porque a gente vai conectar
as props do componente com o Application State do Redux.
Vai ser sempre assim, a gente vai injetar o Action Creator no aplicativo como uma prop
e também o State, o Application State do Redux vai ser injetado no componente do aplicativo
via props, tá bom?
Então, normalmente essa Action aqui vai ser escrita dessa maneira, é só um objeto,
deixa eu ver aqui, deixa eu estar aqui, ah, não pode digitar, deixa eu abrir o Atomom
aqui para te mostrar como vai escrever uma Action.
Normalmente a Action, a gente é só um objeto que tem uma propriedade chamada Type, no nosso
exemplo, se for uma lista de posts, talvez a gente chama FEDPosts e é assim, normalmente,
só um objeto com o tipo da Ação.
Então, no Reducer, a gente vai fazer um switch, vai olhar no Action, tipo da Action, no...
E vai ver se for o caso do FEDPosts.
A gente faça alguma coisa, torne o novo Estado do aplicativo.
Eu traduzi isso do Application State, tá bom?
E é só um objeto, na verdade, com alguma coisa aqui.
Tá bom?
Então, a Action é só um objeto JavaScript que tem um tipo e esse tipo, normalmente, a gente usa
letras maiúsculas, como se fosse uma constante, que a gente vai definir depois e nas constantes
é só uma string, tá bom?
E dentro do Reducer, a gente vai dar um switch para o Action.Type e se for o caso desse aqui,
a gente vai retornar ao novo Estado, o Application State, com, talvez, a lista de posts,
que normalmente vai ser o Action.Payload, que a gente vai passar aqui quando a gente fizer
uma pedido HTTP, que vai retornar essa variável post.
Dentro do Action Creator, tá bom?
Dentro do Action Creator, faz o pedido HTTP, pedido GET, que retorna essa lista de posts, como se fosse um objeto
ou um array, e no final, a gente retorna a Action com o chip e a payload.
Payload, normalmente, se tiver dados para enviar que foram obtidos no back-end, você passa os dados pelo payload.
E aqui dentro do Reducer, dá um switch, se for esse caso, retorna o post, que vai ser o payload.
E esse post vai ser refletido num aplicativo, porque a gente vai conectar o componente com as props do componente
com o Estado, né?
Então, a gente vai acessar assim, thisProps.post, tá bom?
No começo, é um pouco difícil de entender Redux, mas você vai com o tempo, a gente começa a entender melhor
e quando a gente escreveu o código e vê como é que tudo se relaciona, você vai entender o que está acontecendo.
Tá bom?
Então, esse é o overview do Redux.
No próximo vídeo, a gente vai começar a criar o nosso aplicativo e escrever um código. Vamos lá!


0004-02 Explicação Geral dos Conceitos do Redux: Action Creator, Action, Reducer, Application State

Geração do Projeto com o Comando react-native init e Registro de um Componente Funcional

# Resumo do Tutorial sobre Criar um Aplicativo React Native

## Introdução
O vídeo aborda como criar um novo aplicativo React Native, especificamente nomeado "lista de posts redux". O apresentador utiliza o terminal para iniciar o projeto.

## Passos para Criar o Aplicativo
1. **Criação do Aplicativo:**
   - Utilize o comando:
     ```bash
     npx react-native init [nome-do-aplicativo]
     ```
   - Exemplo:
     ```bash
     npx react-native init lista-de-posts-redux
     ```

2. **Navegação para o Diretório:**
   - Acesse a pasta do projeto:
     ```bash
     cd lista-de-posts-redux
     ```

3. **Execução do Aplicativo:**
   - Para iOS:
     ```bash
     npx react-native run-ios
     ```
   - Para Android:
     ```bash
     npx react-native run-android
     ```
   - Nota: O apresentador menciona que usa o Android Studio para executar o aplicativo em alguns casos.

4. **Configuração de Ambiente:**
   - É importante ter o Android Studio configurado, incluindo o download do SDK e das ferramentas de construção.

5. **Estrutura do Código:**
   - O apresentador opta por eliminar todos os arquivos existentes e começar do zero, mantendo um código que funcionará para ambas as plataformas (iOS e Android).

## Desenvolvimento do Código
1. **Configuração de Componentes:**
   - O arquivo `index.ios.js` é modificado para registrar o componente raiz utilizando `AppRegistry`.
   - Um novo diretório chamado `src` é criado, contendo um arquivo `app.js` onde o componente funcional `App` é definido.

2. **Importação de Módulos:**
   - Importar `View` e `Text` do `react-native`, e configurar um componente básico que exibe um texto.

3. **Exibição do Componente:**
   - O componente renderiza um texto, e o estilo é aplicado para centralizá-lo na tela.

4. **Código para Ambos os Sistemas:**
   - O mesmo código é utilizado tanto para iOS quanto para Android, fazendo com que o desenvolvedor não precise modificar os arquivos em cada sistema operacional.

## Conclusão
O apresentador finaliza reafirmando que o projeto foi configurado corretamente, e o desenvolvimento futuro ocorrerá dentro da pasta `src`, permitindo que o aplicativo rode em ambas as plataformas.

Então, agora eu estou aqui de volta para o meu terminal e eu vou criar um novo aplicativo
do React Native usando o comando React Native.
Então você digite React Native, espaço init, espaço o nome do seu aplicativo.
No meu caso, escolhi lista de posts redux.
Aí, eu enter e espero até todos os arquivos serem gerados, tá bom?
Eu já fiz porque demorou um pouquinho.
Então, já tenho que, depois disso, eu já tenho a pasta aqui.
Você dá um CD para a pasta.
Está aqui os arquivos.
E agora, dependendo do sistema que você vai usar, você dá React Native, Run iOS.
Se for iOS, se for Android, usa Run Android.
Eu espero que você já tenha configurado o React Native para sua plataforma, seja o iOS,
seja o Android, tá bom?
No meu caso, eu vou usar iOS.
Eu também tenho configurado o Android.
Normalmente, para mim, quando eu dou o Run Android, não funciona porque ele não acha
o meu emulador do dispositivo.
Então, eu gosto de abrir o Exco, o Android Studio, desculpa, e abrir o projeto no Android
Studio e rodar o aplicativo de lá, porque normalmente o comando não funciona para
mim.
Então, você pode fazer isso se tiver usar Android.
Se você não souber ainda configurar, vai para a página do React Native, Facebook,
www.gethub.io, e clique aqui no Getting Started e selecione seu sistema e o seu dispositivo,
o sistema do dispositivo.
Se você quiser o Android, olha aqui, você tem que configurar o Android Studio e baixar
todos os SDKs e essas coisas.
Normalmente, no meu foi o 23, então eu tive que baixar o API 23 e o Build Tools, versão
23.0.1, tá bom?
E também exporta a variável do Environment Variable, do ambiente, Environment, no seu
Bash Profile ou BashRC, dependendo do seu sistema, e assim por diante.
Agora vamos continuar.
Eu já dei a rodada aqui no iOS e ele abre o meu simulador do Xcode e também o React
Native Packager, que é uma tela do terminal aqui, React Packager.
Está aqui o meu anulador, página gerada foi essa, tá bom?
E vou dar uma olhada aqui no código, deixa eu só abrir, dá um Atom aqui.
Eu uso o editor ARM, tá bom?
Você pode usar o editor de suas escolhas, mas eu gosto do ARM, recomendo também.
Aqui, já estava setup aqui, o Rio tinha fechado.
Então aqui tem os arquivos, então tem um do iOS e tem um do Android, tá bom?
O que a gente vai fazer primeiro?
A gente vai deletar tudo, vai começar do zero, tá bom?
Então, a maneira que a gente vai fazer o nosso aplicativo vai rodar nos dois sistemas,
vai rodar em iOS, vai rodar em Android e vai ser o mesmo código, tá bom?
Precisa mudar nada.
Então, eu vou apagar tudo do index Android, se você estiver fazendo index Android ou iOS,
mas nesse caso a gente vai fazer os dois, então delete tudo.
Eu vou começar do index.ios, mas a gente vai fazer um negócio aqui que a gente vai só
apiar para o outro arquivo, vai ser a mesma coisa para os dois, tá bom?
Então, primeiro a gente vai fazer um import, vai dar um import no app registry,
from viac.native.
Tá bom?
Esse app registry é para registrar a aplicação no ponto de entrada, tá bom?
E a gente vai dar app registry register component,
tem que dizer o nome do componente, tá bom?
E o componente aqui.
Nesse caso eu vou fazer um componente app e deixa eu fazer aqui uma pasta.
Vou fazer uma pasta chamada essa RC,
tapou todo o código lá, nesse SRC eu vou criar um arquivo chamado app.js.
Esse vai ser o ponto inicial do aplicativo.
Aqui a gente vai registrar o componente com o app que a gente vai criar aqui.
Então, vamos fazer só um componente funcional, não é de class,
então import react, from react, vai precisar do react, não precisa de component, tá bom?
O que eu vou fazer?
Eu vou criar um componente chamado app, vai ser um funcional de class,
e vai retornar o template.
Agora vamos pôr um view só.
Texto.
Como eu estou usando view e estou usando text do react native, eu tenho que importar.
Import view, text, from react native.
Tá bom?
Porque eu estou usando esse aqui no template.
E no final eu tenho que exportar default o app, porque eu vou precisar usar disponibilizar esse app para outros arquivos.
Tá bom?
Só recapitular aqui se você não entendeu o que eu fiz aqui.
Eu já discuti isso no vídeo anterior, isso que é um componente funcional chamado functional component no inglês.
E não usa class, porque eu não preciso, é só um template que vai retornar alguma coisa.
Normalmente você só faz uma função aqui,
função, argumento, normalmente é props, mas não precisa de argumento aqui agora.
E o nome do componente, e eu uso const, porque a gente está usando a versão es6 JavaScript, sempre, tá bom?
Sempre usando es6, não uso mais es5.
Nesse caso, tá bom?
E exporto aqui.
Vamos salvar, tá bom?
Vamos por o app aqui, vai ser o componente inicial.
E como eu não sei, ele não sabe que app ainda tem que importar, mas onde é que está isso?
É dentro do src, dentro dessa pasta src, é uma import app no diretório, presente, barra, src, barra app.
Então, vai importar esse cara aqui dentro desse cara.
E é o nome do componente, vou ver só o que eu tinha antes.
Deixa eu dar um control comendo z aqui.
Você note que eu tinha antes isso?
Teve esse nome inteiro aqui, eu vou copiar, que é isso que é o nome do componente inicial.
Lista de posts, redux, vou aumentar aqui.
Isso que eu tinha antes.
Tá bom?
Então, vamos ver o que vai acontecer quando der o refresh.
Tá aí, ooioioi está aqui, que não dá para ver, mas está lá.
Deixa eu só aplicar um estilo aqui, para você ver.
Vou dar um estilo para view.
O objeto aqui vai ser...
Flex, veja o que acontece.
Aí, flex, adjustify content.
Eu quero centralizar verticalmente, então vai ser esse.
Aí, só para demonstrar que está funcionando e está aparecendo ooioioi.
Tá bom?
Recapitulando.
No ponto de partida, arquivo, que é o ponto de partida.
A gente só importa o app registry do React Native, porque a gente precisa disso para registrar esse componente como ponto de partida para o nosso aplicativo.
É que tem o nome, que é na verdade o nome que eu criei a aplicação,
e passa uma função de flecha com o componente app, que está aqui, importado, e esse cara aqui,
que eu criei dentro da pasta src, e o componente funciona.
E só mostra ooioioi.
Tá bom? Agora, para a sua atenção, esse arquivo aqui já está feito,
não precisa mais mudar, copia o index e copia para o Android.
E salva.
Dessa maneira, vai funcionar nos dois sistemas sem precisar modificar os arquivos.
Vai usar o mesmo código, tanto para iOS como para Android.
Tá bom?
Agora, a gente vai começar a fazer todo o nosso código dentro dessa pasta src,
e vai rodar nos dois sistemas.


0004-03 Geração do Projeto com o Comando react-native init e Registro de um Componente Funcional

Escrita de um Componente de Lista no React Native e como Exportar e Importar

# Resumo do Transcript

O palestrante demonstra que a versão do Android da aplicação está funcionando, utilizando o Android Studio e um emulador. Ele menciona que a aplicação está similar tanto no Android quanto no iOS e que irá criar um novo componente para uma lista de posts.

## Estrutura da Aplicação
- O palestrante vai criar um diretório chamado `components` na pasta `src` para armazenar todos os componentes.
- Um novo arquivo chamado `list.js` será criado para o componente de lista.

## Definição do Componente
- O componente será uma **classe** porque irá manter o estado e se conectará ao Redux para acessar os dados da lista de posts.
- O **estado da aplicação** terá duas partes:
  1. `posts`: um array de objetos representando os posts.
  2. `selectedPost`: um objeto que representa o post selecionado.

## Criação do Componente de Classe
- O componente `List` estende `Component` e implementa a função `render`.
- O componente retorna um template simples de view com texto.
- O componente é finalmente exportado para ser utilizado em outros arquivos.

## Integração com o App
- O componente `List` é importado e adicionado ao `App.js`, substituindo um placeholder anterior.
- O funcionamento é verificado no emulador e tudo parece estar correto.

## Refatoração da Interface
- O palestrante sugere a refatoração da UI em partes maiores, criando um novo componente chamado `ListItem` para cada item da lista.
- O `ListItem` será um **componente funcional** que receberá os dados do post como props.
- O componente `ListItem` é então importado e utilizado dentro do componente `List`, demonstrando boas práticas de refatoração.

## Conclusão
- O projeto está progredindo, com componentes funcionais e de classe sendo corretamente implementados e integrados, seguindo técnicas recomendadas de desenvolvimento em React e Redux.

```markdown
# Resumo do Transcript

O palestrante demonstra que a versão do Android da aplicação está funcionando, utilizando o Android Studio e um emulador. Ele menciona que a aplicação está similar tanto no Android quanto no iOS e que irá criar um novo componente para uma lista de posts.

## Estrutura da Aplicação
- O palestrante vai criar um diretório chamado `components` na pasta `src` para armazenar todos os componentes.
- Um novo arquivo chamado `list.js` será criado para o componente de lista.

## Definição do Componente
- O componente será uma **classe** porque irá manter o estado e se conectará ao Redux para acessar os dados da lista de posts.
- O **estado da aplicação** terá duas partes:
  1. `posts`: um array de objetos representando os posts.
  2. `selectedPost`: um objeto que representa o post selecionado.

## Criação do Componente de Classe
- O componente `List` estende `Component` e implementa a função `render`.
- O componente retorna um template simples de view com texto.
- O componente é finalmente exportado para ser utilizado em outros arquivos.

## Integração com o App
- O componente `List` é importado e adicionado ao `App.js`, substituindo um placeholder anterior.
- O funcionamento é verificado no emulador e tudo parece estar correto.

## Refatoração da Interface
- O palestrante sugere a refatoração da UI em partes maiores, criando um novo componente chamado `ListItem` para cada item da lista.
- O `ListItem` será um **componente funcional** que receberá os dados do post como props.
- O componente `ListItem` é então importado e utilizado dentro do componente `List`, demonstrando boas práticas de refatoração.

## Conclusão
- O projeto está progredindo, com componentes funcionais e de classe sendo corretamente implementados e integrados, seguindo técnicas recomendadas de desenvolvimento em React e Redux.
```

Só para demonstrar que a versão do Android também está funcionando, eu abri aqui o meu Android Studio e rodei a aplicação no Android Emulator.
Está aqui, você nota que é a mesma coisa.
Tá bom?
Tem um iOS e tem um Android.
Agora vamos prosseguir e fazer outro componente.
Se a gente voltar aqui para o meu sketch aqui.
Então vamos fazer essa lista de posts aqui.
Vamos fazer esse componente para essa lista.
Tá bom?
Então vamos voltar aqui e vou no SRC, essa pasta SRC e vou criar uma nova pasta dentro dessa.
Vou usar um diretório chamado components que vou colocar todos os componentes nele.
Essa pasta aqui.
Vou criar um new file, vou chamar meu componente de list.
Tá bom?
Vou usar nomes em inglês, mas se você quiser pode usar nomes em português.
List.
E agora vou importar react do react.
Eu tenho que decidir se isso vai ser componente de classe ou componente funcional.
Componente de classe mantém o estado, o state, o componente.
E também você pode ter acesso aos métodos de lifecycle.
Então também tem que pensar sobre redux.
Porque se eu voltar aqui.
Aqui tem uma lista de posts.
E esse post aqui, esses dados vão estar amazenados no application state do redux.
Então eu vou precisar conectar essa lista com application state redux.
E normalmente nesses casos, eu tenho que fazer o componente de classe.
Tá bom?
Então, o application state que a gente vai fazer.
Vai ter o quê?
Vai ter a lista de posts.
Vai ter os posts.
Vamos fazer um array.
Vai ter essa array de posts.
Post 1, 2.
E cada post é um objeto.
Tá bom?
Show.
Aqui.
Então, uma das partes da application state que a gente vai ter é essa chamada post.
O chamado de post que vai ser um array.
Tá bom? Um array, um coletâneo de objetos.
E cada objeto é um post.
Da mesma maneira que tem no JSON placeholder aqui.
Que eu falei no começo da série de vídeo, desse vídeo, nessa série.
Então um array com vários objetos.
Bom?
E o outro peço do application state vai ser o post que foi selecionado.
E essa pra essa outra cena aqui.
Deixa eu dar um.
Eu posso chamar de selected post ou alguma coisa assim.
Eu vou chamar de selected post.
E esse aqui vai ser só um objeto com o tarot, glory e talvez outras coisas.
Vai ser somente um desses caras dentro da array, né?
Esse notch tem o post 1, post 2, assim por diante.
Então eu vou fazer só isso que a gente precisa dessa aplicativa.
Preciso dessas duas partes do application state.
Tem o post, coletâneo de posts, objetos.
E tem o selected post que é um objeto que é só um deles.
Então vai ser esses caras.
Então voltando pro react, a gente vai ter que fazer o componente de classe.
Porque a gente vai conectar o react component aqui com o redux, com esse post aqui.
Esses caras aqui vão ser conectados.
Esse vai ser conectado ao componente aqui.
E o selected post vai ser conectado ao outro, outra cena aqui.
Tá bom?
Vamos lá.
Então eu vou adicionar o component, botar um virgo.
E vou destruturar o component dentro do module react.
Tá bem.
E vamos fazer o class list.
Extends component sempre assim, né?
Vou definir a função render, que todo o componente de class tem a função render.
E vou retornar um template.
Agora vou retornar um view só com os text aqui.
Dessa maneira vou dar um... vou duplicar a linha, tá bom?
Como eu estou usando o átomo é command shift D, comando shift D.
Talvez seja o mesmo no sublime.
Só para ter alguma coisa.
E vamos ver o sal.
E também no final vou exportar a sport default list.
Para disponibilizar esse componente para os outros arquivos.
Ah, não se esqueça de importar a view e o text porque a gente usou.
Então import destrutura view e text do react native.
Certo?
Então tá tudo ok agora.
E vamos ver, vamos adicionar essa list para o app aqui e ver se está funcionando.
Vou voltar para o app.js.
Em vez de ter esses negócios de oi, eu vou pôr a list.
O componente list que a gente criou.
E não se esqueça de importá-lo porque a gente está usando aqui.
Vou dar um import list, from.
Está dentro de componentes do diretório presente.
Barra components, barra list.
Não precisa da extensão js.
Salva.
Vou ver aqui no meu simulador.
Dá um refresh.
Está aí.
Item, item, item, item.
Está funcionando.
Está bom?
Voltando aqui.
Então a gente tem os itens.
Outra coisa que eu quero fazer é...
Eu não falei disso, mas se você já está acostumado ao react, que eu...
A gente tem que...
Quebrar nossa UI.
Interface do usuário.
A gente chama UI em inglês.
Em partes maiores.
Então vai ter a list.
Esse cara vai ser a list.
E cada um dos itens vai ser uma list item.
Eu não sei desenhar. Desculpa.
Então cada um de eles vai ser um list item.
Então, você já deve saber isso.
Se você está assistindo esse vídeo, porque nos meus vídeos anteriores, eu já expliquei isso.
Tá bom?
Então vamos voltar aqui.
Vamos criar um outro componente.
List item. Vou chamar list item.
E nesse caso, eu acho que não precisa manter a estada.
Porque é só um componente que vai mostrar um pouco mais.
É só um componente que vai mostrar um template.
A gente vai talvez injetar os dados do post como uma props.
Então eu só vou fazer componente funcional.
Import react from react.
Sempre assim, né?
Eu não vou importar component, porque é componente funcional.
Vou dar um const aqui, fazer uma variável com o nome do componente.
E defino como uma função.
Normalmente, tem um props aqui. Vamos deixar o props, que vai ser props que serão injetadas nesse componente.
E dá um return do template.
Nesse caso, eu vou só recortar o template dos caras que a gente fez anteriormente.
Vou aqui. Eu vou tirar esse aqui.
Copiar.
Tá bom? Eu copiei essa linha do item item.
E vou por aqui.
E não se esqueça de importar text que a gente está usando do react native.
Import text de estruturar com esses curly braces from react native.
Tá bom?
E no final, dá um export default para retornar,
para disponibilizar esse cara como um componente para os outros arquivos.
Tá aí.
Esse item aqui, tá bom?
Vou voltar para list e vou usar esse list item que a gente criou.
Em vez desses caras aqui, eu vou dar um list item.
Tá bom?
E vou só... Podia fazer um loop, mas só para demonstrar, vou copiar, duplicar a linha.
E como a gente usou isso, temos que importar.
List item from...
A gente está no mesmo direitório, a gente está usando list,
mesmo direitório que list item, então não precisa do barra components.
List item, tá aí.
Salva ver o que acontece no simulador.
Tá tudo funcionando, a mesma coisa, né?
Mas só... Só dá no refactoring para fazer isso no jeito do react de componentes.


0004-04 Escrita de um Componente de Lista no React Native e como Exportar e Importar

Action Creator: Criador de Ação com o axios para Obter Dados em Redux

# Resumo do Transcript

Esse transcript discute a implementação de Redux em um aplicativo React, focando na integração de uma lista de itens. Aqui estão os principais pontos abordados:

## Estrutura de Pastas
- Criação de uma pasta chamada **Actions** no diretório **SRC**, onde serão armazenados todos os Action Creators.
- Criação de um arquivo **index.js** dentro dessa pasta para consolidar os Action Creators.
- Criação de uma pasta chamada **Reducers** para armazenar os Reducers, com um arquivo **index.js** que retornará todos os Reducers combinados.

## Action Creators e Reducers
- O projeto terá um único Reducer para a lista de itens. No entanto, mais Reducers podem ser adicionados no futuro para funcionalidades adicionais, como formulários ou outras informações (ex: categorias).
- O componente **List** fará uma requisição HTTP para buscar informações para preencher a lista quando montado.

## Integrando Redux
- No método `componentDidMount`, será chamado um Action Creator para fazer a requisição dos dados da lista. Após obter os dados, a action será despachada para os reducers.
- O Action Creator irá realizar um pedido HTTP usando a biblioteca **Axios** ao invés da função nativa **fetch**, por ser mais adequada para o fluxo esperado.

## Configuração do Axios
- O módulo **Axios** será instalado como uma dependência do projeto.
- A configuração inclui a construção de uma URL de requisição e o uso do `axios.get()` para obter os dados.
- O projeto busca simplificar a manipulação de estados ao separar as responsabilidades entre Actions e Reducers.

## Conclusões
- A estrutura está sendo organizada para facilitar o crescimento e manutenibilidade do projeto, permitindo que novos Reducers sejam adicionados conforme necessário.
- O próximo passo envolve conectar Redux ao aplicativo para disponibilizar os dados obtidos via HTTP no estado da aplicação.

**Nota:** Este resumo deve ser complementado com pesquisa adicional sobre Redux e seu uso com React, especialmente sobre a diferença entre `export default` e `export` nomeado.

Tá bom?
Então aí já temos a list item que vai dar...
Vários desses vão ser adicionados para list e essa list vai ser mostrada no app.
Então agora o que a gente vai fazer?
Eu acho que a gente devia... a gente pode seguir várias maneiras.
Eu acho que a gente já pode começar a conectar essa lista com o Redux.
Tá bom?
Então o que eu vou fazer?
Eu vou voltar para a lista aqui e eu quero conectar esses caras com o Redux
para pegar a informação para cada list item do Redux
em vez de ser só esse dummy.
Então vamos criar uma pasta aqui no SRC.
Criar a pasta chamada Actions.
A gente vai pôr todos os nossos Actions Creators dentro desse index file aqui.
E aqui eu vou criar um arquivo chamado index.js.
Todos os Actions Creators vão ser armados e nados nesse arquivo, tá bom?
Logo os Actions Creators aqui.
Tá bom?
Então o Action Creator, você coloca aqui e vamos criar uma outra pasta
chamada Reducers para a gente colocar os Reducers.
Reducers, vou criar um index.
E...
Esse aqui vai retornar todos os Reducers combinados, tá bom?
Combinados, eu falo assim porque a gente vai fazer vários Reducers.
Normalmente você tem...
Você pode fazer tudo mesmo aqui, mas a gente quer...
Quebrar isso em várias partes e ter, por exemplo...
Nesse aplicativo só vai ter um Reducer, né?
Vai ser o Reducer para a lista, né?
Mas se fosse uma lista que dava para, sei lá, ter um formulário de adicionar item e essas coisas
a gente tinha que fazer outro Reducer.
Tem um Reducer para a lista, tem um Reducer para o formulário de adicionar novo item e assim por diante.
Se tivesse outras informações, por exemplo, sei lá...
Tem posts, tem também categorias, podia fazer um Reducer para categorias, essas coisas.
Tá bom?
Então esse arquivo vai ser para todos os Reducers.
E antes de a gente fazer o Reducer e fazer o Action,
deixa eu voltar aqui para o meu cara aqui.
Então...
Que o aplicativo vai ser componente List, né?
Então quando a gente montar...
Quando o componente List montar, o que a gente vai fazer?
A gente vai ter que fazer um pedido HTTP para esse cara aqui para pegar essas informações, tá bom?
E disponibilizar isso para a nossa lista.
O jeito que a gente faz isso no Reducer vai ser assim, no Component Deadmount, por exemplo,
ou Component Willmount, agora já estão falando que é melhor usar o Component Deadmount.
A gente vai chamar o Action Creator.
Fetch Post, por exemplo, que eu vou chamar ele.
E esse Action Creator vai fazer o pedido HTTP.
E depois que o pedido, a Promise, for resolvido, a gente retorna a Action e com a resposta.
E essa Action vai ser dispachada para todos os Reducers, automaticamente, pelo Redux.
Normalmente é usado pelo Dispatch, mas não precisa fazer diretamente.
E o Reducer vai pegar o Reducer da lista, vai pegar isso,
e vai adicionar a gente a resposta para a nossa lista no Application State.
E essa lista vai ser rejetada, vai ter disponibilizado como Props para o componente.
Tá bom? Vamos lá ver como é que é isso.
Então eu estou aqui no List Item.
List, vou voltar para o List, desculpa.
Então List, vou voltar o Component Deadmount.
Eu não estou usando Willmount, porque parece que agora o pessoal está recomendando usar Component Deadmount,
em vez de Component Willmount, porque vai acontecer umas coisas com novos updates do React.
Mas Google dá um busco aí para olhar.
Por quê? Mas que usarsa funciona também.
Vou dar um Component Deadmount, então quando eu fazer isso,
a gente vai chamar Action Creator para pegar a lista, os dados da lista.
Então comentar aqui para a gente ver o que eu vou fazer.
Então o Action Creator normalmente vai ser rejetado via Props.
Eu vou chamar o Action Creator de Fat Post, por isso que qualquer coisa que você quiser, tá bom?
E depois que Fat Post vai botar todos os carros.
Mas agora a gente não tem acesso a isso, porque a gente não conectou o Action Creators do Redux com o componente.
E a gente nem definiu isso ainda no arquivo de Actions.
Então o que eu vou fazer? Eu vou definir primeiro o Fat Post.
Vamos aqui no Actions Index, eu vou definir esse Action Creator.
Tudo que você precisa fazer é só isso.
Eu vou dar um exportado ao mesmo tempo.
Export.
Fat Post.
Função de Flasher. Assim.
Desculpe. Errou aí.
Então eu estou dando... Se não tivesse export, isso aqui só seria uma função, né?
Função chamada Fat Post, que é função de Flasher, sem argumento.
E retorna alguma coisa.
Mas eu vou dar um export.
Então quando eu importar, eu posso importar esses carros desse arquivo Index.
O que vai acontecer quando eu dou export sem o default?
É que vai criar um Fat Post, como se fosse a propriedade.
E vai definir a função como o valor.
Então se eu der, por exemplo, import.
Fat.
Se eu der assim, do outro arquivo,
ele vai olhar no Index.
Note que eu nem vou em Index porque já faz isso automaticamente, tá bom?
Se o arquivo chamado Index não precisa pôr quando dá o import.
Então do outro arquivo eu vou dar o import, o Fat Post, porque esse cara aqui
é um objeto com vários valores.
E o... Aqui, a chave é o nome da função do Action Creator.
E o valor é a definição.
E pode ter vários outros, por exemplo, Fat, Categories.
E assim por diante.
Por isso que eu não uso default aqui.
Se eu usasse default, o que queria acontecer?
Iria retornar a função.
Em vez de ser esse objeto com vários pares de chave-valor,
seria a função mesma, se eu tivesse o export default.
Eu tinha que remover isso e já vai dar só esse cara, só dá para ter um.
Tá bom?
Se você quiser saber mais sobre isso, só dá uma busca.
A diferença é que export default e senh o default.
Então vai apagar tudo isso.
Então aqui é o Action Creator, né?
O que a gente vai fazer primeiro?
Fazer, pedir o h2dp, obter todos os posts e depois...
Enviar ou despachar...
...os dados do post.
Tá bom?
Então, se você se lembra que eu falei que o Action Creator retorna uma action.
Então aqui no final a gente vai retornar a action.
E sempre tem um tipo.
E nesse caso vai ter um payload.
Ainda não definiu o que é, mas é sempre assim.
Nesse caso eu vou chamar fatPost,
nome da ação do action.
E payload vai ser a coisa que a gente obter do pedir o h2dp.
Não sei ainda, né?
Então...
Para fazer o pedir o h2dp, eu não vou usar fat.
Eu já tinha usado fat antes nos meus outros vídeos.
Eu vou usar o chamado Axios.
Já as torna muito popular.
E é melhor que o fat, porque o fat tem umas coisas que acontecem.
Quando dá erro, não vai dar no catch.
Não vai para o catch e vai para o then.
É uma coisa meio maluca.
Se você vai dar uma busca, mas eu vou usar o Axios.
Então, eu vou importar Axios.
Mas a gente não tem esse módulo, tem que instalar, né?
Então, vamos para o terminal instalar.
Aqui na minha...
Eu vou dar npm install.
Dash da save.
Axios, tá bom?
Vou instalar o módulo Axios e vou salvar com minha dependência no package JSON.
Dá para demorar um tempo aí.
Mas eu vou te mostrar o package JSON aqui.
As dependencies aqui, vai adicionar o Axios lá.
Então, quando você der o npm install,
depois, se estiver trabalhando com o projeto,
primeiro vez, vai adicionar o Axios automaticamente.
Tá aí, já temos Axios.
Volta para a list.
Oh, desculpa, index do actions.
Tem um Axios.
E o que a gente vai fazer?
Vai dar um get e qual é o rl?
Vamos para esse...
Vou copiar esse negócio aqui.
Vai ser assim, tá bom?
Esse cara.
Se quiser poder isso numa variável.
Eu não vou pôr?
Ou posso pôr, sei lá, não pôr.
Vou chamar de... sei lá...
Pode ser o request rl.
E vou definir aqui,
essa constante com a rl.
Vai dar request rl.
Tá bom?
E eu...
Eu quero demonstrar o...
a string template, então vou remover isso aqui.
Vou botar só o .com e aqui,
eu vou demonstrar como usar o back tick
para dar a interpolação de string.
Então, esse cara é uma variável,
então vou interpolar usando o $
com o curly braces.
Então, o valor dessa variável
vai ser substituído aqui.
Note que eu estou usando o back tick.
Acento grave, sei lá, como é que chama isso.
Tá bom?
Porque é diferente disso aqui
e diferente desse aqui, tá bom?
E vou botar barra post.
Mesma coisa que tinha antes, né?
Mas eu só para demonstrar usando esses aqui, cara, aqui.
Então vou dar um pedido get
e quando terminar,
tem a response, né?
Vou fazer alguma coisa.
Vamos só dar um console log.
Pra ver.
E vou mover isso aqui dentro.
Tá bom?
Salvar.
Conçou logo aí.
Payload não tem nada.
Vou pôr a response agora, mas não tá correto ainda, né?
Talvez não esteja correto.
Porque eu não sei o que está dentro do response.
Provavelmente ponto data.
Então vamos ver.
Vou para a lista aqui,
vou botar um semicolon.
E do jeito que está agora,
não está ligado com o Redux.
Tem umas coisas que a gente tem que fazer primeiro
dentro do app
para poder disponibilizar o Redux,
conectar o Redux React.
E a gente vai fazer isso no próximo vídeo, tá bom?


0004-05 Action Creator: Criador de Ação com o axios para Obter Dados em Redux

Configuração do Provider do React Redux

```markdown
## Resumo do Transcript

Neste vídeo, o apresentador solicita apoio para continuar produzindo conteúdo e convida os espectadores a se inscreverem no seu canal do YouTube, bem como a segui-lo no Twitter e GitHub.

### Conexão do Redux no Aplicativo

1. **Instalação do ReactRedux**:
   - O apresentador está no arquivo `app.js` e menciona que precisa conectar o Redux ao aplicativo.
   - Anuncia a instalação do módulo `ReactRedux` do npm usando o comando:
     ```
     npm install --save react-redux
     ```

2. **Instalação do Redux**:
   - Também menciona a necessidade de instalar o módulo `Redux`, utilizando:
     ```
     npm install --save redux
     ```
   - Após essas instalações, ambos os módulos são adicionados como dependências no `package.json`.

3. **Uso do Provider**:
   - O apresentador volta para o arquivo `app.js` para importar o componente `Provider` do `ReactRedux`.
   - Explica que o `Provider` é um "componente de alta ordem" que permite estender as funcionalidades de um componente.
   - O componente principal (neste caso, `Vio`) deve ser colocado dentro do `Provider`.
   - O `Provider` é responsável por injetar a Store do Redux, que será passada como uma propriedade chamada `store`.

### Conclusão

O vídeo mostra o processo de integração do Redux com um aplicativo React, enfocando a importância do `Provider` na disponibilização da Store.
```


Antes de continuar, eu gostaria de contar com seu apoio para continuar fazendo vídeos.
Por favor, se inscreva no canal, NBK Tutor no YouTube.
E também estou no Twitter e no GitHub com o usuário NBK-HOPE, NBK Hope.
Tá bom? Vamos continuar agora.
Vou voltar aqui. Agora a gente tem que disponibilizar o Redux dentro do nosso aplicativo.
Eu estou no app.js. Então, a gente escreveu esse Action Creator para fazer um pedido à HTTPS para pegar todos os posts.
Mas ainda não temos o Redux conectado.
Para fazer isso, a gente tem que contar com um módulo chamado ReactRedux.
É o npm, módulo do npm, chamado ReactRedux.
Eu vou instalá-lo, vou dar npm, install, dash dash save, react redux.
React dash redux.
Esse é o módulo que permite a gente conectar o React com o Redux.
Vou morar um pouquinho, mas vai ser adicionado ao nosso package.json como uma dependência.
ReactRedux.
Agora, vamos continuar.
Ah, esqueci também do Redux.
Tenho que instalar o Redux. Deu um warning aqui.
Então, npm, install save Redux.
Instala o módulo do Redux.
Morar um pouquinho, vai aparecer nas dependências.
Instala o Redux e instala o ReactRedux.
Quase lá.
Tudo ok agora?
Temos o Redux e temos o ReactRedux no nosso package.json.
Agora, se podemos continuar, vou voltar para o app.js.
E o que eu vou fazer?
Eu vou importar aqui.
Dá um import.
Esse componente chamado provider do ReactRedux.
Tá bom?
Então, esse provider é um componente de alta ordem.
Em inglês, a gente chama higher order component.
E esse higher order component é usado para você pegar um componente
e adicionar mais coisas ao componente.
A maneira que a gente faz isso, é usando componentes de alta ordem, higher order.
E da maneira que a gente faz isso, é só pôr qualquer componente dentro do provider.
Então, vou pôr provider e esse cara, o Vio, vou deixar dentro do provider.
Então, em inglês, a gente fala que o provider vai em REST, né?
O componente que é, nesse caso, a Vio.
Tá bom?
Então, o que é que vai acontecer?
O provider é uma maneira da gente injetar o Redux Store
para disponibilizar a Store dentro do aplicativo.
Então, tem um propriedade chamado Store.
E a maneira de criar a Store é com o Redux.


0004-06 Configuração do Provider do React Redux

Criação da Store do Redux, Primeiros Passos do Reducer e connect

# Resumo do Transcript

No transcript, é discutido como implementar o Redux em uma aplicação React. Aqui estão os pontos principais abordados:

## Importação e Criação da Store

- É necessário importar `createStore` do Redux.
- A `createStore` é utilizada para criar uma `Redux Store`, que representará o estado da aplicação.
- A Store deve ser passada para o `Provider`, que disponibiliza a Store para toda a aplicação.
- A Store é criada com `createStore` e recebe como argumento os reducers, que ainda não foram definidos.

## Definição dos Reducers

- A criação dos reducers envolve a importação da função `combineReducers` do Redux.
- Um arquivo `index` é criado na pasta `reducers` para exportar os reducers definidos.
- **Exemplo:** Um reducer chamado `posts` é mencionado, com uma função de reducer que por enquanto retorna um objeto vazio.

## Conexão do React com Redux

- Para conectar os componentes React ao Redux, é necessário importar a função `connect` do `react-redux`.
- O `connect` é usado para ligar o estado da aplicação (application state) ao React.
- A função `connect` recebe como argumentos:
  - `mapStateToProps`: para mapear o estado do Redux para as props do componente.
  - `mapDispatchToProps`: para mapear as funções de ação que podem ser despachadas.
  
## Foco no Dispatch

- O `mapDispatchToProps` é utilizado para fornecer action creators, como `fetchPosts`.
- É sugerido que as funções `mapStateToProps` e `mapDispatchToProps` podem ser declaradas como funções flecha no código.

Este resumo reflete como o Redux é configurado e integrado em uma aplicação React, com foco em criar a Store, definir os reducers e conectar o React ao Redux usando `connect`.

Então, a gente vai precisar do createStore do Redux.
Então, vou importar essa função chamada createStore fromRedux, que vai ser usada para
criar um Redux Store, criar um applicationState, que a gente vai passar para provider, que
vai disponibilizar por toda o aplicativo.
Então, você pode chamar aqui createStore com, você tem que dar o argumento, os reducers,
que a gente não tem ainda.
Ou você pode fazer uma variável fora desse app, eu vou fazer isso.
Então, eu vou chamar a variável de Store.
Então, eu vou chamar constStore, vai ser o createStore passado com os reducers.
Então, o que é que é esse reducer?
A gente não tem ainda, mas tem um index aqui que a gente pode definir.
Então, vamos só importar os reducers, eu vou dar um import reducers da pasta chamada
reducers.
E como está nesse arquivo index, eu não preciso escrever index, se for o nome index, pode
remover que automaticamente vai olhar no index dentro dessa pasta chamada reducers.
Agora não tem nada, se você notar, mas a gente vai definir.
Espera um pouco aí.
Então, tem o provider, injecta a propriedade Store, que é uma Store criada pelo Redux.
Redux tem essa função createStore que pega com o argumento os reducers e cria uma Store,
cria o chamado applicationState.
É?
Cria.
E eu passo isso aqui.
Bom, agora os reducers não temos ainda, vamos lá e criar.
Vou por index do reducers e o que é que eu vou fazer?
Eu vou precisar de uma função chamada CombineReducers, então eu vou dar um import, combineReducers
fromRedux e vou dar um export default com essa função e o argumento é um objeto.
Vou passar um objeto com a chave do nome do reducer e o valor, o reducer, a função
do reducer.
E agora, até agora não tem nada, mas eu sei que um dos reducers vai ser posts, então
eu posso chamar posts e vai ser o postReducer que não temos ainda, então só vou passar
uma função de flash que só retorna um objeto vazio.
Tá bom?
Então eu estou exportando o combineReducers que vai disponibilizar esse posts, esse reducer
aqui na verdade é uma função que retorna um objeto vazio agora, mas isso vai ser útil
que já vai funcionar quando você passar isso para o createStore aqui no app.
Então de volta para o app.js já temos o reducer definido, nem que esteja vazio e adicionei
a provider.
Então está tudo configurado aqui.
Então agora vamos para a list para configurar, conectar o react with redux.
Se lembra a gente fez o action creator que a gente vai ter como props, mas ainda não
dá porque não está conectado ao redux.
Para conectar eu vou importar esse modo, esse função chamado connect from react redux,
tá bom?
Destrutura o connect que está dentro do react redux.
E lá embaixo onde tem o export default eu vou chamar a função connect, export default
connect com o argumento aqui sendo o componente e outros argumentos.
O senor de que tem dois pares e parantes aqui, tem o último que é para o argumento o componente
é sempre no final e esse aqui que vai ser para o map dispatch to props e para o map,
oh desculpa, map state to props e para o map dispatch to props.
E não temos ainda, mas a gente vai ver se precisa disso.
Então o primeiro argumento do connect é o map state to props, o segundo é maps dispatch
to props e no outro parante set, no outro parante z é o componente.
Sempre assim.
Então para que a gente precisa do map state to props ou não?
Nesse caso, se a gente quiser disponibilizar os dados dos posts automaticamente via uma
prop a gente tem que ter map state to props.
E isso que conecta o estado do aplicativo o application state ao react.
Agora o map dispatch to props é para você disponibilizar os action creators, por exemplo
o fat posts.
Então a gente vai precisar do map dispatch porque a gente tem que chamar o action creator
chamado fat posts.
Tá bom?
Normalmente você pode definir essas funções aqui.
Map state to props, funções de flash e também define o map dispatch to props, funções
de flash aqui.
Tá bom?
Pode fazer isso.
Vamos focar só no map state, vamos focar no dispatch primeiro.
Tá bom?
Deixa esse cara de lado.
O que a gente quer chamar o action creator chamado fat posts?
Para fazer isso a gente tem que definir o dispatch to props para disponibilizar o fat posts.


0004-07 Criação da Store do Redux, Primeiros Passos do Reducer e connect

Definição de mapDispatchToProps com bindActionCreators – Como Usar connect do React Redux

# Resumo do Transcript

O áudio discute como utilizar a função `bindActionCreators` do Redux para conectar ações a um componente React. A seguir estão os principais pontos abordados:

1. **Uso do `bindActionCreators`:**
   - A função `bindActionCreators` é utilizada dentro do `mapDispatchToProps` para vincular um objeto de action creators, como `fetchPost`, a um componente.
   - O primeiro argumento da função é um objeto com as ações, enquanto o segundo argumento é o `dispatch`, que é responsável por enviar as ações para o store do Redux.

2. **Estrutura do `mapDispatchToProps`:**
   - A função `mapDispatchToProps` deve aceitar o `dispatch` como seu segundo argumento.
   - O objeto passado para `bindActionCreators` disponibiliza as actions como props do componente, por exemplo, `this.props.fetchPost`.

3. **Importando as dependências necessárias:**
   - É necessário importar `bindActionCreators` do Redux e as action creators pertinentes, como `fetchPost` do arquivo `Actions/index`.
   - O uso de destruturação é mencionado para importar apenas a action desejada.

4. **Preparação do componente:**
   - Após as importações, assegura-se que o objeto é retornado vazio em `mapStateToProps` para garantir que o componente está corretamente configurado.

5. **Testes e depuração:**
   - O apresentador demonstra um teste no simulador para verificar se a configuração funcionou, mencionando um erro de 'post undefined', indicando que há algo a ser corrigido no código relacionado a reducers.

Essa discussão abrange como configurar e vincular ações do Redux a componentes React, além de abordar boas práticas de importação e testes.

A maneira que a gente vai fazer isso é
usando uma função chamada bindActionCreators,
tá bom? Que é do Redux.
Então, o que acontece aqui é na mapDispatchProfs
a gente dá um retorno
e vai chamar o bindActionCreators.
E vai passar um objeto com o nome do reducer,
por exemplo, fetchPost.
Tá aí o objeto.
Senor, aqui isso aqui é a mesma coisa.
Isso, na verdade,
se eu estou dizendo que eu quero ter um prop dentro do componente
chamar fetchPost, o que vai chamar o fetchPostReducer?
Não reducer, o actionCreator, né?
Desculpa.
E o segundo argumento é o dispatch.
Na verdade, é argumento da mapDispatchProfs,
tem que ter esse cara aqui.
Se tem uma função mapDispatchProfs, tem o dispatch
como argumento.
A gente não falou muito do dispatch,
mas esse cara é o que é o responsável
por mandar ou enviar todas as actions
para todos os Redux.
Já é feito para a gente.
Tá bom?
Então, tem que ter ele como segundo argumento
para o bindActionCreators.
O primeiro argumento é só um objeto
e cujas chaves
serão disponibilizadas como o
this.profs.fetchPost, né?
Esse cara aqui podia ser qualquer coisa assim,
então vai aparecer
como dentro do props assim, entendeu?
Mas, normalmente, eu sempre põe o mesmo nome.
E como eu tenho o mesmo nome,
por causa do IAS6,
você pode fazer...
Se tem o valor...
Tem a propriedade e o valor for o mesmo nome,
você pode apagar que vai ser a mesma coisa.
Esse aqui é a mesma coisa que isso.
No IAS6, versão JavaScript.
Tá bom? Então, eu vou fazer isso para
ficar mais legal.
Mas saiba que isso significa isso.
Tá tudo legal no dispatch de props,
mas o problema é a gente não importou esse cara
e nem importou esse cara.
Não sabe o que é, então a gente vai lá em cima
e vamos importar.
Então, vou aqui
import, bindActionCreators.com.
BindActionCreators importado Redux.
Tá bom?
BindActionCreators importado Redux.
E vou importar os Redux,
o ActionCreators, tá bom?
Vou aqui, antes do list item.
Normalmente, eu põe todos os importos
que são de módulos,
universais primeiro e os módulos locais
depois e depois dos componentes
que a gente fez.
Tá bom?
E agora, vamos dar o import do FatPost.
Mas cadê esse cara?
Esse FatPost está dentro do quê?
Vamos olhar.
Está dentro do Actions barra index.
Está aqui.
A gente tem o ExportConst.
Quando a gente fala ExportConst,
se a gente tem o import no index,
ele vai pegar todo o objeto.
E esse objeto vai ter o FatPost.
FatPost com a função aqui.
Definida, né?
Mas a gente não quer todo o objeto.
A gente só quer o FatPost dentro desse objeto,
porque poderia ter menos,
poderia ter muitos, né?
Então, a gente só quer isso,
então a gente vai dar uma destruturação desse cara.
E a gente vai fazer assim.
Import FatPost from...
Tá onde isso?
Tá um diretório acima, então dois pontos.
Barra Actions.
Não precisa index porque,
por causa do nome index, não precisa digitar.
Já vai olhar no index.
Então, esse cara vai pegar o FatPost
dentro do objeto que é esse arquivo aqui, index,
que é retornado pelo arquivo.
Então, a gente já tem aqui, importado,
e tem o Binaxual Creators.
Então, já pode usar aqui.
Tudo OK? Tudo OK.
Entendeu?
E esse cara vai ser disponibilizado
como uma props dentro do componente List.
Então, já vai para chamar.
Salvar.
Esse cara aqui pode ficar...
Vou dar só um return aqui,
objeto vazio, só para deixar, tá bom?
Vou deixar lá.
Deu um return object vazio para o mapState of props.
Só para você ver.
Dá um olhado aqui.
Agora, vou testar.
Se eu não esqueci nada.
Vamos ver se eu não esqueci nada.
Vou para o meu simulador ver se dá um erro.
Post undefined.
Vamos ver o que é isso.
Combine reducers.
Ah, sei, sei, sei.
Tá aqui index.
Post.
Deu um definido.


0004-08 Definição de mapDispatchToProps com bindActionCreators – Como Usar connect do React Redux

Debug do Reducer, Action Creator, Chamada GET do axios e Instalação do Redux Promise

```markdown
## Resumo da Transcrição

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

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

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

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

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

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

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

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

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

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


0004-09 Debug do Reducer, Action Creator, Chamada GET do axios e Instalação do Redux Promise

Como Configurar o Middleware Redux Promise e Implementação do Reducer para os Posts

```markdown
# Resumo do Transcript

Neste trecho, você aprenderá sobre a implementação do middleware do Redux, especificamente o uso da função `Apply Middleware`, a criação de uma store e como integrar promessas com o Redux.

## 1. Configurando o Middleware

- **Create Store com Middleware**: Criação de uma variável chamada `Create Store with Middleware`, que usa `Apply Middleware` do Redux com:
  - Primeiro argumento: `Redux Promise`
  - Segundo argumento: `Create Store` do Redux.

- **Importação dos Módulos**: Importar o módulo `Redux Promise`.

## 2. Integrando com Action Creators

- Criação de uma variável chamada `Request` que armazena o resultado de `Axios.get`, que retorna uma promessa.
- Uso dessa variável como payload para a ação. O `Redux Promise` intercepta essa ação, aguarda a resolução da promessa, e então substitui o payload pelo resultado.

## 3. Definindo o Reducer

- Criação de um novo arquivo `PuzzReducer.js` para definir o reducer.
- A função reducer recebe o `state` e `action`, e cuidadosamente imprime o `action` no console para depuração.
- Substitui a importação do reducer na estrutura principal no índice.

## 4. Lógica do Reducer

- Implementação de um `switch` no `action.type` para lidar com diferentes tipos de ações.
- Se `action.type` for `FatPost`, o novo estado é retornado, contendo os posts obtidos em `action.payload.data`.

## 5. Retorno do Estado

- O estado é sempre retornado ao final do reducer, garantindo que permaneça imutável se nenhuma correspondência for encontrada.
- O uso de `...state` para manter o estado anterior e adicionar novos dados.

## 6. Finalizando

- É feita uma verificação de estado no console para confirmar que os dados estão sendo armazenados corretamente.
- O próximo passo é conectar o estado usando `mapStateToProps` no componente de listagem.
```


Vamos para o app.js e a gente vai precisar do chamado Apply Middleware.
Função Apply Middleware do Redux. Eu adicionei aqui.
Depois o Create Store Apply Middleware.
E aqui nesse Under the Store, eu vou fazer um Create Variável, chamado Create Store with Middleware.
E vou chamar a função Apply Middleware.
Primeiro argumento vai ser o Redux Promise, o módulo.
A gente instalou, mas não importou ainda, mas vamos só terminar essa linha.
E o segundo argumento aqui nesse outro parêntese vai ser o Create Store do Redux.
Oh, o que é isso? Store.
Show.
Bom? E o semicolon.
Então eu criei essa variável que vai ser uma função Create Store with Middleware.
Chamei o Apply Middleware do Redux.
Passei o Redux Promise, vamos importar isso também, que não tem.
Redux, React Redux, Import.
Acho que é Redux Promise, Prom...
Redux Promise. Acho que o módulo é assim, não precisa de estruturar, que é só o módulo.
E...
Passei esse. E passo o Create Store do Redux.
E com isso eu posso chamar essa função e passar os meus reducers e vai ter o Middleware, o Redux Promise, funcionando automaticamente.
Toda vez que eu tiver um Action Creator, tá bom?
Aqui Create Store with Middleware, mudei o nome pra chamar esse cara aqui e adiciona o Redux as como argumento.
E já passo o Store com o Middleware.
Tá bom?
Agora vamos voltar, salvar isso e voltar para o Index do Action Creator, tá bom?
Volta pra lá, para o Index do Action Creator.
Agora, o que que a gente vai fazer?
Eu vou pôr esse cara dentro de uma variável, tá bom?
Vou chamar Request, talvez.
E...
Deixa eu remover isso aqui.
Então, Axios.get, esse cara retorna o promessa.
O promessa vai dentro dessa variável.
E...
Eu vou voltar o payload e vou botar, em vez de Response, Request.
Você tá passando Request, que é uma promessa, JavaScript Promise, né?
O Redux Promise vai pegar, quando vê que você tá retornando essa ação com payload, com uma promessa,
vai pegar a promessa, vai esperar a promessa ser resolvida.
E quando ser resolvida, finalmente vai mandar essa Action,
e em vez de ter o Request, vai a Response, vai ser lá, vai ser substituído, tá bom?
Vou explicar de novo.
Tá bom? Vamos...
A gente faz o pedir HTTP, mas o Axios.get retorna o Promise.
Essa promessa demora um pouco para ser resolvida, porque vai fazer pedir ao outro servidor.
Tá bom? Eu passo essa promessa com o payload nessa Action aqui.
Porque a gente instalou o Promise, Redux Promise?
Toda vez que a gente retorna uma Action, o Redux Promise vai ver o payload se tiver a Promise.
Ele tem uma Promise aqui, pega essa Promise, espera ela ser resolvida.
Quando for resolvida, aí é que vai retornar a Action.
E em vez de ter o Request como a payload, vai ter a resposta, que obteu da promessa.
Tá bom? Vou voltar aqui, salvar.
Agora eu vou para o Action Creator, vou do Action Creator, eu vou para o Reducer.
Esse cara aqui. Agora eu quero definir o meu Reducer.
Vou olhar aqui, vou criar um novo arquivo, vou chamar a PuzzReducer.js
e dentro do Reducer, vou export default, tá bom?
State. Eu só estou copiando o que eu tinha aqui.
Esse cara aqui que vou por em outro arquivo.
Então State e o segundo argumento vai ser o Action, como eu disse antes.
Você é, função de A.
E esse é o Reducer. Antes a gente só tinha isso, né?
Você quer a mesma coisa que esse cara aqui?
E vou salvar. Antes da Return State, você vai dar o console log na Action.
Para ver o que acontece.
Isso realmente, o estado é objeto azil. Vamos ver o que acontece.
Ah, tem um plugin conectado a esse PuzzReducer importado no Index aqui.
Em vez de ter isso, eu vou ter PuzzReducer de outro arquivo.
Import PuzzReducer from PuzzReducer.
Não é o que eu use, que eu usei, export default, então não precisa distritorar.
Vamos ver o que acontece. Não tem problemas.
Eu atualizei meu aplicativo.
Se note que tem um console log aparecendo aqui.
E é por causa do Redux.
Que ele faz uns negócios inicialmente, quando o aplicativo começa.
Ele manda umas actions.
E por isso está aparecendo console log.
Que a gente deu console log e também aparece essas ações iniciais que o Redux faz.
Mas o que interessa a gente é essa linha aqui, o final.
As senosas que tem o object, com payload e com type.
Na verdade, isso é o action que a gente deu console log.
Aqui.
Se note que no momento que o list é montado, chama o
ThisPropsFatPost, que é o action creator.
E esse cara faz o pedido get.
E depois que a promessa é resolvida, manda esse action.
A despachada para todos os reducers.
O post reducers pega a action e a gente deu console log.
E essa action foi a que a gente mandou.
FatPost e tem um payload.
Vamos olhar o que tem no payload.
Um object e tem data, data e está tudo aqui.
Se note que o Redux Promise funcionou.
Tá bom?
Agora, voltando aqui.
No Redux, normalmente, o que a gente vai fazer?
A gente vai dar um switch no action.type.
E vai dar um case.
Se for FatPost, a gente vai retornar o novo estado.
Nesse novo estado, eu quero os posts, que vai ser o action payload data.
Você nota que a gente viu no browser que o object é payload,
tem a propriedade de data que tem todos os posts.
Então, eu quero que posts do application state sejam todos esses dados aqui.
Normalmente, a gente também passa o estado que como estava antes.
Então, a gente faz .. .state e com as coisas adicionais.
Que adiciona ao estado.
Esse aqui é a mesma coisa que falar state.comcat, esse outro cara.
É um novo jeito de falar isso no JavaScript, s6.
Esse três pontos significa que, primeiro de tudo, state é um object, tá bom?
Um object.
E o que é que você faz? . .ponto ele pega todas as chaves dentro do objeto.
Todas as propriedades e põe dentro desse novo objeto.
Então, se você tivesse o state, se fosse um objeto, um name, sei lá, assim.
E se eu fizesse assim, ele ia criar um novo objeto e ia copiar esse cara aqui.
Copia esse, põe aqui.
Copia esse, põe aqui.
É isso que está acontecendo aqui.
A gente copia as coisas do estado antigo e adiciona o post e vai adicionar esse cara aqui.
Essas coisas assim.
Tá bom?
Normalmente, a gente sempre tem que retornar o estado se nenhum dos casos fosse relacionados.
Desse jeito está, você pode deixar aqui ou pode adicionar no default do switch.
Mesma coisa.
Eu vou botar aqui dentro, só para...
Porque se nenhum dos casos executarem, vai executar o return state.
Sempre tem que retornar o estado como está.
Como está.
Bom?
Nesse caso, eu pudei essa constante aqui.
Eu acho que não tem essa constante definida.
Eu não sei como eu defini lá.
Vou voltar a actions.
Ah, eu defini como string.
Tá bom, então vou botar um string aqui.
Normalmente a gente põe a constante e define a constante em outro arquivo.
Vou fazer isso depois.
Agora vamos...
Eu quero dar um console log.
Aqui.
Para ver como é que está o state.
Vai estar vazio.
Essa salva aí vai estar funcionando.
Tudo ok, né?
Agora já temos os posts dentro do estado.
Só falta conectar o estado usando o map state de props dentro da list component.
Vamos fazer isso para a sessão.


0004-10 Como Configurar o Middleware Redux Promise e Implementação do Reducer para os Posts

Conexão do Estado de Redux do Aplicativo com um Componente Através do mapStateToProps

# Resumo do Transcript

O transcript discute o processo de conectar o estado da aplicação a um componente na lista utilizando Redux. Os principais pontos abordados são:

1. **Paciência e Compreensão**: O orador pede paciência aos ouvintes, indicando que ainda não é possível ver resultados concretos, mas que gradualmente eles entenderão o processo.

2. **Uso do `mapStateToProps`**:
   - O orador está na componente "list" e gostaria de conectar o estado da aplicação.
   - Utiliza a função `mapStateToProps` para retornar os dados da aplicação, especificamente os posts.
   - O estado recepcionado não é o estado do componente, mas sim o estado global da aplicação.

3. **Estrutura do Estado**:
   - O estado global tem uma chave chamada `post`, que deve ser acessada através de `state.post`.
   - O orador menciona que a forma como o reductor de posts foi implementado está confusa, pois é um objeto que contém uma chave `post`. A sugestão é renomear para `all` para maior clareza.

4. **Implementação no Componente**:
   - No componente "List", ao invés de referir-se a `post`, o orador sugere usar `all` para acessar todos os post.
   - O estado deve ser acessado com `state.post.all`.

5. **Renderização e Condicional**:
   - A função `render` verifica se os posts estão definidos nas props. Se não estiverem, retorna "Carregando".
   - Se os posts estiverem definidos, ele loga as props no console.

6. **Problemas**:
   - O orador observa que a renderização permanece em "loading", mas não indica a causa do erro no momento.

### Considerações Finais
O enfoque principal do snippet é a interação entre os diferentes estados da aplicação utilizando Redux e como fazer a ligação correta no componente para garantir a renderização adequada dos dados. A discussão também aborda a importância de clareza na nomenclatura e estrutura do estado.

Eu sei que a gente está fazendo muita coisa aqui sem ter muitos resultados pra gente ver,
mas eu peço que tenha paciência pra não entender o que está acontecendo muito agora,
mas vamos prosseguir e continuar e você vai com tempo a entender depois o que está acontecendo,
tá bom? A gente vai dar avisado depois de fazer tudo isso.
Vamos se preocupar. Então, vamos continuar.
A gente deu um fat, agora a gente já tem os dados disposts no application state,
só falta conectar esse state pro componente aqui pra ter acesso aos dados.
A maneira que eu vou fazer é usando o mapStateToProps.
Estou na component list, tá bom? Vou pro mapStateToProps e vou retornar um objeto e vou chamar de post, tá bom?
E pro mapStateToProps, o argumento é sempre state, o application state.
Não é estado do componente, é o estado do aplicativo geral, tá bom? Do redux, redux store.
Então, esse post vai ser o state, o cenote state aqui vai ser, você vai pro index do redux,
vai ter essa chave chamada post dentro do state, porque eu combinei todos os reduxers.
E o post vai ser, vai ter dentro do state, então, a gente, pra conseguir escar aqui,
a gente vai aqui e falar state.post no list, volta pro list, vai state, ok, state.post, tá bom?
State.post, tá bom? Mas tem um detalhe aqui, do maneira que eu fiz o post reduxer,
eu mandei como estado um objeto, tá bom? E dentro desse state tem chamada post, bom?
Não. Eu devia chamar isso de, oh, todos os posts, em vez de posts, vai ficar confundindo as coisas.
Do jeito que eu tenho aqui, a gente tem que fazer assim, post.post, entendeu?
Então, vou mudar, esse cara vou botar all. Você pode botar todos em português, qualquer coisa.
Mas vai confundir com tudo em inglês, sei lá, faz o que quiser, vou botar all pra todos os posts, tá bom?
Quando eu pude all aqui, vai dentro desse post, post.all, que vai estar dentro do state, do application state.
Vou voltar pra lista, então em vez de post, vou botar all. Então, state.post.all, entendeu?
O state é o objeto, esse objeto aqui, vai ter essa chave, chamado post, que dentro dele, vai mandar outro objeto, que é o all, e tem todos os posts.
Então, voltando aqui, só isso. E vou no render aqui, o que eu vou fazer? Vou dar um F aqui, statement.
Se não estiver definido, eu vou dar, retornar um texto, talvez.
Carregando o loading, carregando, tá bom?
Se não, eu vou continuar, vou dar um console log aqui, só pra você ver, this were props.
Então, a função render do list, componente de lista, se não tiver os posts definidos nas props, vai retornar loading.
Se estiver definido, continua, dá um console log do this props e retorna esses caras, vamos ver.
Ah, deu erro.
Ah, vou botar esse semicolon, ponto e vírgula, tirar. Desculpe, já tem aqui.
Voltando lá, tá sempre loading.
É?
Parece que não sai de loading, porque será?


0004-11 Conexão do Estado de Redux do Aplicativo com um Componente Através do mapStateToProps

Carregamento da Lista com o Criador de Ação e Componente Individual para Cada Item

# Resumo da Transcrição

Na transcrição, o autor descreve o processo de atualização e renderização de um componente de lista em uma aplicação React. Aqui estão os pontos principais:

1. **Inicialização e Carregamento**:
   - Ao iniciar, o estado do componente `Post` não está definido, resultando em uma tela de carregamento.
   - O componente `FatPost` é exibido enquanto os dados estão sendo carregados.

2. **Atualização do Estado**:
   - Quando os dados são recebidos, o estado da aplicação é atualizado, definindo o `Post`.
   - Isso faz com que o componente seja re-renderizado, agora com `Post` definido.

3. **Renderização da Lista**:
   - O autor passa as informações dos itens do `Post` para o componente `List Item` através de props.
   - Um `map` é utilizado para percorrer os objetos do `Post` e renderizar um `List Item` para cada um.

4. **Propriedades Únicas**:
   - Um aviso sobre a necessidade de uma chave única (`key`) é mencionado. O autor sugere usar `Post.id` para isso.

5. **Exibição de Títulos**:
   - No componente `List Item`, o título de cada post é exibido.

6. **Desestruturação**:
   - O autor explica como melhorar a legibilidade do código através da desestruturação de props, simplificando o acesso às propriedades dos itens.

### Dicas Gerais:
- Sempre que utilizar `map` para criar componentes, não esqueça de incluir uma chave única para cada elemento.
- A desestruturação é uma prática recomendada para tornar seu código mais claro e conciso.

### Estrutura do Componente:
```javascript
const List = (props) => {
    if (!props.Post) {
        return <Loading />;
    }
    
    return (
        <div>
            {props.Post.map((item) => (
                <ListItem key={item.id} item={item} />
            ))}
        </div>
    );
};

const ListItem = ({ item }) => {
    return <div>{item.title}</div>;
};
```

### Conclusão
O autor faz uma revisão sobre o fluxo de dados em um componente React, enfatizando a importância da estruturação correta dos componentes e a desestruturação de propriedades para melhor legibilidade.

Ah, eu esqueci de salvar a PostReducer. Salva, tá bom? Salvei. E volto aqui.
Loading apareceu os itens. Bom, então, voltando no list.
Inicialmente, aparece Loading por quê? Porque inicialmente, propriedade Post não está definida, tá bom?
Se não está definida, retorna em Loading. Aí, enquanto não está definida, deixa o FatPost que faz o vídeo da KTP.
E quando a resposta vem, ela dá um update no State, Application State.
E por isso, o Post é injetado como props no componente e se torna definido.
E o cara vira, dá uma força, o componente a se renderizar novamente, que retorna esse view.
Se você notar o console log que a gente deu, vamos ver que aparece.
Se você notar o objeto, ao console log. Essa aqui é as props desse componente.
Tem o FatPost que a gente já tinha injetado como props. E tem o Post agora, que agora é um array com vários objetos.
Legal. A gente pode usar essa Post para mandar informação para cada item. Vamos lá.
Então, List Item, que a gente fica a fazer é passar a informação dos items como propriedade.
Nesse caso, eu só me importo com o título, mas eu posso também passar o body, ou posso passar o objeto inteiro.
Vamos passar o objeto inteiro. Então, vou colocar item e quero que a gente tenha que dar um map.
Tem que ir para cada um, para cada um desses objetos.
A gente vai fazer um componente List Item e passar essas informações para componente via props.
Vamos lá. Eu vou voltar aqui. Se não estiver definido, chama load.
Se estiver definido, eu vou... Eu vou deixar o console log ali, ou não, sei lá, tirar aqui.
Eu vou fazer... Post. Vou chamar Post. Vou chamar Post. Vou chamar Post.
Item, sei lá, vou chamar assim. Então, o que eu vou fazer? Vou dar... Eu tenho acesso a props.
Post. Um lista de objetos. Eu vou dar um map. Tá bom?
Primeiro argumento vai ser o Post. E vou passar usando Flash.
E para cada post, vou retornar um List Item. Um item, propriedade de item, seja o Post.
Tá bom? E aqui, em vez de ter esses caras, eu vou só por Post Items.
O que eu estou fazendo? Para cada Post, dentro dessa array, eu retorno um componente List Item,
cuja propriedade item é setada pela informação do Post, objeto do Post.
Então, o List Item vai ter acesso ao item. Tá bom?
Então, pego todo esse list de componentes e mostro na tela. Vamos ver se não teve erro.
Aí, aparece um monte, porque acho que tem um 100. Um 100 Post aqui, né?
Se até o final, 100. Então, tem muitos deles. E tá também esse error, esse warning aqui.
Não é erro, não. É só dizendo, todo filho de um array tem que ter uma key propriedade única.
Então, esse negócio da... tem que sempre ir adicionar o key aqui.
Quando estiver fazendo mapping ou gerando vários componentes, uma lista, ponho key.
Eu vou botar o Post.id, porque eu sei que é único, né? Unique.
Tá bom? Vou botar Post.id, que é único para cada um. Tem que ser único.
Vamos ver se não dá mais esse warning.
Tudo ok agora. Tá aí, tudo aí.
Tem vários dias, a gente vai lidar com isso depois de tanto item. Mas, vamos ver.
Depois disso, vamos configurar List Item. Cadê o List Item? Aqui.
Para usar as propriedades.
Bom, em vez de falar item, eu vou falar props.item.title.tyre.
Porque eu sei do JSON aqui que tem um Tyre, né?
Tem também esse body. Mas vamos olhar aqui.
Então, eu dei um update no List Item para mostrar o título.
Tá bom. Tá tudo isso agora.
Então, cada um, cada linha é um título, né?
Então, vamos recapitular essa para você entender.
Estou aqui no componente List.
Então, os posts vão vir do estado, que são injetados via prop.
Enquanto não estiverem definidos, retorne o texto.
Se estiverem definidos, faz isso aqui.
Vai dar um loop, mapping, cada post gera um componente List Item para cada post
e cria uma nova array de componentes.
Tem que setar o key para uma coisa única.
Nesse caso, post.id, eu sei que é único.
E eu dei, injectei a propriedade chamada item para o List Item, que tem a informação do post, um objeto.
E dentro do List Item, eu pego, tenho esses props, né?
.item que foi injetado e ponho o título, ponto título.
E tá aqui.
Tá bom?
Normalmente, para essas suas do sim, por exemplo,
se você sabe já que só vai ter o título e não precisa mais de nenhuma outra informação,
você pode dar um destructuring no argumento aqui.
Em vez de falar props, eu vou destruturar o item.
Só o item.
E aqui, eu não preciso mais falar props, que já tem o item.
Tá bom?
E pode destruturar mais ainda, sim.
Fazendo assim.
E não precisa mais falar item.
Tá bom?
Pode fazer isso também.
Vamos ver se está funcionando.
Ainda, testar.
Estar.
Loading.
Tá aí.
Tá bom?
São os detalhes do IACs, que a gente usa muito para digitar muita coisa depois.
Mesma coisa, a mesma maneira eu poderia fazer no List aqui.
Eu tô usando Post.
Post duas vezes, né?
É que eu faço destructuring.
Faço Post, destes pontos props.
Em vez de falar destes pontos props, eu vou só falar Post.
Tá bom?


0004-12 Carregamento da Lista com o Criador de Ação e Componente Individual para Cada Item

Botão de Toque com o TouchableOpacity e Definição de Estilo com o StyleSheet do React Native

# Resumo do Transcript

Neste transcript, o autor discute como melhorar o estilo de um aplicativo, focando na transformação de itens da lista em botões interativos. Aqui estão os principais pontos abordados:

1. **Estilo e Aparência**:
   - O autor expressa a necessidade de melhorar a aparência dos elementos de texto, que estão difíceis de visualizar.

2. **Adicionando Interatividade**:
   - O objetivo é fazer com que os títulos dos itens sejam clicáveis e levem a outra cena. Para isso, os itens devem ser transformados em botões sensíveis ao toque, utilizando o componente `TouchableOpacity`.

3. **Uso do TouchableOpacity**:
   - O `TouchableOpacity` é escolhido porque não altera o fundo ao ser clicado, ao contrário do `TouchableHighlight`, que muda a aparência. As propriedades são implementadas dentro do componente.

4. **Estilização**:
   - O autor cria estilos usando `StyleSheet.create`, adicionando margem entre os itens da lista para melhor espaçamento e aparência.

5. **ScrollView**:
   - Como a lista pode não caber inteira na tela, o autor decide incorporar um `ScrollView` para permitir a rolagem, melhorando a usabilidade do aplicativo.

6. **Espaçamento Adicional**:
   - Finalmente, é sugerido adicionar um espaçamento maior no topo da lista para melhorar a apresentação geral.

O autor conclui o processo com a premissa de que as atualizações realizadas tornaram a interface mais limpa e funcional.

Agora vamos lidar com o estilo aqui só para melhorar a aparência, que está muito com
o texto aqui, difícil de ver o que está acontecendo.
Vou para o last item para mudar as coisas.
Senor que a gente queria que quando clicasse ou tocasse em um dos títulos do item, iriam para outra cena.
Para fazer isso a gente tem que fazer esses caras serem botões, sensível toque.
Para isso eu vou usar o touchable opacity, tá bom?
Esse componente aqui para os botões ou sensível toque, eu vou usar o touch opacity
para, porque esse cara não aparece um negócio, não muda o background quando eu clico.
Se o touchable highlight que eu já usei antes, muda o background, bota um negócio preto
ou o acúlculo que você quiser, mas eu vou usar o touchable opacity.
Bom, então aqui no item, em vez de texto, vou deixar o texto, mas vou colocar o touchable opacity.
No indentation, o on press é a propriedade que acontece quando você toca ou clica, fazer
alguma coisa.
Bom, não sei ainda o que fazer, vou só dar no, por exemplo, vou prover e vou adicionar
um estilo para esse item da lista.
Vou botar aqui, vou criar um styles, stylesheet.create, passo um object com os estilos.
As como eu estou usando stylesheet, touchable opacity, importe do react nether.
Touchable opacity, stylesheet, oh, shit, sheet.
A linha ainda não está mais de 80 caracteres, então eu não vou fazer isso, se quiser fazer
isso, não vou fazer não.
Ah, tá bom, on press.
Ah, vou botar um padding, não padding, margin, talvez.
Vamos ver margin, aqui é item, item style, pode ser assim, sei lá.
Vamos ver, margin, se eu quero botar um espaço entre os itens, botar uns 10 para ver o que
acontece.
Item style, vou adicionar ao, talvez, touchable opacity.
Antes do on press, style vai ser styles.itemstyle.
Vamos ver como aparece.
Loading, tá aí, melhor agora.
Agora a gente sabe que cada um desse é um touchable opacity, desculpa.
Vê que você vê que já aparece o negócio, onde eu clico.
Sei lá, vamos ver aqui.
Você vê que aparece, onde eu clico.
Só, legal.
Se você quiser adicionar mais estilos, próprios, por favor, faço.
Eu acho que já tô, ah, mais uma coisa, não dá para ver todos os itens, só talvez
vou adicionar para a lista, um dest.
Talvez um scroll view, talvez, vamos botar um scroll view aqui, só para, de verde view
ou post scroll view, tá bom?
Scroll view, vou, volta aqui, em verde view, vou importar scroll view, para a gente poder
scroll scroll view, permite você scroll scroll view, para rodar, rolar aqui.
Tá melhor, agora, o negócio que está aparecendo aqui, não tem margem no topo, para a lista.
Talvez eu adicione isso.
Nem para a lista é para o app, né?
Vou adicionar, maior de topo, 15 talvez, 15.
Eu adicionei maior de topo, view do app, para poder aparecer.
É, sem ser lá, tá aí, tá bom?


0004-13 Botão de Toque com o TouchableOpacity e Definição de Estilo com o StyleSheet do React Native

A Próxima Tela para Ver Mais Detalhes Sobre um Post – Aula de React Native e Redux

# Resumo do Transcript

Antes de continuar, solicitou-se apoio para o canal do YouTube **NBK Tutor** e demais redes sociais associadas (Twitter e GitHub como **NBK, HO, PE, NBK Hope**).

### Principais Pontos:

- O aplicativo está funcional tanto no **iOS** quanto no **Android** (emulador).
- Foi adicionado um estilo que melhora a visualização de cada item da lista.
- O projeto utiliza um componente container para a lista, com itens individuais como subcomponentes.
- O próximo passo é criar uma nova cena, que inclui um título e conteúdo.
- Haverá uma navegação entre as cenas a ser aprendida posteriormente.
- O foco imediato é desenvolver o componente de detalhes do item da lista.
- Sugere-se o nome "item detail" ou "post" para o novo componente, discutindo a escolha entre classe ou componente funcional do React.

Antes de continuámos, eu gostaria de contar com seu apoio para continuar a fazer vídeos.
Por favor, subscreva o meu canal no YouTube,
NBK Tutor,
também de todas as redes sociais como
NBK, HO, PE, NBK Hope,
no Twitter, tanto como no Twitter,
como no GitHub, mesmo usuário,
NBK, HO, PE, NBK Hope.
Então, vamos continuar.
A gente tinha
uma aplicativa aqui,
está funcionando tanto como no iOS.
A gente já adicionou um estilo para ficar melhor de ver cada
item da lista, também funciona no Android aqui,
no emulador.
E se a gente voltar para o Wireframe,
a gente fez essa lista.
A gente tem uma list,
que é o componente container para toda a lista,
e tem cada item da lista como um outro componente.
Agora, vamos fazer essa outra aqui,
essa outra cena com esse componente aqui.
Então, vai ter o título
e vai ter o conteúdo, não é?
Então, vamos lá.
Depois que a gente fazer esse aqui,
a gente vai aprender como conectar essas duas cenas
para o meio de uma navegação, tá bom?
Então, vamos fazer o componente
detalhes do item da lista.
Eu vou chamar talvez
detalhes do item,
deixa eu criar um arquivo aqui dentro da parte de componentes.
Talvez eu só chame item detail
ou eu posso chamar post,
detalhes do post.
Tanto faz, você escolhe o nome e vamos lá,
post detail.
Então, vamos fazer o coisa que a gente sempre faz
para criar um novo componente do React.
Aquela questão,
vai ser classe ou vai ser funcional?


0004-14 A Próxima Tela para Ver Mais Detalhes Sobre um Post – Aula de React Native e Redux

Rascunho da Página de Ver Mais Detalhes com um Componente React de Classe

# Resumo do Transcript

O apresentador está discutindo a criação de um componente de classe chamado `PostDetail`, que será conectado ao estado da aplicação usando o Redux. Ele planeja usar a função `connect` para integrar os dados necessários do Redux, assim como foi feito anteriormente com um componente de lista.

## Passos Principais:

1. **Escolha do Componente de Classe**:
   - O componente `PostDetail` será uma classe que se conecta ao estado da aplicação.

2. **Uso do Redux**:
   - O apresentador menciona que terá que usar um *Action Creator* chamado `Fat Post` para fazer uma requisição e obter os dados dos posts através de um `PostReducer`.

3. **Criação do Componente**:
   - Importações necessárias do React e React Native são feitas.
   - O componente `PostDetail` é declarado extendendo de `Component`.

4. **Renderização Inicial**:
   - Antes de conectar o Redux, o apresentador renderiza um layout básico com placeholders para o título e o conteúdo do post.

5. **Verificação da Função de Renderização**:
   - O próximo passo é garantir que o `PostDetail` apareça corretamente na tela, então ele modifica o `app.js` para renderizar `PostDetail` ao invés da lista.

6. **Visualização**:
   - Ele confirma que, até o momento, o componente está funcionando corretamente mostrando o título e o conteúdo.

7. **Próximos Passos**:
   - O apresentador indica que agora prosseguirá para conectar o componente ao Redux.

---

O componente foi criado e renderizado sem problemas, e o próximo passo será a integração com o estado gerido pelo Redux.

Então vou escolher o componente de classe porque a gente vai conectar os dados que
vai ser necessário desse componente ao application state do Redux, então vou ter que usar aquela
função chamada connect. Se você olhar aqui vai ter o título e o conteúdo, então vou
ter que pegar esses dados do Redux, do mesmo jeito que a gente fez com lista aqui, quando
o componente da lista montou, a gente dá um Fat Post que é um Action Creator que vai dar esse
request e no final vai dar PostReducer, vai conectar o estado inicial que o estado com
todos que vai ter todos os posts, do mesmo maneira a gente vai fazer isso aqui, então vamos voltar
para PostDetail e começa a import, React vai ter o componente também, React, agora vamos
declarar o nome do componente PostDetail, ExtendsComponent, Deriva da Component e depois export
default, PostDetail, vai ter connect, do mesmo jeito que a gente tinha, se você voltar pro list, a gente vai ter que fazer
a mesma coisa assim para conectar o map state to props, então eu vou voltar aqui, não vou
conectar ainda, só quero fazer render do postDetail para ver se aparece na tela, então todo componente
tem a função render que é definida para retornar o template e como conseguir essa
apresente, essa visão ao usuário, então nesse caso a gente vai ter, vamos só pôr um view, como eu estou usando
view, tem que importar, import view, destruturar do module do React Native e vai ter o título,
vamos botar um texto, título do post, só botar um placeholder, só para agora e vai ter o conteúdo,
está usando o texto, vamos adicionar aqui, text, salvar, está bom, agora, uma gente
vai ter os detalhes expostos, a gente vai ter que obter os detalhes de algum local, então vai ser da application state
da Redux Store, do Redux, como é que já vai fazer isso, deixa eu só ver se o componente vai aparecer na tela,
vou colocar aqui para meu app.js e em vez de lista vou botar o postDetail, só para ver se está funcionando,
aqui vou importar esse postDetail, eu estou usando o comando D, no meu caso o Mac, para selecionar as coisas ao mesmo
tempo, duas coisas, postDetail, salvar, vamos ver lá para o aplicativo, vai, está funcionando, título e conteúdo,
então a gente fez o componente, está tudo ok, a gente pode prosseguir para fazer, conectar ao Redux,


0004-15 Rascunho da Página de Ver Mais Detalhes com um Componente React de Classe

Estado Inicial para o Reducer, Connect do Componente React ao Redux e componentDidMount

# Transcrição Resumida

Neste segmento, o autor está ajustando o `post reducer` para incluir tanto todos os posts (`all`) quanto o post que está selecionado (`selected`). Abaixo estão os principais pontos discutidos:

## 1. Estrutura Inicial do Estado
- Define um `initial state` que inclui:
  - `all` (todos os posts, inicialmente um array vazio).
  - `selected` (o post que é selecionado, inicialmente `null`).

## 2. Comportamento ao Selecionar um Post
- Ao clicar em um post, o componente `post detail` é montado e um `action creator` é chamado para buscar o post específico via HTTP com base no ID fornecido.
- Os dados obtidos da API serão usados para renderizar o conteúdo do post.

## 3. Conexão com Redux
- Utiliza a função `connect` do `react-redux`:
  - O primeiro argumento é `mapStateToProps`, onde o estado é passado como argumento.
  - Retorna as propriedades que devem ser disponibilizadas ao componente `post detail`, especificamente o post selecionado.
  
## 4. Renderização do Componente
- No método de renderização, verifica-se se o post está definido.
  - Se não estiver definido, exibe uma mensagem de carregamento.
  - Se estiver definido, exibe o `title` e o `body` do post.

## 5. Uso de Desestruturação
- Desestruturar o `props` para simplificar o acesso a `title` e `body`.

## 6. Configuração do Action Creator
- Um `action creator` chamado `fetchPost` é definido para fazer o pedido HTTP e retornar a ação com os dados do post.
- Utiliza a biblioteca `axios` para realizar requisições de forma mais robusta.

## 7. Conclusão da Implementação
- O `fetchPost` é então conectado a propriedades do componente.
- O `id` do post será passado como uma propriedade para o componente.

### Exemplo de Código

```javascript
// Definição do estado inicial
const initialState = {
  all: [],
  selected: null,
};

// Conector Redux
const mapStateToProps = (state) => ({
  post: state.post.selected,
});

// Action Creator
export const fetchPost = (id) => {
  return (dispatch) => {
    return axios.get(`/posts/${id}`).then((response) => {
      dispatch({ type: 'FETCH_POST', payload: response.data });
    });
  };
};
```

Este resumo captura as principais mudanças e o fluxo lógico do que foi discutido na transcrição.

Vamos voltar aqui no post de tail, vamos no post reducer.
Vou só dar uma ajustada aqui, porque se você se lembra a gente tem um all né, pra mandar todos os posts.
Mas a gente também precisa do selecionado, do post que tá selecionado.
Então o que eu vou fazer? Eu vou definir uma variável aqui chamada initial state.
E vai ser na verdade esse cara aqui, que a gente pôs aqui em vez de seu objeto vazio, eu vou mudar e vou pro initial state.
Que vai ser a coisa que a gente tiver aqui.
Inicialmente vou botar all, e posso botar no, pode botar um array, inicialmente, esquisar.
E vou botar selected.
Pra esse cara vai ser o post que força vai ser na hora quando a gente clica e ir pra post de tail.
Então aqui o semi call.
Então application state agora tem pro post reducer tem all que são todos os posts e tem o selecionado, selected.
Que inicialmente é no, mas vai ser ajustado quando a gente entrar no post de tail.
Então a maneira que eu vou fazer é quando a gente clicar no um dos itens, vai chamar, vai montar esse componente post de tail e no component dead mount.
A gente vai chamar um action creator que vai fazer um pedido HTTP pro back end pra pegar o post específico.
Dependendo do id que for dado.
E depois esse cara vai renderizar com os dados que foram obtidos depois de pegar a resposta do pedido.
E pra conectar os detalhes do redux state a gente vai usar o selected.
Então a gente vai ter acesso a ver, ponto props, ponto selected.
Tá bom? Dentro do post de tail.
A gente pode mudar esse nome também, se quiser.
Então vamos lá.
O pôndo de mount, estou no post de tail agora.
Eu quero fazer this fetch post e vou dar um id que ainda não sei ainda.
Tá bom? Alguma forma de id.
Butanol, mas depois a gente vai ver como passar o id de um componente pro outro.
Aí depois, des, vamos assumir que vai injetar um props aqui no render.
Mas vamos dar o connect aqui.
Connect, post de tail.
E pra usar o connect aqui em portar, connect to react redux.
Tá bom?
E o primeiro argumento do connect é o map state to props que a gente vai definir.
O segundo é map dispatch to props, mas eu vou escrever depois.
Então vamos lá.
Map state to props.
O som de flash sempre tem o que?
Tem o state como argumento pro map state to props.
E a gente retorna as propriedades que a gente quer que sejam disponibilizadas dentro do componente post de tail.
Nesse caso, eu select, né?
Vai ser state.q.
Vamos olhar no post reducer.
A gente definiu state no index aqui, desculpa.
No index do post reducer.
Definiu como uma chave chamada post.
Então, voltando ao post de tail.
State.post.
Vai pro reducer do post.
Quer ficar aqui?
E o initial state, definindo aqui, mostra que a gente vai ter o selected.
Que eu ainda não fiz aqui no caso, mas eu vou fazer depois de a gente configurar o post de tail.
Então vamos voltar.
Vai ser selected.
Tá bom?
Então vai ser disponibilizado o post que está selecionado.
Agora, você pode mudar esse nome se não quiser chamar des.props.selected.
Eu vou botar post para ficar melhor, talvez.
Melhor de entender.
E com isso, a gente pode usar aqui dentro do render o des.props.post.
Esse cara vai estar conectado ao estado do redux.
E no mesmo jeito, aqui des post.props.selected.
E esqueci, vai ser body e vai ser title.
Se eu olhar esse cara aqui, de novo, vou no navegador para ver a resposta da API.post.
Nesse caso, eu tinha que dar um id, por exemplo, id1.
Aí vai retornar tudo isso e tem o title e tem o body.
Tá bom?
Voltando ao post de tail.
Desprops.post.title.desprops.body.
Agora, você pode fazer um cheque aqui.
Se o post não estiver definido, você pode retornar alguma coisa, loading, carregando, por exemplo.
Entendeu?
Ou pode botar um spinner, uma imagem que fica rodando.
Tem também um componente do react-nade chamado Activity Indicator, que já dá um spinner para você.
Mas eu não vou falar disso nesse vídeo.
Quero deixar as coisas simples aqui, vamos aqui.
Então, se o post não estiver definido, só retorna carregando.
Se estiver definido, pode retornar, viu?
E eu faço isso porque se você não tiver isso aqui, ah, esqueci do return, né?
Palavra chave.
Porque se o post não estiver definido, vai dar, por exemplo, no, ou undefined, vai dar eu.
Isso não está definido.
Tito não está definido. Body não está definido. Por isso que eu bó isso.
Tem também uma maneira de definir as props por padrão usando o default props.
Que eu não vou fazer agora, mas depois talvez eu faça.
Vamos lá. Você note que eu estou digitando isso muito, muitas vezes.
Então, o que é que eu vou fazer? Vou dar um Destructory.
E vou chamar o title.
E o body, vou tirar de dentro do des props post.
Então, eu não preciso mais dizer esse cara.
Tá bom?
E esse aqui eu também pode tirar o post, se quiser.
Aí fica assim.
É meio esquisito.
Se quiser fazer assim.
Você escolha o que quiser. Tá bom?
É só para não digitar menos coisas.
Tô.
Agora carregando, vamos lá.
Conectado o Maps to the props.
E a gente tem um index, post reducer.
Por padrão, vai dar no, né? Para o selector.
Então, se a gente executar agora o recarregar a aplicação,
eu acho que só vai dar carregando, porque o post vai estar indefinido.
E esse cara vai dar erro porque não sabe que é isso aqui.
Então, vamos definir esse action creator.
Para ter acesso ao action creator dentro do componente, a gente tem que injetá-lo.
Ingentá-lo a propriedades usando o Maps to the props aqui, né?
Nesse caso, eu quero te mostrar um ataque de um atalho, né?
Eu não quero mais digitar Maps to the props, do mesmo jeito que eu fiz na lista aqui.
Você nota que eu fiz a função e chamei o bind action creators só para dar esse cara.
Então, tem um atalho.
Vou voltar o post de details.
Só preciso fazer isso.
Passa um objeto.
Fala que o Fat post é a Fat post.
Mas o que é esse cara? A gente tem que importar.
Vamos lá no topo.
Importar.
Import.
Fat post.
Vamos...
Não está definindo ainda, mas eu espero que a gente esteja definido dentro do index do actions, né? Aqui.
Então, vou botar um level, um nível acima dentro do actions.
Como já é o arquivo chamado index, não precisa digitar.
Tá bom, eu não defini ainda, mas vamos definir depois.
Então, esse cara aqui, que foi distriturado do actions, é esse cara aqui.
E a gente está passando ele como um an.
Chave, extensio objeto, que vai ser a propriedade aqui no props, né?
Dentro do componente.
Esse cara.
Então, esse cara aqui é esse aqui.
E esse aqui é o atalho para você fazer o map dispatch to props, sem precisar definir a função e chamar o bind action creator.
Só mandar um objeto como segundo o argumento do connect.
Tá bom?
E como a gente está usando a versão JavaScript S6, se a chave da propriedade for o mesmo do valor, você não precisa digitar duas vezes, só remover.
É a mesma coisa, tá bom? Isso, mesma coisa disso.
Tá bom?
Então, vamos salvar.
E agora, vamos definir esse action creator.
Criador de ações, né?
Index, vou definir export const, vai exportar ao mesmo tempo que eu defino esse fat post.
A gente vai pegar o ID como argumento.
E eu esqueci de botar o sinal igual, né?
Primeira coisa que a gente faz é fazer o pedido HTTP.
Faça... faz o pedido HTTP e depois retorna a ação, né?
Como é que a gente vai fazer esse, cara?
Vamos dar um const definir o variável e chamar o request, vou dar um axios, a mesma coisa do Ajax ou fat.
Quase a mesma, né?
Mais pra mesma... dando o mesmo, no final, mais diferente.
Gosto usar axios porque é melhor que o fat, em termos de se der erro no axios vai dar no cat.
Algumas vezes, se usa fat, parece um erro, mas não vai pro cat, vai pro then.
Aí confunde tudo.
Vou dar um get, simplesmente, um ponto simples, request o rl como o outro.
Barra post, barra o id agora, tá bom?
Esse detalhe tem que ser o específico.
E o semicolon.inv.
Porque a gente quer fazer o pedido pra essa rota aqui.
E depois, a gente tá usando redux promise, né?
Então não precisa fazer negócio de promise e fazer o then e não sei o que, é só mandar a action com o tipo.
Da ver fat, post no singular, payload vai ser o request.
Por causa do redux promise, esse request que é, na verdade, uma promessa.
Onde a promessa ser resolvida, o redux promise vai enviar, despachar essa action com payload,
que vai ser na verdade a resposta, depois que a promise ser resolvida.
Vai vir a resposta.
Por causa do redux promise.
Bom.
Definimos o action creator, já vai ser disponibilizado, já está disponível para o post detail aqui.
Quando a gente dá um import, vamos conectar a propriedades do componente,
Injetando como o despach, map despach props e vai ter aqui, finalmente, podemos chamá-lo.
Agora, tá não, a gente vai aprender, ter que dar o id.
E eu espero que o id seja também injetado como props para esse componente.
Então, já vou antecipando esse negócio e vou botar a vez props.
E pode falar id ou pode falar post id, você escolhe o nome da variável.
Tá bom?


0004-16 Estado Inicial para o Reducer, Connect do Componente React ao Redux e componentDidMount

Teste, Debug e Continuação da Implementação do Componente de React para Ver o Post

```markdown
# Resumo do Teste do Post

## Análise do Erro
O teste do post iniciou com a injeção da propriedade `ID`, mas ocorreu um erro:
- **Erro**: `UnexpectedToken, expectedSemicolonIndex.js, linha 17 coluna 30`
- **Causa**: Uma falta de importação da biblioteca `Flasher`.

**Solução Proposta**:
- Remover a lógica que causava `Cannot read title of null`. O problema foi identificado na renderização do post, onde o valor inicial do post estava como `null`.

## Correção do Estado
1. O estado `selected` estava como `null`, impedindo o acesso às propriedades do post.
2. Sugestão: Certificar-se de que o post está definido antes de acessá-lo, usando uma verificação condicional.

## Implementação do Redux
- Para atualizar o estado no reducer:
  - Chamar o `FEDPOST` com o `ID` necessário.
  - Despachar a ação que retorna para todos os reducers.
  - Adicionar um `case` no POST reducer para tratar a ação específica `FEDPOST`.

**Observações**:
- Sempre retornar um novo objeto no reducer para garantir a imutabilidade do estado.
- O estado não deve ser atribuído diretamente.

## Testes e Estilização
Após implementar as correções:
- O post carregou corretamente, mostrando os detalhes, embora sem estilo.

### Adição de Estilo
- Criar um estilo para o título:
  ```javascript
  titleStyle = {
    fontSize: 20,
    fontWeight: 'bold'
  };
  ```

- Implementar uma folha de estilos utilizando `StyleSheet` do React Native.

## Próximos Passos
- Conectar as cenas para permitir a navegação.
- Implementar a funcionalidade ao clicar em um item da lista para redirecionar para o post detalhado.

O código e a lógica parecem estar em um bom caminho, e o próximo foco será a navegação.
```

Agora vamos lá, vamos testar esse post de teus para ver se não tem erros.
Eu vou voltar para o app e a gente já tem um post de teus, mas a gente vai injetar a propriedade ID, né?
Eu vou botar talvez um, vamos ver.
Pode adicionar isso.
E vou para...
Falarizar... Ah, deu erro.
UnexpectedToken, expectedSemicolonIndex.js, linha 17 coluna 30.
Então vamos lá, do Actions, né?
17 coluna 30.
Ah, eu esqueci da Flasher.
Está aí.
Salvar...
Cannot read title of null, no render do post de teus.
Vamos lá.
Post de teus, render, not read title of null.
Ah, eu sei por que.
Por isso que fazendo esse negócio aqui estava meio...
Então, inicialmente, o post vai ser null, né?
Vai ser sempre null nesse caso.
Ou não, a gente não fez a ação aqui, está passada, mas não está...
Não modificou o estado no post reduce ainda.
Mas o problema é que inicialmente, selected está null.
Então é passado como a props para o post de teus, aqui, como essa propriedade chamada post.
E quando vier aqui, vai dar champagne post do desert props.
E nesse caso, vai ser null.
Aí quando você faz esse cara, vai dar null, né?
Vai dar null aqui.
Então, daí eu pau.
Então, o que a gente vai fazer?
Uma maneira, a gente só remover isso.
Ou eu posso mudar e pôr aqui.
Aí está fácil.
Solução foi fácil.
Só botar para o final, depois desse cara.
Porque antes, a gente não sabe se o post está definido.
Mas se esse cara aqui, se passar desse F, se não der certo,
significa que o post está definido.
Então, a gente pode acessar a variável.
Então, vou salvar.
Dá um refresh.
Qualizando.
Carregando.
E essa expectativa de estar carregando, porque a gente não...
O post está sempre null, né?
Nunca passa.
Por que? Porque a gente não modificou o estado dentro do reducer.
Então, vamos fazer isso?
Como a gente chama o FEDPOST?
Passe o ID, o ID, faz o pedido.
Pega a resposta, manda a resposta payload.
E despacha a ação com FEDPOST.
Mas vai para todos os reducers, né?
Você se lembra que no redux, quando a gente chama Action Creator,
o Action Creator retorna uma Action,
e essa Action é despachada a todos os reducers.
Então, dentro dos reducers, eles têm que ter um case, dar um switch,
e ter que dar um case no caso de que o reducer quiser fazer algo com a ação,
quiser responder essa ação.
Nesse caso, esse reducer só se importa com FEDPOST.
Não se importa com FEDPOST singular.
Então, a gente tem que adicionar dentro do POST reducers aqui.
A gente botar um case, FEDPOST, singular,
para lidar com aquela ação que foi despachada pelo FEDPOST.
Nesse caso, voltando a POST reducer,
no caso que eu pegar essa ação, o que é que eu vou fazer?
Eu vou retornar o estado como estava,
pega todas as propriedades do state e põe nesse novo objeto,
e passo também o selected, que vai ser o action.payload.data.
Porque você se lembra que o redux promise vai passar como o payload da action,
o response, e dentro do response, tem esse data.
E esse aqui é realmente o objeto que foi requerido ao servidor backend.
Esse que aparece no navegador aqui, essa JSON.
É o response.data.
Tá bom?
Vamos salvar.
Só um detalhe que eu não expliquei antes.
A gente sempre retorna um novo objeto.
Por um novo estado.
A gente nunca faz isso aqui.
A gente nunca define o estado de novo usando o sinal de igual.
Porque a gente quer que seja... Desculpa aqui.
O estado tem que ser imutável.
Tá bom?
A gente sempre tem que retornar um novo objeto, um novo estado.
Nunca define o estado de novo.
Sempre retorna um novo estado.
Então um detalhe.
Agora vamos ver.
Vamos testar.
Então deu carregando e apareceu os detalhes do post.
Não sei o que é título, não sei o que é conteúdo,
mas porque não tem estilo, mas funcionou.
Então vamos só adicionar esse estilo só para ficar melhor.
Vou a post de tail.
Eu quero que o título aqui tenha um estilo.
Vou criar um style.
Tital style.
Como eu estou adicionando esse estilo,
vou criar uma folha de estilos.
Aqui.
Styles.
Tem que ser o nome desse cara.
Vou usar um style sheet.
Passe um objeto com folha de estilos.
Um anda chave, style ou style.
Esse cara aqui.
Eu vou botar um font size, talvez 20.
Fonte weight.
Negrito.
Tá bom?
Agora se você notar, eu estou usando style sheet.
Então tem que importar.
Aqui react native, style sheet.
Tá bom? Importa o style sheet do react native.
Tá aí. Carregando e desse cara.
Se quiser adicionar esse estilo para o body também,
style.
Body style.
Adicione aqui.
Vírgula. Não se esqueça.
Body style.
Se aumentar a fonte, fonte size, talvez 14.
Vamos ver o que acontece.
É, mudou nada?
16.
Ah, tá melhor.
16.
Se quiser adicionar mais estilo, por favor.
Eu não vou focar nisso agora.
Então vamos continuar.
O que a gente deve fazer agora?
A gente fez o posto de tail, tá funcionando.
Tudo ok. A gente testou passando um id2.
Um, vamos passar um 3 para se mudar.
O que o que resta fazer?
Tá tudo ok.
É conectar as duas cenas, fazer algum tipo de navegação
que a gente, quando clicar no list,
quando clica,
vai para o post de tail.
Agora até agora,
não se esqueça.
Acontece nada.
A gente clicar.
Clica, acontece nada.
Então, na próxima sessão,
vamos ver como fazer.


0004-17 Teste, Debug e Continuação da Implementação do Componente de React para Ver o Post

Mudança de Cena com o React Native Router Flux e Conclusão

# Resumo do Tutorial de Navegação com React Native Router Flux

Neste tutorial, o autor demonstra como implementar a navegação entre duas cenas em um aplicativo React Native utilizando o módulo `react-native-router-flux`, ao invés do `navigator`.

## Estrutura do Projeto

O projeto possui principalmente duas cenas:
1. **Lista de Posts**
2. **Ver Posts**

### Instalação do Módulo

O autor começa instalando o `react-native-router-flux` com o seguinte comando:

```bash
npm install --save react-native-router-flux
```

E verifica a versão no `package.json`.

### Configuração das Rotas

1. Um novo arquivo chamado `router.js` é criado na pasta `src` para definir as rotas.
2. Um componente funcional `RouterComponent` é implementado onde são definidas as cenas:

```javascript
import { Router, Scene } from 'react-native-router-flux';

// Definição das cenas
<Router>
  <Scene key="list" component={List} title="Lista de Posts" initial />
  <Scene key="postDetail" component={PostDetail} title="Ver Post" />
</Router>
```

### Implementação da Navegação

O autor modifica o componente `List` para incluir a funcionalidade de navegação. Quando um item na lista é pressionado, a função `onItemPress` usa `Actions` do `react-native-router-flux` para navegar para a cena de `postDetail`, passando o ID do post atual como parâmetro.

### Ajustes de Estilo

Para evitar que o conteúdo apareça atrás da barra de navegação, o autor define um estilo de `paddingTop` no `Router`.

```javascript
<Router sceneStyle={{ paddingTop: 65 }}>
```

### Recapitulando

O autor enfatiza que o funcionamento do `react-native-router-flux` é semelhante ao `react-router` na web, onde se definem as rotas de forma intuitiva. Os pontos principais incluem:

- Definir rotas para cada cena no `router.js`.
- Utilizar `Actions` para navegar entre as cenas.
- Adicionar padding para que o conteúdo não se sobreponha à barra de navegação.

### Conclusão

O autor encerra o vídeo agradecendo aos espectadores e mencionando que o futuro do curso incluirá funcionalidades de CRUD (Create, Read, Update, Delete) completas para o aplicativo. Ele também convida os espectadores a segui-lo nas redes sociais para mais atualizações.

Para dúvidas, sugestões ou feedback, os espectadores são incentivados a deixar comentários.

Agora a gente vai ver quando conectar essas duas cenas, lixo de posts com ver posts, os detalhes desse post.
Em vídeos anteriores eu demonstrei como usar o componente chamado navigator para fazer navegação usando no react native, mas...
Esse caso eu não vou usar o navigator, eu vou usar o módulo chamado react native router flux.
E a gente vai usar esse cara aqui, react native router flux.
Vou usar para que fica bem mais fácil fazer navegação e também muito intuitivo.
Tudo que a gente precisa fazer é definir um roteador e definir cada cena.
Nesse caso a gente só tem duas cenas, essa cena, lixo de posts e essa outra cena ver posts.
Então é como se fosse muito parecido com o react router para o react para o web.
Quase a mesma coisa, mas eu vejo falar route, fala scene e toda cena vai ter uma aqui para identificar a rota.
Para a gente quando poder chamar a função para mudar de rota, a gente só precisa chamar a função com o nome dado pela key.
Nesse caso vai ser login component para essa scene, vai ser esse cara e dar um título.
Esse título aqui vai aparecer na barra do topo.
Quando você for navegador tem a hora, tem o carrier e vai ter uma barra aqui com o título dado pela sua propriedade.
E nesse caso nosso wireframe vai ser essa lista de posts e vai ser esse ver posts.
E esse botão de volta vai ser fornecido pelo react native router flux por padrão.
Então fica muito mais fácil, nem precisa fazer nada que já vai aparecer o botão de voltar.
Se essas duas cenas forem parte do mesmo nível e começar na lista de posts e adicionar a nova cena ver posts e dá para voltar.
Então vamos lá, vamos navegador.
Vou instalar npm, install, dash dash save, react, native, router flux, flux.
Vai dar o react native router flux, vamos verificar o meu package JSON.
Aqui vai adicionar o react native router flux para mim as dependencies.
Norte que eu estou usando versão 3.37 e para versões for maiores quando dá o npm install sempre está a última versão.
Então to me cuidado com isso porque pode ter uma nova versão lançada e as coisas podem mudar.
E essa versão que estou usando agora pode não mais funcionar, pode dar alguma coisa para mudar.
Então fique ligado, estou usando 3.37.
Quando voltando aqui eu já te instalei, vou criar um arquivo dentro da minha parte src chamado router.js.
Nesse arquivo a gente vai definir as nossas rotas.
Primeiro vou fazer um componente chamado router component, vou importar o react, vou fazer um componente funcional,
react from react, nome do componente vai ser router component, por favor adicione component,
porque só router vai confundir com o componente router que é parte do module do react native router flux.
Então adicione essa palavra component, faz uma função aqui, define a função e exporta esse componente.
Dentro da função retorne template, criamos um componente chamado router e a gente só vai fazer o router
e define as cenas, scene, dentro do router.
Esse router aqui é o router do importado do react native router flux, tá bom?
Então vai precisar desse router e também vai precisar do scene.
Toda a cena tem aqui, esse aqui é o nome da função que será chamada para mudar de cena, mudar para essa cena.
Nesse caso a gente tem duas cenas, tem a lista de posts, tem a ver posts, vou chamar essa lista somente list.
Vamos definir esse cara aqui, chamar de list, qual é o componente, vai ser o list, a gente vai importar depois e qual é o título.
Nesse caso eu vou usar o título lista de posts como está aqui no wireframe.
Ok, e termina o componente.
Note que eu preciso importar a lista, na verdade eu já fiz isso no app, vou voltar para o app.js
e eu já tenho aqui na verdade, esse import que a gente fez no app, do list e do post de tail, vou é cortar, não precisamos mais.
E vou colar dentro do router aqui, tá bom?
Então você importe todos os componentes, porque precisar aqui, nesse caso já tem um list.
E vamos fazer outra cena agora para o post de tails, fazer outra cena.
Adiciona aqui, vou chamar post de tail, esse vai ser o nome da função que a gente vai chamar para mudar para essa rota.
Componente, vai ser o post de tail, esse cara aqui, que a gente já importou.
E o título vai ser ver post, do jeito que está no wireframe do nosso rascunho aqui, ver post, esse cara aqui.
Então, só isso que preciso fazer aqui.
E note que o primeiro cena definido vai ser a inicial, se você quiser definir explicitamente, podem botar in a shell.
E nem que você mude de posição, vai ser sempre esse cara inicial.
Se não tiver essa palavra, esse cara iria ser o inicial.
Pode testar aí.
Vou continuar, tá bom?
Vou botar isso para lá, voltar, tudo ok.
Agora volto para o app e vou importar esse componente aqui.
Em vez de falar essa view e essas todas as coisas, eu vou botar o router.
Mas o que é router? Temos que importar, vamos voar aqui.
Vou aqui, import router, tá no mesmo direitório, app e router.
Então vou escrever router.
Tá bom, agora vamos ver o que é que deu.
Estualizando.
Parece o list de posts.
Note que tem essa barra aqui com o título que foi dado a cena, nesse caso, list de posts.
Mas eu acho que tem uma coisa atrás disso.
Se você dá um rolagem aqui, note que está escondendo.
O conteúdo está escondendo atrás da lista de posts, da barra aqui, né?
Para resolver isso, eu vou para o router, vou definir uma propriedade,
adicionar a propriedade para o router chamado scene style
e passo o objeto com estilo.
E esse estilo é só botar um padding top 65.
Por que eu usei padding?
Se eu botar margem, essa barra vai para baixo, eu não quero a barra que vai para baixo.
Eu quero o conteúdo que está dentro, que vai para baixo.
Eu quero botar um padding da maneira que ocupa um espaço em branco e depois o conteúdo.
Então esse cara vai aparecer mais ou menos aqui, quando eu adicionar aquele padding,
em vez de ficar atrás do list de posts.
Vai ficar assim.
Então vou salvar.
Note que no app eu só botei o router que remove aquela vio que a gente tinha, tá bom?
Então dá uma atualizada.
Agora não tem nada mais atrás.
Santo, o que, não sei o que, não tem nada a se esconder, tá bom?
Verificar o Android.
Vou dar rr para atualizar a KD.
rr.
Sonando.
Vamos atualizar.
KD, rr.
rr.
Tá, também tudo ok aqui, nada ficou atrás.
Agora a gente precisa, quando clicar, ir para outra cena.
Vamos ver como fazer isso.
Vamos lá para o last item.
Esse cara aqui.
Então você note que o on press do touchable opacity não tem nada.
Faz de conta que tem uma função agora chamada on item press, tá bom?
A gente vai chamar essa função e é dada como propriedade, on item press.
Mas quem vai passar essa propriedade, essa função, vai ser o list, né?
Cadê o list?
P list.
Vou para o list, componente.
E aqui no list item, quando está criando, vou adicionar on item press, vai ser o que?
Vai ser 10.on item press, que eu vou definir em um momento, tá bom?
Vamos lá.
On item press, define esse cara.
E o que eu quero fazer?
Quando eu clicar, eu quero mudar de cena.
A gente, para mudar de cena, usa o chamado actions.
Esse object com o nome daqui, qual é daqui do ver post?
Post detail, né?
E chama como se fosse uma função, né?
É uma função.
Vai no rarush só para confirmar.
Está aqui.
Key post detail, chama como uma função.
E é só isso.
Vai mudar de cena.
Muda de cena para post detail.
Agora tem que importar esse cara do react-native-router-flux, né?
Vamos aqui.
Import actions destruturar dentro do modelo react-native-router-flux.
Vamos ver, testar.
Avegador.
Vou ficar aqui.
Você vê.
Vou voltar aqui Google Chrome.
Clico.
Mudou de cena.
Tá bom?
Tem um botão de voltar já for necido.
E tem o ver post novo título.
Voltar, vamos ver outro.
Key-ast esses.
Voltar, não sei o que.
Mas fica só carregando.
Por quê?
Porque a gente não passou a id do post.
Se leva a gente tem que injetar como a propriedade o post id.
Então, vamos fazer isso.
Então, no list item aqui, você note que a gente vai passar o id do post para essa função.
Qual id?
Está dentro do objeto item, né?
Vamos fazer item.id.
Salva.
Volta para a definição da função que está dentro do list.
Vamos adicionar o argumento id.
E quando a gente chamar para a nova cena, a gente passa um objeto que é as propriedades,
que serão passadas a um novo componente.
Nesse caso, quero post id para ser esse id aqui, que foi dado.
Vamos salvar.
Vamos ver se funciona agora.
Clicar, carregando aí.
Deu certo.
Diferente que é esse.
Este é um tempore vitae.
Não sei o que.
Magna uti herrum yure.
Não sei o que.
Tá funcionando.
O tocou.
Ele ficou Android.
RR.
Carregando, tudo ok.
Tudo ok, né?
Só para recapitular, a gente define todos os nossos rotos no arquivo chamado router.js.
A gente define o que é chamado scenes.
Esse aqui é muito parecido com o modo react-router para o react-web.
Em vez de ter scenes, a gente fala route, no react-web.
Muito parecido.
E adicionar o scene style para o conteúdo não aparecer atrás da barra.
Do header, né?
E define todas as cenas.
Cenas tem um aqui, tem um componente, tem um title.
E se quiser, inicial, adicione inicio.
E para mudar de cena, simplesmente chamem actions.wiki, a chave da cena.
Se quiser passar a prop, só passar um bichete.
Não se esqueça de importar tudo do react-router flux e destruturar.
Então, gente, completou nosso aplicativo.
Esse aqui.
Tudo ok.
Nosso reducers, as ações.
Isso fica, tudo legal.
A gente só dá um recapitular no redux.
Então vai ter o aplicativo, normalmente, dentro desse componente, você chama o action creator.
O action creator, que é injetado usando o map dispatch to props.
E esse action creator é uma função que simplesmente retorna uma ação.
E essa action é despachada para todos os reducers.
Aí os reducers que se importarem pela ação vão mudar o estado, vão retornar o novo estado.
E esse novo estado é conectado ao aplicativo através do map state to props.
Então, a gente sempre vai ter disponível, via os props, o estado e o action creator, as funções.
Sempre assim, sempre nesse cico.
Tá bom?
Espero que tenham gostado dessa série de vídeos.
Introdução ao redux.
Se tiver alguma pergunta, por favor, deixe nos comentários.
Algumas sugestões.
E espero ver vocês nos vídeos que irem fazer no futuro.
A gente vai aprimorar os conhecimentos aqui.
A gente só fez um aplicativo usando o R do CRUD, só dá para ler.
No futuro, a gente vai aprender a escrever, dar um update, atualizar.
E também, a dela estará os records, os posts.
Então, a gente no futuro vai fazer um aplicativo CRUD completo.
Só para...
Só para me lembrar, por favor, me siga nas redes sociais, estou no Twitter e estou no GitHub.
Meu username é nbkhope, tá bom?
Aqui meu logo, nbkhope.com.br.
Muito obrigado para assistir.
NBK, tudo. Até logo. Tchau.
