XSTATS JSを用いた反応JSにおける有限状態機械

この記事は、反応フックが導入される前に出版されました.だから私は以前のコンポーネントライフサイクル法に従っている
このブログはもともとSkcriptに掲載され、チュートリアルページでこの記事を追加するためにhttps://xstate.js.org/に感謝しています.

さあ、記事に戻ってください.
有限状態機械とは何か?有限状態機械がどのようなものであるかを理解するためには、まず状態機械が何かを知る必要がある.
状態機械は、それらに特定の入力を通過する際に異なる状態に遷移できるマシンです.現在、あなたのマシンが限られた数の出力だけを持つように、有限状態を機械に加えてください.あなたは入力と出力の有限数を定義し、あなたのマシンはそれらの出力の1つに遷移することができます.

「マシンはあちこちに行くが、どこにも行かない」
彼らが境界から決して出ない時から、州の機械は非常に役に立ちます.入力が何であれ、マシンが実行可能であると認識した場合、それは適切な状態に遷移します.他の設定に基づいて、状態機械は遷移を停止したりエラーをスローしたりします.
この記事のために、XSTATEを使用しましょう.
以下のような簡単な認証モジュールを作成します.

のログイン

ホーム

サーバー(現在のための急行サーバーを使用します)

このプロジェクトでは、NPMを使用してすべてのパッケージをインストールします.
私たちは最初に作成して反応アプリを作成するアプリケーション有限反応auth反応を作成します.
これは我々の反応アプリを作成します.少し修正しましょう.2コンテナのログインを作成します.JSホーム.JSと認証.ホームページを認証するためのJS.
我々が我々の状態遷移のために状態機械を使用している主な理由は、我々がすべての我々のビジネス・ロジックが一方側で、そして、反対側のすべてのUIであることを望むということです.言い換えると、我々の州のマシンは、反応がこの移行状態に基づいてレンダリングされる間、認証に必要なすべての状態遷移の面倒を見るでしょう.それで、コードはずっとコンパクトに見えます、そして、デバッグはとても簡単です.

開発者は、“デバッグは簡単です聞く”
では、我々の有限のマシンを見てみましょう

import { Machine } from "xstate";

export const authMachine = Machine(
  {
    id: "authentication",
    initial: "unauthorized",
    context: {
      newLink: null,
      errorMessage: null,
    },
    states: {
      unauthorized: {
        on: {
          LOGIN: "loading",
        },
      },
      loading: {
        on: {
          LOGIN_SUCCESS: {
            target: "authorized",
            actions: ["onSuccess"],
          },
          LOGIN_ERROR: {
            target: "unauthorized",
            actions: ["onError"],
          },
        },
      },
      authorized: {
        on: {
          LOGOUT: "unauthorized",
        },
      },
    },
  },
  {
    actions: {
      onSuccess: (context, event) => {
        if (event.reverse) {
          context.newLink = "/";
        } else {
          context.newLink = null;
        }
        context.errorMessage = null;
      },
      onError: (context, event) => {
        if (event.reverse) {
          context.newLink = null;
        } else {
          context.newLink = "/login";
        }
        context.errorMessage = event.errorMessage;
      },
    },
  }
);

それは単一のマシンのすべての状態ロジックです.xstateは、実際にオブジェクトの設定からマシンを作成するためのマシンメソッドを与えます.さて、マシン自体を深く見てみましょう.

id -マシンを識別するために使用する文字列.マシンが1台以上あると仮定して、マシンを見つけるためにIDを使用します.

マシンの初期値.

コンテキスト-コンテキストは、マシンに何かを格納し、マシンを使用するコンポーネントに渡すことができます.

state -マシンが遷移できる状態.マシンは、入力に関係なく他の状態に遷移することはありません.プー!簡単なデバッグ!

各状態は、その状態でマシンが取得し、対応する入力が渡されるたびに実行されるオン状態を持ちます.

