могу ли я иметь разные значения в разных состояниях в xstate

У меня много такого кода:

export const getNodeShapeSize = ({
  scaleToFit,
  compress,
  expanded
}: {
  scaleToFit: boolean;
  compress: boolean;
  expanded: boolean;
}): number => {
  if (scaleToFit) {
    return ShapeSizes.full;
  }

  if (compress && !expanded) {
    return ShapeSizes.preview;
  }

  return ShapeSizes.expanded;
};

Мне было интересно, могу ли я очистить это с помощью xstate? Я мог бы иметь 3 состояния

scaleToFit
compressed
expnded

Пока у меня это:

export const treeMachineConfig = Machine({
  strict: true,
  id: 'treefsm',
  initial: TreeSFMActionTypes.Unkonwn,
  states: {
    unknown: {
      on: {
        scaleToFit: 'scaledToFit',
        compress: 'compressed',
        expand: 'expanded'
      }
    },
    scaledToFit: {
      on: {
        compress: 'compressed',
        expand: 'expanded'
      }
    },
    compressed: {
      on: {
        scaleToFit: 'scaledToFit',
        expand: 'expanded'
      }
    },
    expanded: {
      on: {
        scaleToFit: 'scaledToFit',
        compress: 'compressed'
      }
    }
  }
});

Но где будут лежать ценности? Поместил бы я их в контекст?


xstate
person dagda1    schedule 11.05.2019    source источник
comment
Не могли бы вы уточнить, что вы подразумеваете под ценностями? Вы имеете в виду, что узел дерева, который вы смоделировали, будет иметь такие свойства, как ширина или высота, или свойство, такое как узел, где значением будет другой узел, образующий рекурсивную структуру.   -  person TameBadger    schedule 08.06.2019

Ответы (1)


arrow_upward
1
arrow_downward

Да, вы бы поместили их в context (документы ????), и это выглядело бы как это:

import { Machine, assign } from 'xstate';

export const treeMachineConfig = Machine({
  strict: true,
  id: 'treefsm',
  context: {
    width: 0,
    height: 0
  },
  initial: TreeSFMActionTypes.Unkonwn,
  states: {
    // ...
    compressed: {
      // Just an example: set to this size whenever 'compressed' state is entered
      entry: assign({ x: 10, y: 10 }),
      on: // ...
    },
    expanded: {
      entry: assign({ /* ... */ }),
      on: // ...
    }
  }
});
person David Khourshid    schedule 10.06.2019