Um momento
Aula 25
Cursos / CRUD com o Redux (e React Native)
Conexão do PostEdit ao Redux e Valores Iniciais do Formulário

Summary

# Resumo do Transcript

## Edição de Post

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

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

## Próximos Passos

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

Até lá!

Video Transcript

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