Resumo do Vídeo

No vídeo de façado nós definimos o estado inicial para o postform reducer que tem o título e o conteúdo de um post que vai ser adicionado. Vamos clicar em clicar no novo post. Deixe eu atualizar isso. Voltando ao nosso wireframe. Estamos aqui nessa cena. Vamos ter uma caixa de texto para o título e para o conteúdo. Note que o conteúdo tem múltiplas linhas. Nós vamos usar o componente chamado text input do reactdiv. Tem também o botão de ok que vai fazer um pedido. Http create. Post né. Para fazer o novo post. Volta a cena anterior. Voltando aqui. Dessa aqui é a documentação do reactdiv. Todos anos. Vestão 36 nesse vídeo. Só. Note cheese. Pode ser que já tenha a versão mais avançada quando você estiver assistindo. Então. Não se esqueça. Vestão 36 que eu estou usando. E basicamente vai ser o teste input com duas props. As props básicas. Um e o value dele. Vai ser um componente controlado que é chamado no y. Voltando aqui. Como é que vai acontecer o negócio? Vou para o Comme post new dentro da pasta component da pasta src. Então a gente vai ter o text input. E quando você digitar alguma coisa vai chamar a função change text. Essa função, o change text, vai chamar um action creator. Isto é, vai chamar a função e essa função retorna uma ação. O tipo de ação vai ser uma ação que modifica o formulário. Nesse caso, para o primeiro campo, vai ser o modificar o título. Vamos focar só em um. E depois que a gente aprende a modificar o título, vai ser a mesma coisa para o conteúdo, ou seja, o body. Certo? E quando a gente chamar o action creator, retorna essa ação, que tem o tipo de modificar o formulário, o título. Modificar o título. Vai lá no reducer, reducer vai ver que é a ação do tipo modificar o título. Vai pegar isso e retornar ao novo state. O novo state vai ter o título que você digitou. E esse cara aqui vai se tornar a coisa que você digitou. Entendeu? Por isso que esse cara aqui, o título, que é injetado no maps.t2props, que vai definir o value desse cara. Na verdade, o desktop.props.tidal vai definir o valor do hashtag input. Certo? Certo? Porque o maps.t2props está conectando o application state, estado do aplicativo, postform, formulário, os dados do formulário que é o título e o conteúdo. Certo? Então, para a função aqui, onChangeText, vamos criar uma função desse. OnTidalChange. Certo? Vamos aqui criar onTidalChange. Nessa função aqui, a gente vai chamar a cria. Não criamos ainda, mas eu vou, por exemplo, vou dar o nome de change. ChangePostTidal, por exemplo. Com o título, você editou. Certo? Com um argumento aqui. Esse cara vai chamar esse cara, que chama o action creator. ChangePostTidal, que ainda não definimos, mas esse cara vai retornar a novação, que vai lá para o reducer. E o reducer vai retornar ao novo estado com um novo título. Certo? Agora, vai ter problema com o bind aqui? Vamos ver. Vamos dar um console log para ver se esse cara funciona. Título modificado com esse title aqui. Vamos ver se funciona. Salvar... Ah, esse cara não está definido, então vamos importar aqui. TextInputToReactNative. Dá um refresh. Não tem caixa de text, porque não tem nenhum estilo. Vamos aqui quebrar a linha. Fica melhor de ver. Vamos botar height. Vamos botar height 40, para ver se que acontece. Se dá para ver alguma coisa. Está vendo aqui. Você da not que digitei alguma coisa? Cadê o meu debugger? Vou abrir o debugger aqui. Ah, vou vender aqui. Eu não defini apostar ou undefine, então vamos lá voltar. Só comentar isso. Desculpa. Vamos ver o console aqui. Você da not que eu digitei? A tecla que eu digitei aparece, modificado no seu key, mas ele volta para ficar vazio porque está conectado o valor ao título do Redux, do application state, que é sempre vazio. A gente tem que achar uma maneira de quando a gente mudar o texto, vai mudar esse cara dentro do estado do Redux. Para isso a gente vai fazer esse cara aqui. Vamos definir esse change, post title. Vamos lá para o index, do actions, ações, barra index, vamos lá para baixo, fazer uma função, change post title, ações de flash. O argumento vai ser o título, title, que na verdade é o texto que você digita, e vamos retornar uma ação. Return. O tipo vai ser o quê? Vamos chamar de change post title. Você pode nomear como quiser. payload vai ser o título, certo? Esse cara manda essa despachação, o reducer tem que pegar, dar um case aqui, change post form. Se o reducer ver que essa ação foi despachada, ele vai retornar um novo estado, um object. Copia o estado anterior, copia as propriedades do estado anterior usando o spread operator, operador de spread, vai copiar cada um desses caras. E define o novo nova chave aqui, novo valor para coisa, para o título. Desculpa, esse aqui é change post title. E nesse caso, title vai ser a coisa action.payload. Certo? Eu usei payload aqui, mas você pode usar título também. Depende de você, eu gosto sempre de usar payload, mas não precisa de ser payload para coisas que você envia ao reducer. Então, title vai ser action.payload. Vamos testar, voltando aqui, salvar tudo. Clica novo. Clica novo. Change post title, and define. Por que? Eu não injetei como props o change post title usando o map dispatch props, não tem nada aqui. Certo? Então, vamos retornar o quê? Change post titles. Vamos injetar change post title dentro como props para o componente. Na hora de que eu vou usar esse aqui, vai ser importado lá em cima. Como tem o mesmo... O propriedade de valor tem o mesmo nome, eu vou deixar assim. Vou lá em cima importar. Change post title. Da onde? Pronto. O nível acima, dois pontos. Barra actions. Como o arquivo já é index, é opcional digitar index, não precisa. Vamos ver. Será que eu mandei esse cara aqui? Map dispatch está aqui e não funcionou. O que será? Dois ler propriedade de valor.