在XState有限状态机中使用外部数据

Question

我正在尝试将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上下文是否有从运行时评估函数中获取值的方法？我知道，如果我想将值推入上下文中，就会有assign，但这很容易受到相同的维护问题的影响，所以当我调用state.context.itemId时，我正在寻找一种从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]
}

Answer 2

每次数据存储更改并呈现时，视图或react层都会被更新。通常，在MVC体系结构中，这些逻辑被内置到控制器中，在控制器中合并多个数据存储，并将结果数据返回给UI。在一种基于钩子的方法中，比如您如何使用，您是一个create服务，它封装了数据存储逻辑，并仅返回UI级别所需的数据。

从‘./services’导入{useCustomService}；

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