Xstateを使っている有限状態機械を構築する方法と反応?

Xstateは、有限状態マシンとステートチャートを作成、解釈、実行するためのライブラリです.それは反応アプリの状態を管理するために使用できる本当に強力なパッケージです.
このガイドでは、私たちはゼロ状態からXSTATE
飛び込みましょう!

What is a Finite State Machine?

Setting up

Building a State Machine

Resources

もともと投稿my blog

有限状態機械とは何か？

有限状態機械は、任意の時点で1つの状態にあることができるシステムの動作を記述する計算の数学モデルである.たとえば、スイッチボタンを持っているとしましょう、状態がオンまたはオフにすることができます、それは同時にオンとオフを持つことはできません、これは有限状態機械の表現です.
理論だけではいつも混乱している

これは少し不可解です、しかし、一旦我々が状態機械を実装し始めるならば、心配は全くより明確です.だから、新しい反応アプリを作成し、必要な依存関係を追加してみましょう.

設定

そのためには、次のコマンドを実行して、新鮮な反応アプリを作成しましょう.

npx create-react-app react-xstate-example

次に、私たちはxstate and @xstate/react 以下のコマンドを実行することでライブラリを作成します.

yarn add xstate@latest @xstate/react

インストールが完了すると、次のセクションでステートマシンを構築できます.

ステートマシンの構築

このガイドでは、我々は簡単なテーマスイッチャを構築するので、まず最初にステートマシンを構築し始めましょう.
ようこそXSTATEによって提供される素晴らしいツールです.The Xstate Visualizer ブラウザでステートマシンを構築し、視覚化することができます.

では、我々のステートマシンを見てみましょうApp.js

Appjs

import React from "react"
import { Machine } from "xstate"
import "./App.css"

const changeTheme = Machine({
  id: "theme",
  initial: "dark",
  states: {
    dark: {
      on: { CHANGE: "light" },
    },
    light: {
      on: { CHANGE: "dark" },
    },
  },
})

ここで見ることができるように、ビジュアライザーで構築された同じ状態マシンを使用します.そしてもちろん、我々はインポートする必要がありますMachine からxstate そうでなければそれは動作しませんステートマシンをビルドするライブラリ.
では、引数として渡されたオブジェクトをMachine() メソッド.

id : ステートマシンの識別子か名前です

initial : 名前としては、マシンの初期状態です.

states : これは、我々が我々の状態を置くところです、ここで、我々には2つの州があります:暗闇と光

on : それは行動を起こすために使用されます.ここでは、テーマを変更するイベントがあります.

状態機械だけではあまりやりません.次のセクションで使用しましょう.

App.js

import React from "react"
import { Machine } from "xstate"
import { useMachine } from "@xstate/react"
import "./App.css"

const changeTheme = Machine({
  id: "theme",
  initial: "dark",
  states: {
    dark: {
      on: { CHANGE: "light" },
    },
    light: {
      on: { CHANGE: "dark" },
    },
  },
})

function App() {
  const [current, send] = useMachine(changeTheme)

  return (
    <div className="App">
      <h1>{current.matches("dark") ? "Dark Theme" : "Light Theme"}</h1>
      <button onClick={() => send("CHANGE")}>Change Theme</button>
    </div>
  )
}

export default App

ここでは、我々はuseMachine START状態マシンを引数として受け取り、現在の状態とそれを更新する関数を返します.あなたがよく知っているならばuseState フック、それは同じように動作します.
The current 国家は財産の束を持っていますが、ここで私たちはmatches() 現在の状態が等しいかどうかをパラメータとして渡す引数にチェックし、結果を処理するメソッドです.そして今、ボタンをクリックすると、適切にテーマを変更します.
すごい!xstateを用いて有限状態機械を構築し,反応を行った.
読書ありがとう!
あなたはSource code here
スプラッシュによる自転車

資源

XState Docs
XState Visualizer
XState Tutorials
BLOG
NEWSLETTER
GITHUB
CODEPEN