在 XState FSM 中使用外部数据

Posted 2023-02-19

【中文标题】在 XState FSM 中使用外部数据

【英文标题】：Use external data in XState FSM

【发布时间】：2021-04-01 14:13:46

【问题描述】：

我正在尝试将 XState 填充到现有状态管理系统中（在 React 应用程序中），并且我正在尝试弄清楚如何表示已在旧状态管理中捕获的状态而不会重复。

import useLegacyState from 'legacy-state-system'
import useMachine from '@xstate/react'
import MyMachine from '../machine'

const MyComponent = () => 
  const [data, setData] = useLegacyState();
  const [state, send] = useMachine(MyMachine)

  .....JSX etc....

对于某些数据没有重叠，但至少在一种情况下（在屏幕上选择一个项目，导致应用程序 send(type: "SELECT_ITEM", itemId: "xyz") 并触发 setData("XYZ")），旧系统和新系统都关心该项目。 XState 被用于 UI 状态管理，但遗留系统的副作用取决于其内部状态，所以我不能只在 XState 中保存数据。

我对 XState 的理解是，我应该将 itemId 表示为 XState 上下文中的连续数据，但这会重复数据，并且我担心这会带来维护问题，因为所有开发人员都需要知道同时更新两者。 XState Context 有没有办法从运行时评估的函数中获取值？我知道有 assign 如果我想将值推送到 Context 中，但这很容易受到同样的维护问题的影响，所以当我调用 state.context.itemId 时，我正在寻找一种从 legacy-state-manager 中提取值的方法。

【参考方案1】：

如何包装 useMachine 并使用它来代替？

import  useMachine as useXStateMachine  from '@xstate/react'

export const useMachine = (machine, options) => 
  const [data, setData] = useLegacyState();
  const [state, send] = useXStateMachine(machine)

  const context = new Proxy(, 
    get: (_, prop) => 
      try 
        return state.context[prop] || data[prop]
       catch (_) 
        return data[prop]
      
    
  )

  return [...state, context, send]

【参考方案2】：

每次数据存储更改并呈现时，视图或反应层都会更新。通常在 MVC 架构中，这些逻辑内置在控制器中，其中多个数据存储组合在一起，并将结果数据返回给 UI。在您使用的基于钩子的方法中，您可以创建服务，将数据存储逻辑包装在其中并仅返回 UI 级别所需的数据。

从“./services”导入 useCustomService；

const MyComponent = () => 
  const [uiData, updateUI] = useCustomService();