1

我正在尝试将 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 中，但这很容易受到同样的维护问题的影响，所以我正在寻找一种方法来从legacy-state-manager调用state.context.itemId.

4

2 回答 2

2

包装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]
}
于 2020-12-23T18:38:25.500 回答
0

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

从'./services'导入{useCustomService}；

const MyComponent = () => {
  const [uiData, updateUI] = useCustomService();
}
于 2021-11-16T22:05:32.760 回答