Aula 25
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: