< 1 kb 时 状态机器 反应的钩子 :

参见用户界面文件 : 使用状态机器.js.org

• 包括:尽管体积很小,但使用状态机器的特性完成(输入/退出回调、守卫过渡和扩展状态 - 背景)
• 惊人的 TypeScript 体验: 专注于自动类型推论(TypeScript和JavaScript两个用户自动完成,而无需手动定义打字),同时给予您指定和扩充上下文事件类型的选择.
• Made for React: 使用 State Machine 遵循你和你的团队已经熟悉的平庸反应模式. (库本身其实是围绕React的用法"减少使用"(Reductioner & useeffect)的薄包装

实例

• 国家驱动的UI(隐藏并显示基于状态的UI元素) - 代码框 - 说吧 来源
• Async 管弦乐( 附带有限重试的数据) - 代码框 - 说吧 来源
• 随事件发送数据( 表格) - 代码框 - 说吧 来源

安装

npm install @cassiozen/usestatemachine

样本使用

const [state, send] = useStateMachine({
  initial: 'inactive',
  states: {
    inactive: {
      on: { TOGGLE: 'active' },
    },
    active: {
      on: { TOGGLE: 'inactive' },
      effect() {
        console.log('Just entered the Active state');
        // Same cleanup pattern as `useEffect`:
        // If you return a function, it will run when exiting the state.
        return () => console.log('Just Left the Active state');
      },
    },
  },
});

console.log(state); // { value: 'inactive', nextEvents: ['TOGGLE'] }

// Refers to the TOGGLE event name for the state we are currently in.

send('TOGGLE');

// Logs: Just entered the Active state

console.log(state); // { value: 'active', nextEvents: ['TOGGLE'] }

API 密码

使用状态机器

const [state, send] = useStateMachine(/* State Machine Definition */);

useStateMachine 以 JavaScript 对象作为状态机器定义 。 它返回由 A 构成的数组 current machine state 对象和 a send 函数以触发转换.

状态

这机器 state 由4个属性组成: value, (中文(简体) ), event, (中文(简体) ), nextEvents 财务报告和审定财务报表 context。 。 。 .

value (字符串):返回当前状态的名称.

event (单位:千美元){type: string}; 可选 : 导致这个状态的最后一个发送事件的名称.

nextEvents (单位:千美元)string[]: 带有可用事件名称的阵列来触发此状态的过渡.

context:州机所延州. 见下文"外国".

发送事件

send 将一个事件作为参数,以"TOGGLE"等短手字符串格式提供,或作为事件对象(例如. { type: "TOGGLE" }(中文(简体) )

如果当前状态接受此事件,并被允许(参见守护),它将改变状态机器状态并执行效果.

您也可以使用对象标记(如:. { type: "UPDATE" value: 10 }) (中文(简体) ). 检查 计划 需要更多关于强打额外数据的信息.

国家机器定义

定义国家

有限的状态机器在任何特定时间只能存在于有限的状态之一. 随着应用程序的相互作用,事件导致其改变状态.

国家的定义是国家名称作为密钥,对象可能有两个密钥: on (该事件 该状态响应)和 effect (在进入或退出此状态时运行任意代码):

打开( 事件和过渡)

描述此状态对哪些事件的反应( 以及机器在发送此事件时应该向哪个状态过渡) :

states: {
  inactive: {
    on: {
      TOGGLE: 'active';
    }
  },
  active: {
    on: {
      TOGGLE: 'inactive';
    }
  },
},

事件定义还可以使用扩展的,对象语法,允许对过渡进行更多的控制(如添加守护符):

on: {
  TOGGLE: {
    target: 'active',
  },
};

警卫

警卫是实际进行国家过渡之前的功能: 如果警卫返回错误,过渡将被拒绝.

const [state, send] = useStateMachine({
  initial: 'inactive',
  states: {
    inactive: {
      on: {
        TOGGLE: {
          target: 'active',
          guard({ context, event }) {
            // Return a boolean to allow or block the transition
          },
        },
      },
    },
    active: {
      on: { TOGGLE: 'inactive' },
    },
  },
});

守护函数接收一个带有当前上下文和事件的对象. 事件参数总是使用对象格式(例如. { type: 'TOGGLE' }) (中文(简体) ).

影响(出入境回调)

状态机器进入给定状态时会触发效应. 如果您从效果中返回一个函数, 它会在离开状态时被引用( 类似于使用效果如何在反应中起作用) .

const [state, send] = useStateMachine({
  initial: 'active',
  states: {
    active: {
      on: { TOGGLE: 'inactive' },
      effect({ send, setContext, event, context }) {
        console.log('Just entered the Active state');
        return () => console.log('Just Left the Active state');
      },
    },
  },
});

效果函数接收一个对象作为参数,有四个键:

• send:将一个事件作为参数,以"TOGGLE"等快手字符串格式提供,或作为事件对象(如. { type: "TOGGLE" }(中文(简体) )
• setContext: 以更新器函数为参数来设置新的上下文(下文更多关于上下文). 返回对象与 send,因此您可以设置上下文并发送单行事件.
• event:引发向此状态过渡的事件. (事件参数总是使用对象格式(例如. { type: 'TOGGLE' }) (中文(简体) ).
• context 效果运行时的上下文.

在这个例子中,状态机器在进入错误状态时总是会发送"RETRY"事件:

const [state, send] = useStateMachine({
  initial: 'loading',
  states: {
    /* Other states here... */
    error: {
      on: {
        RETRY: 'load',
      },
      effect({ send }) {
        send('RETRY');
      },
    },
  },
});

扩展状态( Context)

除了数量有限的州外,州机器还可以有扩展的州(称为上下文).

您可以在状态机器定义中提供初始上下文值,然后使用 setContext 函数在效果内改变上下文:

const [state, send] = useStateMachine({
  context: { toggleCount: 0 },
  initial: 'inactive',
  states: {
    inactive: {
      on: { TOGGLE: 'active' },
    },
    active: {
      on: { TOGGLE: 'inactive' },
      effect({ setContext }) {
        setContext(context => ({ toggleCount: context.toggleCount + 1 }));
      },
    },
  },
});

console.log(state); // { context: { toggleCount: 0 }, value: 'inactive', nextEvents: ['TOGGLE'] }

send('TOGGLE');

console.log(state); // { context: { toggleCount: 1 }, value: 'active', nextEvents: ['TOGGLE'] }

Schema: 背景和事件打字

TypeScript 将自动推断您的上下文类型; 事件类型会自动生成 .

不过,有些情况下你可能想要明确控制 context 财务报告和审定财务报表 event 类型 : 您可以使用 t 呜咽 schema数字 :

已键入上下文示例

const [state, send] = useStateMachine({
  schema: {
    context: t<{ toggleCount: number }>()
  },
  context: { toggleCount: 0 },
  initial: 'inactive',
  states: {
    inactive: {
      on: { TOGGLE: 'active' },
    },
    active: {
      on: { TOGGLE: 'inactive' },
      effect({ setContext }) {
        setContext(context => ({ toggleCount: context.toggleCount + 1 }));
      },
    },
  },
});

类型事件

默认情况下, 所有事件都会被输入到字符串注解中( E)send("UPDATE"))和标注对象(send({ type: "UPDATE"})) (中文(简体) ).

不过,如果想要,可以增加一个已经输入的事件,以包含任意数据(这可以用来提供在效果内部使用的值或更新上下文). 示例

const [machine, send] = useStateMachine({
  schema: {
    context: t<{ timeout?: number }>(),
    events: {
      PING: t<{ value: number }>()
    }
  },
  context: {timeout: undefined},
  initial: 'waiting',
  states: {
    waiting: {
      on: {
        PING: 'pinged'
      }
    },
    pinged: {
      effect({ setContext, event }) {
        setContext(c => ({ timeout: event?.value ?? 0 }));
      },
    }
  },
});

send({ type: 'PING', value: 150 })

说明 你不需要在计划中宣布你的所有事件, 只有那些你正在添加任意的键和值.

维基

• 从0.x.x版本更新到1.0版本
• 捐款
• 与 X 状态的比较
• 源代码走过视频
• 使用预告

贡献者

感谢这些伟大的人emoji 密钥:

Cass 💻 📖 ⚠️ 🤔 🐛	德凡什·杰斯马拉尼 💻 ⚠️ 🤔 🐛	迈克尔·施密特 💻 ⚠️ 🤔	约瑟夫 💻	杰里米·麦克 📖
罗恩 📖	克劳斯·布莱尔 📖	亚瑟·德纳 💻 🐛 ⚠️ 🤔

本项目遵循 全部贡献者 规格。 任何捐款都欢迎!