anteriorpróximo
Aula 16
Cursos / Introdução ao Redux com o React Native
Estado Inicial para o Reducer, Connect do Componente React ao Redux e componentDidMount

Summary

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

// 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.

Scroll down above for more

Video Transcript

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?
See more
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação:
Quero contribuir