私たちのコードを例として考えましょう.我々のマシンが無権限でその状態を持っていると仮定し、マシンに入力ログインを渡します.現在、マシンは{ LOGIN '}でそれを知っています.それで、マシンは現在ロード状態に移行します.許可されていない状態の間に渡された他の入力は、マシンを遷移させません.マシンは移行を知らないので停止します.

あなたが入力を渡すとき、機械は知らない

現在、あなたはマシンが特定の状態にあるとき、マシンが実行する必要がある行動を持つこともできます.それは、行動が遊びに来るところです.

あなたは、特定の入力を渡す際に、ONメソッドであなたの行動を呼び出すことができます.

あなたの行動を州の別のオブジェクトとして定義できます.この例では、成功とonerrorの2つのアクションを作成しました.そして、私はONメソッドからアクションを呼び出しました.入力の値が1つ以上のパラメータであるため、ターゲットと呼ばれるものを使いました.

アクション関数は2つのパラメータコンテキスト、イベントを受け取ります.したがって、関数は、コンテキストの値を直接変更することができます.イベントオブジェクトには、コンポーネントから渡される値が含まれます.

今のところ、この設定を使用します.後の議論において、我々は警備員、活動、平行状態のような他の構成を使います.
我々のコンポーネントに我々のマシンを実装し始める前に、我々は行動の我々の機械の視覚的な垣間見ることができます.https://xstate.js.org/viz/に移動し、ちょうどコピーするデフォルトのコードの上に我々のステートマシンコードを貼り付けます.
それを試してみましょう.コピー私たちのコードを貼り付けると更新をクリックします.今すぐあなたのマシンは左に視覚化されます.

さあ、私たちのマシンを試してみましょう.タブに移動し、ログインとして入力し、送信をクリックします.あなたは今、入力のログインを取るし、入力に基づいてその状態を変更するマシンを指示している.ステートタブでは、現在の状態値とマシンのコンテキストが表示されます.ログイン入力を我々のマシンに送りましょう.

そして、それは成功です.さて、私たちの関数が意図通りに動作しているか確認しましょう.我々はこのテストのLoginHelp成功を使用します.

そして、それは再び成功です.我々のアクションが正常に実行され、コンテキストが変更されることを確認します.

承認!
それで、我々が働くことを意図したので、我々の機械は働きそうです.これで、アプリケーションで実装を開始できます.
では、我々の認証者を見てみましょう.js

import React from "react";
import { Redirect } from "react-router-dom";
import { interpret } from "xstate";
import { authMachine } from "../Automata/authMachine";
import { authenticate } from "../Models/Auth";
import Loader from "../Components/Shared/Loader";

export default class Authenticator extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      auth: authMachine.initialState,
    };
  }

  // For every transition set the state of the machine as current state
  service = interpret(authMachine).onTransition((current) => this.setState({ auth: current }));

  // Start the service when the component is mounted
  componentDidMount() {
    this.service.start();
    this.authenticate();
  }

  // Stop the service when the component is unmounted
  componentWillUnmount() {
    this.service.stop();
  }

  // Authenticator function
  authenticate = () => {
    const { send } = this.service;
    var { reverse } = this.props;
    send("LOGIN");
    authenticate()
      .then((response) => {
        send({ type: "LOGIN_SUCCESS", reverse });
      })
      .catch((err) => {
        send({ type: "LOGIN_ERROR", reverse, errorMessage: err.toString() });
      });
  };

  render() {
    let { auth } = this.state;
    if (auth.context.newLink) {
      return (
        <Redirect
          to={{
            pathname: auth.context.newLink,
          }}
        />
      );
    }
    if (auth.value === "loading") return <Loader />;
    return this.props.children;
  }
}

現在、API関数は、認証されたユーザーのJWTトークンを送信するダミーExpressサーバーと通信する通常の機能です.
ステートマシンを使用するには、状態マシンをimportする必要があります.我々の状態機械が意図通りに働くために、我々は、機械が何をしているかを理解するために通訳を必要とします.
幸いなことに、XStateは我々の準備用のインタプリタメソッドを提供します.インタプリタを使用してサービスと呼ばれるユーザ定義メソッドを作成します.このメソッドでは、解釈メソッドに解釈されるマシンを渡します.次に、マシンのonTransitionプロパティを使用して、マシンが状態を変更するたびに、マシンの現在の状態を取得します.
コンポーネントがアンマウントしたときにコンポーネントがマウントされ、サービスを停止すると、サービスを開始します.
今、我々は完全にマシンのセットアップがあります.私たちがする唯一のことは、入力を送ることによってマシンと通信することです.
私たちのサービスメソッドは私たちに私たちのマシンに入力を送信することができます送信と呼ばれるメソッドを与えます.SENDには複数のパラメータがあり、最初のものは入力で、残りはマシンに送られる値です.
コードを実行してください.あなたの認証器は、現在状態マシンによって移行されます.そこに行く.