資訊專欄INFORMATION COLUMN
摘要：總結本文分析了在采用架構下的數據設計結構，在一個復雜的場景下，希望引起讀者對能有一個更深入的認識。
前幾天刷Twitter，發現Nicolas（Engineering at @twitter. Technical Lead for Twitter Lite）發布了這么一條推文：
大體意思就是Twitter前端經過重構，已經完全遷移到React＋Redux＋PWA技術棧了，后端也使用了nodeJS，實現了“前端一統天下”，lol。
聽到這個消息之后，我覺得去深挖一下Twitter的Redux store組織架構，將會非常有意思。
這對于在復雜場景下的前端數據學習，以及React、Redux數據流設計十分有意義。
因為，在Redux數據流框架的思想下，對于數據的處理和分配完全由前端掌握。
前端數據如何設計，設計的功力如何直接完全決定整個項目的開發進度以及代碼強健性，甚至還決定著頁面的性能。
本文將剖析Twitter前端數據結構層次，如果你對React技術棧不是很了解，也不妨礙閱讀；同樣，如果你對這套技術棧有興趣的話，歡迎參看我的其他類似文章：
React Conf 2017 干貨總結1: React + ES next = ?
React+Redux打造“NEWS EARLY”單頁應用 一個項目理解最前沿技術棧真諦
一個react+redux工程實例
......
歡迎關注我的主頁，更多技術文章不再錯過。
本文主體內容翻譯自Ryan Johnson的文章：Dissecting Twitter’s Redux Store，筆者進行了一定程度的拓展。
準備工作想要看Redux store的前提是你需要配有React Developer Tools (RDT)，在RDT tab中選中應用根節點。
確保選中之后，在console面板中輸入：
// $r is a shortcut that references the selected element in RDT $r.store.getState();
接下來，我們就可以看到Redux數據樹，就像圖中所示：
設計分析我建議大家花些時間對每個不同的state進行展開，并加以學習。但在這篇文章中，由于篇幅所限，我會挑選并深挖：
entities/tweets和
homeTimeline
兩個最主要也是最核心的state進行剖析。這兩個states包含了一條tweet的所有關聯數據。
一條tweet，就像下圖中我所發的：
一條tweet內容的數據信息全部存儲在entities/tweets/entities中，entities/tweets/entities可以理解為一個normalized的data table，它存儲了所有tweets推文的信息；
在這個table中，每一條tweet都是一個鍵值對類型的js object：key為該條tweet的id，value為該條tweet的數據，也是一個js object。
下圖中，我將第一條tweet展開，方便大家一探究竟：
了解了tweet存儲結構，我們接下來看一下Twitter首頁的timeline結構。
直觀上，timeline一定包含了個人主頁展示推文的信息。通過tweet id和剛才介紹過的entities/tweets/entities中的tweet相匹配,并最終加以在timeline上展示。
如下圖：
每個用戶的首頁timeline信息可homeTimelines/timeline找到。首頁timeline展示的順序，則按照timeline這個數組的順序。也就是說，timeline數組index為0的條目，就是你在首頁timeline上看到的第一條tweet；
重要的話再說一遍：
首頁timeline上的每條tweet，都有一個唯一的id，這個id和上面介紹的，存儲在entities/tweets/entities之中的tweet id相匹配。
看到這里，你也許會感嘆：
“This is pretty much normalizing state shape 101 from Dan Abramov！”
沒錯，這樣的范式也是Redux所推崇的，完全的扁平化設計帶來的開發體驗和性能提升是無與倫比的。
當然，你可能會問為什么Redux設計哲學，包括Twitter都在推崇扁平化的數據結構呢？
這個問題建議參考：Redux core concepts，這里講的非常清晰，被收錄在Redux core concepts中，強烈建議閱讀。
如果您英語吃力，可以留言與我交流，就不再展開了。
繼續言歸正傳，我們來討論一下滾動時的異步請求設計。
首頁timeline加載新tweets方式有兩種：
上拉加載 track tweets by top
下滑加載 track tweets by bottom
第一種用于拉取更新的tweets，第二種用于拉取更舊的tweets；比如你新發了一條tweet，就要上拉，方可顯示在timeline上；如果沒有最新的，向下滑動到底部后，自動加載時間上更早的tweets。
用一個等式來表達：
top = new tweets,
and
bottom = older tweets
這種情況下，homeTimelines下的lastFetch.bottom和lastFetch.top，分別為時間戳，記錄最后一次更新數據的信息(上拉和下滑)。
lastFetch.bottom: 記錄最后一次向下滑動而更新數據的信息；
lastFetch.top: 記錄最后一次下上拉取而更新數據的信息；
同時，
cursor.bottom和cursor.top值分別為一個tweet id，表示當前timeline上，最上邊和最底部分別是哪一條tweet。
cursor.bottom: 記錄屏幕最底部tweet ID；
cursor.top: 記錄屏幕最頂部tweet ID；
同時， homeTimelines里面還記錄了isLoadingDirections.bottom和isLoadingDirections.top來表示數據加載的觸發源頭。
如圖：
最后一個非常有意思的是，entities下除了存在entities/tweets之外，還分別有cards, lists and users；
entities/tweets
entities/cards
entities/lists
entities/users
來表示不同的推文特性。
當你打開這其余三項的時候，會發現這三項與entities/tweets保持在相同的結構，他們都有一個fetchStatus的data table，key為tweet id, value為加載狀態，據統計一共有一下幾種：
‘none’;
‘loading’;
‘loaded’;
‘failed’.
這幾種狀態的設置無外乎這么幾個目的：
保證在loading狀態或loaded的tweet不會再發送請求給server；
在未加載完時，可以顯示加載動畫或者展位圖；
在加載失敗時，可以顯示失敗提示或者在此請求時進行補救。
總結本文分析了Twitter在采用Redux架構下的數據設計結構，在一個復雜的場景下，希望引起讀者對redux能有一個更深入的認識。
本文主體內容翻譯自Ryan Johnson的文章：Dissecting Twitter’s Redux Store，筆者進行了一定程度的拓展。
Happy coding!
PS: 作者Github倉庫，歡迎通過代碼各種形式交流。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/82747.html
摘要：前端每周清單半年盤點之與篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。與求同存異近日，宣布將的構建工具由遷移到，引發了很多開發者的討論。 前端每周清單半年盤點之 React 與 ReactNative 篇 前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為...
前言 在若干次前的一場面試，面試官看我做過python爬蟲/后端 的工作，順帶問了我些后端相關的問題：你覺得什么是后端？ 送命題。當時腦瓦特了，答曰：邏輯處理和數據增刪改查。。。 showImg(https://user-gold-cdn.xitu.io/2019/4/24/16a4ed4fc8c18078); 當場被懟得體無完膚，羞愧難當。事后再反思這問題，結合資料總結了一下。發現自己學過的Re...
閱讀 3768·2021-11-24 09:39
閱讀 2969·2021-11-16 11:49
閱讀 2087·2019-08-30 13:54
閱讀 1111·2019-08-30 13:03
閱讀 1102·2019-08-30 11:10
閱讀 729·2019-08-29 17:10
閱讀 1256·2019-08-29 15:04
閱讀 1224·2019-08-29 13:02
