Resumo da Aula sobre Normalização de Dados com Redux

Atenção, nessa aula nós vamos modificar o nosso estado, o formato, a estrutura, tá certo? Para poder refletir melhor o estado de aplicativos e produção, que normalmente quando você tem esses dados, a gente armazena o Redux de maneira normalizada, tá? Indexado pelo ID do recorde. E quando a gente precisar se referir a cada pedaço de informação, por exemplo, a cada banda, cada banda é um objeto. E se o objeto tem um ID, quando você tem as bandas favoritas, você não vai duplicar o dado e armazenar aquele mesmo objeto da banda no seu perfil aqui, ó. Isso não é bom ter dados duplicados, porque aí não vai ter mais o single source of truth, que é o único, como é que fala, o único fonte da verdade, né? Por isso que a gente sempre, se você se referir a outro recorde, outro recurso, você usa o ID em vez do objeto, tá? Então vamos mudar aqui esse cara. Então vai ser o seguinte. O bandas não vai ser mais o list aqui, ele vai ser um objeto. Mas vamos fazer dessa maneira aqui, olha. Então o objeto vai ser indexado pelo ID da banda. Vamos dar um ID para cada banda, tá? 181 vai ser o legião urbano, que vai ser um objeto. O ID 121, opa. E o nome aqui, legião urbano. Vai ser dessa maneira aqui. Então temos um objeto, tá? Indexado pelo ID da banda, do objeto. E temos objetos com várias propriedades relacionadas à banda 121, por que o ID você sempre vê que é o mesmo do index aqui, do índice. E o nome, etc. Então vai ser a mesma coisa para os outros, tá? Então vamos duplicar, mudar o ID para 122, por exemplo, para Red Hot aqui. 123, Fire Maiden. Aí eu vou tirar esses caras. Tá, então temos 121, 122, 123. Isso aqui se chama normalização do estado, tá? É um outro conceito, não vou falar em muitos detalhes, mas chamada normalização do estado. Você perde pensar no estado do Redux também como banco de dados. Da mesma maneira que você vai armazenar os records no banco de dados, e tem a primary key, chave principal, você vai usar a primary key aqui para indexar esses records. Eu penso em cada um desses caras como se fosse uma linha, um bro no banco de dados, na tabela. Aí você pega esse cara aqui, agora tem um problema que a gente fez, deixa eu comentar esse cara aqui, eu tenho problema agora, aquela lista que a gente vai ter não vai funcionar mais. Vai que está quebrada, se eu clicar na lista de bandas vai estar erro. Opa, né? Para poder ajeitar isso a gente vai ter outra propriedade aqui, que vai ser a lista em ordem das bandas. Eu vou dizer lista aqui, e vai ser uma lista que vai ter, em vez do objeto, vai ser só os ideias da bandas, em ordem que você quiser. Se você quiser cada uma apareça na ordem que eu pus aqui, você pode fazer 121, 122, 123, mas o que é legal sobre isso é que você pode mudar a ordem, por exemplo, 123, 122, ele vai mudar a ordem, mas esse cara aqui vai continuar na mesma, tá? Então, vou deixar na ordem que já está aparecendo aqui. Aí a gente vai pegar e fazer o que? Mapar cada ID para cada objeto, quando a gente fizer o nosso seletor lá. O seletor vai estar um pouco mais complexo, tá? Agora já melhorou um pouco, a gente vai precisar mapear essa lista aqui. Então, vamos fazer isso. Vamos lá no seletor aqui. Split, então, banda seletor. Agora, o que a gente tinha antes era bem simples, agora não vai mudar, tá bom? Vamos mudar esse cara. Como é que a gente vai pegar a lista agora desses objetos aqui, desses nomes, né? Para poder fazer isso, vou fazer o seguinte, olha aqui. A gente vai percorrer essa lista e para cada ID, a gente vai olhar nesse hash, né? E pegar o objeto e passar esse objeto de volta aqui, e gerar uma lista de objetos para cada ID. Então, vamos lá. Então, a gente vai ter o quê? Vai ter o hash, né? Bandas que já temos aqui, mas agora o problema é que esse cara vai ter... Vamos chamar bandas hash aqui. Vai ser esse cara. Então, se você pegar esse cara, vai retornar o quê? Vai retornar esse cara todo aqui. Agora, a gente tem que percorrer a lista. Então, vamos lá. State.bandas.lista e vamos mapear cada ID, vou chamar banda ID. Cada ID a gente tem que retornar o quê? Retornar o objeto corresponde, que corresponde a gente? Esse ID. Mas como é que acessa esse objeto? Note que o banda hash, se você der uma propriedade, o ID, ele vai retornar o quê? O objeto que corresponde ao ID. Então, a gente vai falar return. Bandas hash. O ID aqui, tá? Esse cara aqui, por exemplo, se banda ID for 122, ele vai pegar bandas hash, que captura esse cara. E vai pegar propriedade 122, que vai capturar esse cara, tá? E é o objeto e vai ser retornado, esse cara aqui vai retornar a lista desses objetos aqui. Tá bom? Salvar. Agora, vamos modificar a lista de bandas.js, porque agora, a gente... Esse cara aqui é um objeto, não é mais só um string. Então, que vai ser banda.id, e o valor vai ser banda.name. Tá? Passa. Note que eu já te já dirijo antes, se você quiser mudar a ordem, olha aqui, tem legião, red e ir, se for 123 e 122 por último, ele só vai mudar a ordem, que o iron está em segundo e red em terceiro, em vez do contrário. Então, é bem legal você poder reordenar a lista dessa maneira. Então, acho que é hora da gente dar uma pausa, o que é que a gente fez até agora. Nós pegamos, modificamos o estado aqui, do sub... subcessão aqui no estado, chamada bandas. Normalizamos, né? Essa propriedade bandas, em vez de ter uma lista de strings, a gente fez... Pegou e fez um objeto para cada banda, que isso normalmente acontece. Em casos reais, né? A gente pega, e cada recorde de ter associado a um ID único, a gente faz a normalização do estado. Significa que a gente vai manter um hash, né? Um map. Hash map aqui, que é indexado pelo ID do recorde, nesse caso, o ID da banda. E se você quiser manter uma lista, por exemplo, que a gente fez no nosso aplicativo, mostra uma lista, você tem que fazer uma propriedade separada, que contém a ordem, né? Da lista do uso. E em vez de você armazenar os objetos, você armazena os IDs que correspondem a objetos. Por quê? Porque os objetos já estão armazenados aqui. Se você for armazenar o mesmo objeto ali, em outro canto, ele não vai ser mais o mesmo objeto, vai ser objeto diferente, embora que as informações sejam as mesmas, e não vai ter mais aquela única fonte de verdade. Aí você vai ter vários problemas para poder sincronizar esses dados, por isso que a gente sempre usa o ID nessas listas. Aí a gente vai... Teve que modificar o seletor para poder mapear cada ID para um objeto real desse hash das bandas, tá? E não se esqueça do li, que a gente tem que adicionar ponto ID e ponto nome aqui. Então vamos dar uma pausa para essa aula só, e até a próxima.