Question

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

User::factory(10)->hasPosts(rand(5, 10))->create();

对于一些数据没有重叠，但至少在一种情况下（选择屏幕上的项目，导致应用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"})），旧系统和新系统都关心关于项目。 XState 用于 UI 状态管理，但遗留系统具有依赖于其内部状态的副作用，所以我不能只在 XState 中拥有数据。

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

Answer 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]
}

在 XState FSM 中使用外部数据

1 个答案: