Image for post
Image for post
Twitter e Redux — Um caso de amor e ótimo exemplo de uso!

Redux em larga escala — Mexericando a nova stack do Twitter!

Se você já não sabe, o novo site mobile do Twitter está com uma nova stack, que inclui React e Redux!

Depois de ler a novidade, eu pensei que seria divertido analisar de perto a redux store utilizada pelo Twitter e ver como eles organizam todos os tweets no estado global.

Nota: Todas as observações aqui são experimentos realizados no Chrome DevTools e são apenas uma opinião de “eu-acho-que-funciona-assim” sobre a nova stack do Twitter, nada aqui é oficial.

Vamos olhar a nova redux store do Twitter, vamos precisar do Redux Developer Tools (RDT). Vamos abrir o DevTools e ir direto na aba do RDT e selecionar o elemento root da aplicação e escrever o seguinte no console:

// $r é um atalho que referência o elemento selecionado no RDT
$r.store.getState();

Você vai poder observar a estado global do redux, mais o menos assim:

Image for post
Image for post

Eu recomendo você reservar um tempo para brincar com os diferentes pedaços do estado global. Eu vou focar no objetos entities/tweets e homeTimeline. Esses dois pedaços parecem conter a maioria das informações relacionadas ao nossos tweets.

Todos os detalhes de um tweet estão guardados em entities/tweets/entities em uma tabela de dados normalizada onde cada tweet é um objeto com o ID sendo a chave e toda a informação do tweet como valor. Eu expandi o primeiro tweet da lista para podermos ver com mais detalhes:

Image for post
Image for post

A timeline do seu Twitter é representada por homeTimelines/timeline. A sua timeline segue a ordem do array, onde o item de index zero é o primeiro item da sua timeline. Cada tweet na timeline tem um tweet.id que combina com a chave em entities/tweets/entities. Isso é, basicamente, normalização de dados 101 (ou seja, básico/introdução) apresentada por Dan Abramov (viu como essas coisas não são bobeira!?)

Image for post
Image for post

Parece que a timeline segue um padrão top para bottom, onde top = novos tweets, e bottom = tweets antigos. A lastFetch.bottom e lastFetch.top guardam um timestamp que representa o último momento que tweets foram buscados para essas categorias. Os novos tweets serão carregados no top enquanto no bottom ficam os tweets mais antigos quando você navega até o final da página.

O cursor.bottom e cursor.top referenciam um id de tweet, que apontam para o primeiro e o último tweet da sua timeline.

Image for post
Image for post

Por último, mas não menos importante, se olharmos em entities novamente, vamos perceber que temos cards, lists e users. Todos eles seguem a mesma estrutura de normalização de data, até mesmo fetchStatus.

Esse último, contém um objeto onde a chave é um id de twwet com os valores do estado do fetch — no meu caso todos os tweets estão marcados como loaded. No momento, só posso supor que deve haver outros estados como loading, mas ainda não fui “feliz” o bastante para ter essa experiência :). Assumindo que temos um estado de loading, podemos imaginar os seguintes cenários:

Image for post
Image for post

Por hora, é tudo isso que eu mexeriquei!

Eu recomendo a todos interessados em Redux, a darem uma mexericada nesse novo app do Twitter. É um ótimo caso de uso. É animador ver Redux sendo usado em um app desse tamanho.

Da próxima vez que você estiver engajado a usar Redux e algum derrotista estiver tomando seu tempo. Prenda a respiração, conte até três e simplesmente mostre o novo site do Twitter! 😉

Créditos

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store