0

我按照 github.com/carloslfu/use-machine 上的简单示例为 xstate 有限机器创建了我的第一个示例，但遇到了以下打字稿错误：

Argument of type '{ actions: { sideEffect: () => void; }; }' is not assignable to parameter of type 'MachineOptions<TContext, TEvent>'.
  Type '{ actions: { sideEffect: () => void; }; }' is missing the following properties from type 'MachineOptions<TContext, TEvent>': guards, activities, services, delays, updater

这是我的代码：

import { MachineConfig, assign } from "xstate";
import { TCreateContext } from "use-machine";

export type TContext = {
  counter: number;
};

export type TSchema = {
  states: {
    Off: {};
    On: {};
  };
};

export type TEvent = {
  type: "Tick";
};

const incAction = assign<TContext>(context => ({
  counter: context.counter + 1
}));

export type TMachine = TCreateContext<TContext, TSchema, TEvent>;

export const machineConfig: MachineConfig<TContext, TSchema, TEvent> = {
    initial: 'Off',
    context: {
      counter: 0
    },
    states: {
      Off: { on: { Tick: { target: 'On', actions: [incAction, 'sideEffect'] } } },
      On: { on: { Tick: { target: 'Off', actions: incAction } } }
    }
  }

而不是我只是在组件中调用它

const machine = useMachine<TContext, TSchema, TEvent>(machineConfig, {
  actions: {
    sideEffect: () => console.log('sideEffect')
  }
})

知道我错过了什么吗？

链接到github上的问题。

4

1 回答 1

0

正如carloslfu在 github 上链接的那样，为了完成，这里是一个工作示例：

import { MachineConfig } from 'xstate';
import { useMachine } from 'use-machine';

enum SimpleStateNameWithSideEffect {
  OFF = 'OFF',
  ON = 'ON'
}

interface SimpleStateSchemaWithSideEffect {
  states: {
    [SimpleStateNameWithSideEffect.OFF]: {};
    [SimpleStateNameWithSideEffect.ON]: {};
  };
}

enum SimpleActionWithSideEffect {
  ACTIVATE = 'ACTIVATE',
  DEACTIVATE = 'DEACTIVATE'
}

enum SimpleCallbackActionWithSideEffect {
  SWITCHED = 'SWITCHED'
}

type SimpleEventsWithSideEffect =
  | { type: SimpleActionWithSideEffect.ACTIVATE }
  | { type: SimpleActionWithSideEffect.DEACTIVATE };

interface SimpleContextWithSideEffect {
  counter: number;
}

const simpleInitialContextWithSideEffect: SimpleContextWithSideEffect = {
  counter: 0
};

const simpleMachineConfigWithSideEffect: MachineConfig<
  SimpleContextWithSideEffect,
  SimpleStateSchemaWithSideEffect,
  SimpleEventsWithSideEffect
> = {
  id: 'switch',
  initial: SimpleStateNameWithSideEffect.OFF,
  states: {
    [SimpleStateNameWithSideEffect.OFF]: {
      on: {
        '': {
          target: SimpleStateNameWithSideEffect.ON,
          actions: [SimpleCallbackActionWithSideEffect.SWITCHED]
        }
      }
    },
    [SimpleStateNameWithSideEffect.ON]: {}
  }
};

然后你将如何在你的组件中使用它：

  const machine = useMachine(
    simpleMachineConfigWithSideEffect,
    {
      actions: {
        [SimpleCallbackActionWithSideEffect.SWITCHED]: () =>
          console.log('sideEffect')
      }
    },
    simpleInitialContextWithSideEffect
  );

给那些偶然发现的人的注意，useMachine 现在也作为一个钩子包含在@xstate/react库中，有关更多信息，请查看 github 上的包或官方文档页面

于 2020-01-14T06:52:58.853 回答