xstate：如何将状态初始化为特定节点？

Question

我有一个多步骤表单，基本上包含以下基本步骤：select services -> contact -> billing。当用户更改他们所在的步骤时，我显示进度条并发出事件，这是我当前使用 xstate 的基本模式：

const formMachine = new Machine({
  id: 'form-machine',
  initial: 'selectService',
  context: {
    progress: 0,
    pathname: '/select-service',
  },
  states: {
    selectService: {
      entry: assign({
        progress: 0,
        pathname: '/select-service',
      }),
      on: {
        NEXT: 'contact',
      }
    },
    contact: {
      entry: assign({
        progress: 1 / 3,
        pathname: '/billing'
      }),
      on: {
        PREVIOUS: 'selectService',
        NEXT: 'billing',
      }
    },
    // ... there's more actions but that's the gist of it
  }
});

这是可视化效果：

在我的反应组件中，我观察该服务的变化，pathname以便我可以推送历史记录

function SignupFormWizard() {
  const history = useHistory();
  const [state, send, service] = useMachine(formMachine);

  useEffect(() => {
    const subscription = service.subscribe((state) => {
      history.push(state.context.pathname);
    });
    return subscription.unsubscribe;
  }, [service, history]);

  // ...
}

然而，问题是：每当我重新访问一条路线（例如，我直接导航到/billing），它会立即带我回到/select-service。这对我的代码来说是有意义的，因为初始状态和订阅都会这样做。

我将如何在特定节点初始化状态机？

Answer 1

useMachine钩子接受第二个参数，它是一个配置对象。在此对象中，您可以使用statekey 设置状态，但您必须自己构造状态，它看起来像这样：

let createdState = State.create(stateDefinition);
let resolvedState = formMachine.resolve(state);
let [state, send, service] = useMachine(formMachine, {state: resolvedState});

在我看来，当您需要恢复持久状态时，它效果很好，但stateDefinition从头开始手动创建太麻烦了。

您可以做的是创建初始状态并选择您想要实际开始的位置：

initial: {
  always: [
    {
      target: "selectService",
      cond: "isSelectServicePage",
    },
    {
      target: "contact",
      cons: "isContactPage",
    },
    {
      target: "billing",
      cond: "isBillingPage",
    },
  ],
}

然后，当您启动计算机时，您所要做的就是设置初始上下文值：

let location = useLocation();
let [state, send, service] = useMachine(formMachine, {
  context: { pathname: location.pathname },
});