摘要：總結(jié)本文分析了在采用架構(gòu)下的數(shù)據(jù)設(shè)計(jì)結(jié)構(gòu)，在一個(gè)復(fù)雜的場(chǎng)景下，希望引起讀者對(duì)能有一個(gè)更深入的認(rèn)識(shí)。

前幾天刷Twitter，發(fā)現(xiàn)Nicolas（Engineering at @twitter. Technical Lead for Twitter Lite）發(fā)布了這么一條推文：

大體意思就是Twitter前端經(jīng)過重構(gòu)，已經(jīng)完全遷移到React＋Redux＋PWA技術(shù)棧了，后端也使用了nodeJS，實(shí)現(xiàn)了“前端一統(tǒng)天下”，lol。

聽到這個(gè)消息之后，我覺得去深挖一下Twitter的Redux store組織架構(gòu)，將會(huì)非常有意思。
這對(duì)于在復(fù)雜場(chǎng)景下的前端數(shù)據(jù)學(xué)習(xí)，以及React、Redux數(shù)據(jù)流設(shè)計(jì)十分有意義。

因?yàn)?，在Redux數(shù)據(jù)流框架的思想下，對(duì)于數(shù)據(jù)的處理和分配完全由前端掌握。
前端數(shù)據(jù)如何設(shè)計(jì)，設(shè)計(jì)的功力如何直接完全決定整個(gè)項(xiàng)目的開發(fā)進(jìn)度以及代碼強(qiáng)健性，甚至還決定著頁面的性能。

本文將剖析Twitter前端數(shù)據(jù)結(jié)構(gòu)層次，如果你對(duì)React技術(shù)棧不是很了解，也不妨礙閱讀；同樣，如果你對(duì)這套技術(shù)棧有興趣的話，歡迎參看我的其他類似文章：

React Conf 2017 干貨總結(jié)1: React + ES next = ?

React+Redux打造“NEWS EARLY”單頁應(yīng)用 一個(gè)項(xiàng)目理解最前沿技術(shù)棧真諦

一個(gè)react+redux工程實(shí)例

......

歡迎關(guān)注我的主頁，更多技術(shù)文章不再錯(cuò)過。

本文主體內(nèi)容翻譯自Ryan Johnson的文章：Dissecting Twitter’s Redux Store，筆者進(jìn)行了一定程度的拓展。

想要看Redux store的前提是你需要配有React Developer Tools (RDT)，在RDT tab中選中應(yīng)用根節(jié)點(diǎn)。
確保選中之后，在console面板中輸入：

// $r is a shortcut that references the selected element in RDT
$r.store.getState();

接下來，我們就可以看到Redux數(shù)據(jù)樹，就像圖中所示：

我建議大家花些時(shí)間對(duì)每個(gè)不同的state進(jìn)行展開，并加以學(xué)習(xí)。但在這篇文章中，由于篇幅所限，我會(huì)挑選并深挖：

entities/tweets和

homeTimeline

兩個(gè)最主要也是最核心的state進(jìn)行剖析。這兩個(gè)states包含了一條tweet的所有關(guān)聯(lián)數(shù)據(jù)。

一條tweet，就像下圖中我所發(fā)的：

一條tweet內(nèi)容的數(shù)據(jù)信息全部存儲(chǔ)在entities/tweets/entities中，entities/tweets/entities可以理解為一個(gè)normalized的data table，它存儲(chǔ)了所有tweets推文的信息；
在這個(gè)table中，每一條tweet都是一個(gè)鍵值對(duì)類型的js object：key為該條tweet的id，value為該條tweet的數(shù)據(jù)，也是一個(gè)js object。

下圖中，我將第一條tweet展開，方便大家一探究竟：

了解了tweet存儲(chǔ)結(jié)構(gòu)，我們接下來看一下Twitter首頁的timeline結(jié)構(gòu)。
直觀上，timeline一定包含了個(gè)人主頁展示推文的信息。通過tweet id和剛才介紹過的entities/tweets/entities中的tweet相匹配,并最終加以在timeline上展示。
如下圖：

每個(gè)用戶的首頁timeline信息可homeTimelines/timeline找到。首頁timeline展示的順序，則按照timeline這個(gè)數(shù)組的順序。也就是說，timeline數(shù)組index為0的條目，就是你在首頁timeline上看到的第一條tweet；

