0

我正在与 Nextjs 一起使用 xstate。现在我被困在某个地方。

import { assign, createMachine, interpret } from "xstate";

export interface toggleAuth {
  isAuthenticated: boolean;
  user: {
    name: string | undefined;
  };
}

// console.log(getCachedData());

export const authMachine = createMachine<toggleAuth>({
  id: "auth",
  initial: "unauthenticated",
  context: {
    isAuthenticated: false,
    user: {
      name: undefined,
    },
  },
  states: {
    authenticated: {
      on: {
        toggle: {
          target: "unauthenticated",
        },
      },
      entry: assign({
        user: (ctx) => (ctx.user = { name: "Pranta" }),
        isAuthenticated: (ctx) => (ctx.isAuthenticated = true),
      }),
    },
    unauthenticated: {
      on: {
        toggle: {
          target: "authenticated",
        },
      },
      entry: assign({
        user: (ctx) => (ctx.user = { name: undefined }),
        isAuthenticated: (ctx) => (ctx.isAuthenticated = false),
      }),
    },
  },
});

const service = interpret(authMachine);
service.onTransition((state) => console.log(state));

所以我在看文档。根据他们的说法，每当我从未经身份验证过渡到经过身份验证以及从经过身份验证过渡到未经身份验证时，它都应该在控制台为我记录下来。但事实并非如此。它只做一次。这里发生了什么事。另外，这样定义我的机器可以吗？提前致谢。

4

1 回答 1

2

它没有记录，因为你没有改变状态；从未发送任何事件。

请重新阅读有关分配给的文档context- 您正在改变上下文而不是分配新值；分配者应该永远是纯粹的。

如果你想看到状态变化，你需要toggle在这种情况下发送一个事件：

service.send('toggle');

此外，不需要isAuthenticated; 这是多余的，因为该状态由state.value机器的有限状态 ( ) 表示。

于 2020-12-04T14:30:54.123 回答