使用有限状态机在React Form组件中建模UI状态

图片由Garett Mizunaka.uns

在Ok188bet金宝搏官网cupid,我们正在为用户建立一个新的位置搜索体验,以基于国家/地区,城市名称和GPS设置自己的位置。

与位置搜索体验的早期迭代不同,支持搜索的数据不再从源代码中静态加载。新的搜索体验由来自后端的多个数据和服务来源提供,并为错误和成功案例提供更复杂的用户反馈。

是什么让新位置搜索UX复合物的前端是有很多活动部件。UI需要在仍在加载数据时管理用户输入。UI还需要基于搜索结果向用户显示反馈,并处理网络连接等各种错误条件和服务器端错误。在引擎盖下,用户在选择一个国家和键入城市名称时看到的简单形式必须与来自用户的事件协调对后端的请求。

这篇文章探讨了一种称为有限状态机(FSM)的架构设计模式,我们在OkCupid上使用它来打造一个健壮的位置搜索用户体验。188bet金宝搏官网

FSM的主要使用已经在编程嵌入式系统但近年来,FSM在其他应用中也出现了管理浏览器中的状态建模行为,建立聊天机器人.这篇文章的目的不是要宣传FSM是一个比它的替代品更好的状态管理解决方案但是,要引入一种简化系统的架构的模式,并编写可理解,可扩展的策略和编写强大的代码删除

什么是FSM?

FSM是一种架构设计模式,允许我们将大型系统建模为松散耦合组件的集合。系统中的每个组件在内部状态更改时更改其行为。

FSM由状态和状态转换组成。它可以由状态机来表示

FSM代表一个交通灯

在形式上,

  • 状态表示系统的模式,并驱动系统的输出。电灯开关有两种状态:ON或OFF。交通灯包含三个州:红色,黄色或绿色。FSM中有一个有限数量的州。每个FSM都有一个初始状态,这是系统首次启动时系统的状态。
  • 状态转换是基于当前状态和系统输入的从当前状态到下一个状态的规则。

如果我们将React组件建模为FSM,则系统输入由用户、服务器或组件的调用者从外部提供。这些事件包括按钮单击或从服务器收到特定响应等事件。系统的输出是JSX(即呈现的内容),因为这是组件最终返回的内容。

模拟为FSM的React组件的输入和输出

状态的转换必须是互斥的。这意味着一个给定的输入不能导致过渡到两种状态。这确保了系统的确定性行为。

一个由几个国家组成的组成部分

您可能已经有过使用组件状态构建React组件的经验,例如insloading.就像被禁用确定如何呈现。这些是有状态组件的示例,其可以用具有二进制状态的简单FSM建模的。让我们在一个具体示例中将简单的状态反应组件建模为FSM,以应用于FSM的信息。

假设我们正在建立组件来自反应钩子文件.在任何给定的时间,该组件显示三个消息之一“Loading…”,“Online”和“Offline”。

组件状态isOnline准确地确定要呈现和初始化的消息并更新到“在线”或“离线”使用

isOnline让我们储存三个UI状态:加载,离线,在线。

我们可以把渲染基于ui状态反而。

状态转变发生在handlestatuschange.,在每次渲染时触发,因为使用没有第二个理由。

setUiState (nextUiState)负责根据系统输入(即,地位从ChatAPI)。

我们的系统输出是我们想要呈现的消息,即直接来自UiStateMessageMap.我们可以这样做,因为我们的系统只能处于三种状态之一。当系统的输出完全依赖于当前状态时,我们有一种特殊类型的FSM,称为摩尔机.摩尔机器更具有确定性,但对输入变化的反应较慢粉机.在Mealy机器中,输出取决于当前的状态和系统的输入。

您构建的是Moore机器还是Mealy机器实际上取决于您的系统的需求。在下一篇文章中,我们将看到如何构建一个混合了Moore和Mealy机器的系统,该系统使用的架构是将状态驱动输出的实现委托给子组件。

具有许多州的一个组件

对于只有两种或三种状态的简单组件,一个FSM可能是多余的。实现FSM有相当多的开销(例如,定义所有UI状态和转换),而没有多少额外的好处。

对于一个由许多具有横切关注点的子系统组成的复杂系统,FSM提供了巨大的好处。

假设您有一个由多个组件组成的系统,其中一个组件需要禁用,而另一个组件正在加载,并且这两个组件的输出决定了第三个组件的输出。

交叉组件依赖性可能导致组件的紧密耦合,并使封装难以测试,并且系统难以测试。

