Redux
181
State
State
存放于一处统一管理的想法并不疯狂。事实上,我们在上一章中就是这么做
的。我们将它存放于应用程序的根组件上。在纯
React
或者
Flux
应用中,比较推荐的做
法是将
State
尽量存放在少数几个对象中。在
Redux
中,这是一条规则。
2
当你听到必须将
State
存放在一个地方时,可能会觉得那是个不合理的需求,特别是
当你需要管理多种数据时。接下来看看如何在一个包含多种数据的应用程序中实现
这个目标。我们将会考察一个社交媒体应用程序,其
State
分布于不同组件中(见图
8-1
)。该应用程序本身包含用户的
State
。所有的短信都存储在上述
State
之中。每条
短信包含自己的
State
,所有帖子都存放在
posts
组件中。
8
-
1
:组件包含自己的StateReact应用程序
2
Redux Docs,
Three Principles
(http://bit.ly/2mJ0U4Y)
182
8
类似上述结构的应用程序可能会运行良好,不过随着程序规模的增长,管理应用程序
的整体
State
可能会变得愈加困难。考虑到每个组件都将使用其内部的
setState
方法来
改变自身的
State
,可能了解更新命令源也会变得很麻烦。
哪些短信被转发了?哪些帖子被阅读了?为了了解这些细节,我们必须深入组件树,
向下追踪独立组件中的
State
Redux
通过要求用户将所有
State
数据存储在单个对象,简化了我们在应用程序中查
State
的方式。我们需要了解的应用程序信息都在一个地方:真实单一数据源。我
们可以使用
Redux
通过将所有
State
数据移动到单个位置来构造相同的应用程序(见图
8-2
)。
8
-
2
Redux要求用户必须把所有State数据存放在单个不可变对象中
在社交媒体应用程序中,可以看到我们是通过相同对象管理当前用户、短信和帖子的
State
的。这个对象存储的信息甚至包括哪些短信正在被编辑,哪些短信被转发了,以
及哪些帖子被阅读了。这些信息是从包含
ID
和引用特定记录的数组中获取的。所有短
信和帖子都被缓存到了
State
对象中,因此数据就在那里。
通过
Redux
,我们将
State
管理和
React
完全剥离,
Redux
将会管理这些
State
Redux
183
在图
8-3
中,我们可以看到社交媒体的
State
树。从图中可知,我们有若干短信在一个
数组中,类似的情况还包括主题帖子。我们需要的所有数据都植根于一个对象:
State
树。单个对象中的每个键表示
State
树的一个分支。
8
-
3
State树示例
在构建
Redux
应用时,用户首先需要考虑的事情就是
State
树。尝试在单个对象中定义
State
。使用一些占位符数据草拟一个
State
树的
JSON
示例是一个非常好的习惯。
让我们再次回顾一下颜色管理器程序。在这个应用程序中,我们将会获取每种颜色存
储在数组中的信息,以及这些颜色应该如何存储的信息。我们的
State
数据的示例将会
和示例
8-1
类似。
示例
8-1
:颜色管理器应用程序
State
示例
{
colors: [
{
"id": "8658c1d0-9eda-4a90-95e1-8001e8eb6036",
"title": "Ocean Blue",
"color": "#0070ff",
"rating": 3,
"timestamp": "Sat Mar 12 2016 16:12:09 GMT-0800 (PST)"
},
{
"id": "f9005b4e-975e-433d-a646-79df172e1dbb",
"title": "Tomato",
"color": "#d10012",
"rating": 2,
"timestamp": "Fri Mar 11 2016 12:00:00 GMT-0800 (PST)"

Get React学习手册 now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.