Resumo do Transcrito

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