188bet金宝搏官网,我们已经建立了这样的组件(< LocationSearch >),它允许您指定一个国家和一个查询词(邮政编码或城市名称)来查找世界上任何地方的位置。在考虑到该组件必须处理的所有边缘情况之前,这看起来相当简单。

  • 该组件使用一个API进行接口,该API提供最匹配国家和查询搜索项的位置对象数组。根据这个数组的长度,组件可以显示一条成功消息、各种错误消息和另一个选择UI,通过从一个最佳匹配列表中进行选择来消除搜索的歧义。
  • 该组件的奖金特征是,如果它在移动设备上使用,则有一个按钮可让您使用GPS位置(纬度和经度)自动找到自己。同一API接受GPS位置作为输入并响应位置数组。
  • 组件需要处理客户端输入验证错误,如无效的邮政编码和网络错误。
  • 此外,该组件可以安装一个预加载位置(需要在国家下拉框中反映出来)、邮政编码/城市名称输入,以及组件首次安装时立即收到的成功消息。

如果你看到这个设计规格在Jira票,它可能看起来有点压倒性。有很多逻辑需要实现。但是把所有的功能需求都预先准备好实际上是一件好事——它使我们能够更全面地考虑这个组件的设计,并选择一个能够有效地管理这个组件的所有复杂性的架构。

枚举所有UI状态

与设计师在一个跨职能团队中工作的一个好处是,在开始执行之前,您就获得了所有的模拟。这些模拟可以用来设计架构。

由于这是一篇关于使用FSM进行UI State建模的文章,您可能已经看到了它的到来。我们将为每个mock分配一个UI State,它表示运行中的组件的快照。

每个州的Locationsearch输出

这些图像描绘了每个状态的系统(用户看到的)的输出。让我们来看看不同州的输出中的共同之处。这将为我们提供如何分开我们的想法< LocationSearch >组件进入子系统。

  • 在SUCCESS状态下会显示所有的错误状态。文本颜色取决于状态。
  • 在SUCCESS状态、disambigation状态和所有的错误状态下,在输入的旁边会显示一个图标(复选标记和感叹号)。
  • 在除了LOADING之外的所有州,国家下拉菜单、查询输入和地理位置搜索按钮(标签为“USE CURRENT LOCATION”)都是启用的,并接受用户的输入。

通过将特定于状态的输出的实现委托给这些组件,我们能够进行转换< LocationSearch >进入一个由松散耦合组件组成的系统,这些组件通过UI State进行协调。我们正在封装FSM< LocationSearch >的父组件< LocationSearch >不知道此组件中UI状态的实现。

现在我们已经定义了每个状态的状态和输出,我们将指定状态转换。

国家过渡

和我们在在前面,我们将实例化uiState作为一个组成状态< LocationSearch >和变异uiState在一个使用.下一个的评价uiState将在辅助功能中完成getUiState.使下一个状态求值显式的优点是getUiState我们将能够分离计算的关注点吗什么时候从…的关心中提出什么来呈现。

召回状态机可以表示为一个有向图,状态转换是节点之间的边。这就是我们的FSM应该有的样子。

FSM代表LocationSearch

PENDING状态是初始状态< LocationSearch >第一个安装。由于组件可以安装有预加载的位置,因此有一个箭头直接从待定状态到成功状态。我们还可以通过向服务器提供国家/地区+查询或将GPS位置提供给服务器来达到成功状态。

通过客户端输入验证达到error_not_zip_code状态,不依赖于服务器请求的结果。另一方面,只有在向服务器提出请求后才达到所有其他错误状态。

结论

在此帖子中,我们了解了FSM是什么以及如何将复杂的反应组件建模为通过UI状态协调的松散耦合子系统的系统。FSM允许我们构建一个可理解,可扩展的强大的系统和删除

我们已经看到了一些使用React原语的例子,比如useestate.使用.有类似JavaScript库xStateMachina.js这为创建,解释和执行有限状态机和StateChart提供了更具自融合的框架。

虽然FSM是一种强大的设计模式,但对于项目来说并不总是正确的事情。当建筑设计最有效的时候,最明确的产品愿景和预期的要求,用于如何满足全用户体验。预成熟优化可能导致更糟糕的代码可维护性。幸运的是,我工作的位置搜索体验项目188bet金宝搏官网拥有良好的产品规划和清晰的设计目标,这使得分解问题和构建健壮的技术解决方案成为可能。

188bet金宝搏官网Okcupid Tech Blog.

阅读来自OkCupid工程团队的故事,每天连188bet金宝搏官网接着数百万人

小云杨

写的

基于纽约的软件工程师。目前在Okcupid。188bet金宝搏官网我的网站和博客:https://xiaoyunyang.github.io/

188bet金宝搏官网Okcupid Tech Blog.

188bet金宝搏官网OkCupid的工程团队负责每天为数百万人配对。在OkCupid科技博客上阅读他们的故事188bet金宝搏官网

小云杨

写的

基于纽约的软件工程师。目前在Okcupid。188bet金宝搏官网我的网站和博客:https://xiaoyunyang.github.io/

188bet金宝搏官网Okcupid Tech Blog.

188bet金宝搏官网OkCupid的工程团队负责每天为数百万人配对。在OkCupid科技博客上阅读他们的故事188bet金宝搏官网