Использовать внешние данные в XState FSM

Я пытаюсь внедрить 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 используется для управления состоянием пользовательского интерфейса, но устаревшая система имеет побочные эффекты, которые зависят от ее внутреннего состояния, поэтому я не могу иметь данные только в XState.

Мое понимание XState заключается в том, что я должен представлять itemId как непрерывные данные в контексте XState, но это дублирует данные, и я обеспокоен тем, что это создает проблему обслуживания, поскольку всем разработчикам всегда нужно будет знать, как обновлять оба одновременно. Есть ли способ для XState Context получить значение из функции, оцениваемой во время выполнения? Я знаю, что есть assign, если я хочу передать значения в контекст, но это подвержено той же проблеме обслуживания, поэтому я ищу способ извлечь значения из legacy-state-manager, когда я вызываю state.context.itemId.


reactjs xstate
person ABMagil    schedule 22.12.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Как насчет того, чтобы обернуть 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]
}
person chautelly    schedule 23.12.2020