深入研究Twitter Redux存储

原文：Dissecting Twitter’s Redux Store
作者：Ryan Johnson
翻译：Vincent

译者注：本文讲述了作者使用了Chrome开发人员工具，对Redux的存储进行了分析，得出了相关的结论。以下为译文。

如果你还不知道，Twitter的移动网站已经移到了新的web堆栈（还包括了Redux React）上，那真是要恭喜你了。

在听到这个消息后，如果能够深入了解Redux的存储，看看他们究竟是如何在状态树中组织所有的推文的，应该是一件非常有趣的事。

将Twitter所有的移动网络流量（貌似有很多）都移动到了新的web堆栈上来了-Node.js，Express，React PWA。

— @necolas

注意:下文涉及到的所有的观察成果都来自于我使用Chrome devtools测试所得到的，而且对应用程序中发生的事情做了最合理的推测。

要想了解Redux存储，那你需要用到谷歌为Chrome安装的开发人员工具(RDT)，然后从RDT选项卡中选择应用程序的根元素，并在控制台中输入下面的内容。

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

感谢Wes Bos在推特上里面发布了上面这一消息。

你应该看到Redux状态树登录到控制台应该是像这样的……

建议花点时间来查看所有不同的状态片段，但是将重点研究的是entities/tweets和homeTimeline这两个状态片段。这两个部分似乎包含了大部分与tweet相关的数据。

所有的推文数据都存储在一个规范化数据表的entities/tweets/entities中，每个推文都是一个带有键值对的对象，该对象是以id作为键的，以推文作为值。我已经在列表中扩展了第一条推文，这样你就可以看到这条推文的内容了。

推特时间轴是由homeTimelines/timeline状态片段所表示的。时间轴顺序遵循数组的顺序，其中索引为0的项是时间轴上的第一项。在时间轴上的每条推文都有一个tweet id，它与entities/tweets/entities数据表的关键字相匹配。

时间轴似乎可以在top和bottom跟踪推文，其中top就表示新的推文，bottom表示旧的推文。lastFetch.bottom和lastFetch.top保存一个日期戳，它代表了这两个类别的最后一次推文。随着新推文的到来，它们将被加载到top，当你的滚动条在时间轴上向下滚动时，bottom的推文将会出现。

cursor.bottom和cursor.top引用了一个推文的id，它引用了当前持有时间轴中顶部/底部位置的推文。

最后一件有趣的事情是，如果你再看看entities片段，你会发现除了tweets之外还有cards、lists和users。当你展开扩展时，这四个项都遵循相同的结构，都包含一个fetchStatus。这里又包含一个数据表，其中的键是推文的id，而值似乎是fetch状态——在我的例子中，所有的推文都是“已经加载好的”。我只能推测其他状态是什么，因为我没有办法设置一个断点，让我可以在非加载状态下查看所有的状态。假设有一个“正在加载”的状态，你可以使用它来进行以下操作:

1. 如果一条推文已经被获取或正在“加载中”，确保同一条推文的重复请求不会被发送到服务器。

2. 允许渲染在时间轴上开始，而不需要entities的详细的tweet的有效载荷。

这就是我研究的所有成果了……

我鼓励那些对Redux感兴趣的人，当你有空闲时间时，可以自己亲自使用一下这款app，因为那里有很多很棒的东西。我必须说，看到Redux在如此规模的网络应用中被使用真是令人耳目一新的。

所以，下次如果你试图说服那些否定Redux的人，就省省口舌吧，直接把这篇文章发给他们看就行了。