Взгляд в Redux Store мобильной версии Twitter

Оригинал статьи ^[1]

Если вы все еще не знаете, мобильная версия Twitter’а написана на новом стеке веб-технологий, состоящего из React и Redux.

Услышав эту новость, я подумал, что было бы не плохо покопаться в ихнем Redux хранилище и посмотреть как они в том аде организовали все твиты в двереве состояния.

Чтобы посмотреть на Redux store вам нужно установить React Developer Tools (RDT) в Chrome. После этого, из вкладки RDT выберите корневой елемент приложения и введите в вашу консоль следуещее:

// $r это сокращение которое ссылается на выбранный в RDT элемент
$r.store.getState();

Спасибо Wes Bos ^[2] за то что твитнул подсказку выше

Вы должны увидеть выведенное в консоль дерево состояния Redux store как это показано ниже…

Я рекомендую выделить время чтобы поизучать изменения между срезами состояний.
А я сейчас собираюсь покопаться в entities/tweets и homeTimeline. Эти две части store’а хранят большую часть данных о твитах.

Вся детальная информация о твитах хранится в entities/tweets/entities в виде нормализированной таблици даных где каждый ключь – id, а значение – объект твита. Я развернул первый твит из списка, так что вы можете посмотреть его содержимое.

Ваш Twitter таймлайт представлен в homeTimelines/timeline срезом состояния. Порядок в таймлайне следует порядку в массиве, где элемент с индексом 0  –  это первый елемент в вашем таймлайне. Каждый твит в ленте имеет tweet id, который совпадает с ключом из entities/tseets/entities. Это в значительной степени нормализует форму состояния 101 у Дэна Абрамова ^[3].

Выглядит так, будто таймлайт отслеживает твите с верху до низу, где верх = новые твиты, а низ = более старые. lastFetch.bottom и lastFetch.top содержит в себе момент времени, когда в последний раз твиты были получены для этих двух категорий. Как только появляются новые твиты, они будут загружены на верх, в то время как старые твиты будут подружаться по мере скорла вашего таймлайна.

cursor.bottom и cursor.top ссылаются на id твитов, которые в этот момент находяться на верхней/нижней позиции в таймлайне.

И на конец, еще одна интересная штука, если вы взгляните на срез entities снова, вы заметите, что в добавок к tweets у вас есть cards, lists и users. Каждый из этих четырех елементов повторяет одну и ту же структуру, и содержит fetchStatus. Он, опять же, содержит в себе таблицу даных, где ключом есть tweet id, а значением является статус загрузки. В моем случае все твиты загружены. Я могу только предпологать какие еще есть статусы, поскольку мне никогда не удавалось поставить breakpoint, который позволил бы мне посмотреть этот срез в не загруженом состоянии. Предпологая что там есть "loading" статус вы можете использовать его для следующего:

1. Убедиться, что дублирование запросов за одним и тем же твитом не происходит, если твит уже загружен или загружается.
2. Обеспечить начальную отрисовку в таймлайне без необходимости отображения полной информации о твите из entities.

Это то, что я получило сейчас…

Я призываю любого, кто интересуеться Redux покопаться в этом приложении самостоятельно, поскольку там есть очень много крутых вещей. Должен сказать, это вдохновляет, увидеть Redux в приложении такого масштаба.

Так что в следующий раз, когда вы будете спорить с противником Redux, сохраняйте спокойствие и просто направте его на этот сайт.

Автор: Наташа

Источник ^[4]