重要的話再說一遍：
首頁timeline上的每條tweet，都有一個(gè)唯一的id，這個(gè)id和上面介紹的，存儲(chǔ)在entities/tweets/entities之中的tweet id相匹配。

看到這里，你也許會(huì)感嘆：

“This is pretty much normalizing state shape 101 from Dan Abramov！”

沒錯(cuò)，這樣的范式也是Redux所推崇的，完全的扁平化設(shè)計(jì)帶來的開發(fā)體驗(yàn)和性能提升是無與倫比的。

當(dāng)然，你可能會(huì)問為什么Redux設(shè)計(jì)哲學(xué)，包括Twitter都在推崇扁平化的數(shù)據(jù)結(jié)構(gòu)呢？
這個(gè)問題建議參考：Redux core concepts，這里講的非常清晰，被收錄在Redux core concepts中，強(qiáng)烈建議閱讀。
如果您英語吃力，可以留言與我交流，就不再展開了。

繼續(xù)言歸正傳，我們來討論一下滾動(dòng)時(shí)的異步請(qǐng)求設(shè)計(jì)。
首頁timeline加載新tweets方式有兩種：

上拉加載 track tweets by top

下滑加載 track tweets by bottom

第一種用于拉取更新的tweets，第二種用于拉取更舊的tweets；比如你新發(fā)了一條tweet，就要上拉，方可顯示在timeline上；如果沒有最新的，向下滑動(dòng)到底部后，自動(dòng)加載時(shí)間上更早的tweets。
用一個(gè)等式來表達(dá)：

top = new tweets,

and
bottom = older tweets

這種情況下，homeTimelines下的lastFetch.bottom和lastFetch.top，分別為時(shí)間戳，記錄最后一次更新數(shù)據(jù)的信息(上拉和下滑)。

lastFetch.bottom: 記錄最后一次向下滑動(dòng)而更新數(shù)據(jù)的信息；

lastFetch.top: 記錄最后一次下上拉取而更新數(shù)據(jù)的信息；

同時(shí)，
cursor.bottom和cursor.top值分別為一個(gè)tweet id，表示當(dāng)前timeline上，最上邊和最底部分別是哪一條tweet。

cursor.bottom: 記錄屏幕最底部tweet ID；

cursor.top: 記錄屏幕最頂部tweet ID；

同時(shí)， homeTimelines里面還記錄了isLoadingDirections.bottom和isLoadingDirections.top來表示數(shù)據(jù)加載的觸發(fā)源頭。

如圖：

最后一個(gè)非常有意思的是，entities下除了存在entities/tweets之外，還分別有cards, lists and users；

entities/tweets

entities/cards

entities/lists

entities/users

來表示不同的推文特性。

當(dāng)你打開這其余三項(xiàng)的時(shí)候，會(huì)發(fā)現(xiàn)這三項(xiàng)與entities/tweets保持在相同的結(jié)構(gòu)，他們都有一個(gè)fetchStatus的data table，key為tweet id, value為加載狀態(tài)，據(jù)統(tǒng)計(jì)一共有一下幾種：

‘none’;

‘loading’;

‘loaded’;

‘failed’.

這幾種狀態(tài)的設(shè)置無外乎這么幾個(gè)目的：

保證在loading狀態(tài)或loaded的tweet不會(huì)再發(fā)送請(qǐng)求給server；

在未加載完時(shí)，可以顯示加載動(dòng)畫或者展位圖；

在加載失敗時(shí)，可以顯示失敗提示或者在此請(qǐng)求時(shí)進(jìn)行補(bǔ)救。

本文分析了Twitter在采用Redux架構(gòu)下的數(shù)據(jù)設(shè)計(jì)結(jié)構(gòu)，在一個(gè)復(fù)雜的場(chǎng)景下，希望引起讀者對(duì)redux能有一個(gè)更深入的認(rèn)識(shí)。

本文主體內(nèi)容翻譯自Ryan Johnson的文章：Dissecting Twitter’s Redux Store，筆者進(jìn)行了一定程度的拓展。

Happy coding!

PS: 作者Github倉庫，歡迎通過代碼各種形式交流。