首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

使用 Redux 实现时间旅行-1

使用 Redux 实现时间旅行-1

Redux 时间旅行回想一下,Redux 使用对象来表示状态,并使用纯函数计算下一个应用程序状态。这些特征使 Redux 成为了一个可预测        的状态容器,这意味着如果给定一个特定应用程序状态和一个特定操作,那么应用程序的下一个状态将始终完全相同。这种可预测性使得实现时间旅行变得很容易 —        能够在应用程序以前的状态中前后移动,并实时查看结果。图 2 演示了这一特性,其中给出了图书搜索应用程序的最终版本。
图 2. 状态历史和撤销/重做
在应用程序的最终版本中,页面顶部的控件组件包含一个历史滑块,和前移和后移时间的箭头。此外,页面底部有一个显示当前应用程序状态的状态查看器组件。
图 3 展示了如何通过操作应用程序的箭头和滑块,在应用程序以前的状态中移动。
图 3. 时间旅行
从图 3 中的顶部图片可以看到,搜索 Dr. Seuss 图书之前,我搜索了 border collie。从该图片和图 3 中中间的图片可以看到,我删除了          border collie 文本,键入了 seuss 并按 Enter        键,然后搜索开始。中间的图片显示了该搜索期间的应用程序。底部的图片显示了应用程序的最新状态,历史滑块图标始终位于右侧。
图 3 中的屏幕截图不太明显,但随着您拖动滑块的图标,可以看到文本 border collie 变成 border        colli,然后变成 border coll,随后变成 border        col,等等,直到该文本字段变为空的。然后,随着继续拖动滑块的图标,您会看到文本 s,然后是 su,然后是          sue,直到看到 suess。实际上,您可以向前和向后时间旅行,至少从您应用程序的角度讲是这样。
现在您已看到它的实际效果,我将介绍如何使用 Redux 实现时间旅行。
返回列表