xState JS의 React JS의 유한 상태기 사용

본고는react 연결을 소개하기 전에 발표합니다.그래서 나는 초기의 구성 요소 생명주기 방법을 따랐다
이 블로그는 Skcript에 최초로 발표되었고, 튜토리얼 페이지에 본문을 추가해 주셔서 감사합니다.
https://xstate.js.org/
이제 문장으로 돌아가기:)
무엇이 유한상태기입니까?유한상태기가 무엇인지 이해하기 위해서는 우선 상태기가 무엇인지 알아야 한다.
상태기는 일부 입력을 전달할 때 다른 상태로 전환할 수 있는 기계다.현재, 당신의 기계가 유한한 수량의 출력만 할 수 있도록 유한한 상태를 기계에 추가합니다.제한된 수량의 입력과 출력을 정의하고 기계는 그 중 하나로만 변환할 수 있습니다.

"기계는 여기나 저기에 있지만 다른 곳에 있다."
상태기는 경계를 넘지 않기 때문에 매우 유용하다.입력이 무엇이든지 간에 만약 기계가 그것을 실행할 수 있다는 것을 식별한다면, 그것은 적당한 상태로 전환될 것이다. 그렇지 않으면 당신의 설정에 따라 당신의 상태기는 전환을 멈추거나 오류를 던질 것이다.
본고에서 상태기 해석기 패키지 xstate를 사용합니다. 이것은 React JS와 쉽게 사용할 수 있습니다.
다음과 같은 간단한 인증 모듈을 만들 것입니다.

로그인

집

서버 (지금은 express 서버를 사용합니다)

이 프로젝트에 대해 우리는 npm를 사용하여 우리의 모든 소프트웨어 패키지를 설치할 것이다.
우리는 우선create React Appfinite machine auth를 사용하여 우리의 React 응용 프로그램을 만들 것입니다.
이것은 우리의 React 응용 프로그램을 만들 것입니다.우리 좀 수정합시다.우리는 두 개의 용기를 만들어서 로그인할 것이다.js, 홈페이지.js와 검증기.홈 페이지를 검증하는 js입니다.
우리가 상태기를 사용하여 상태 전환을 하는 주요 원인은 모든 업무 논리가 한쪽에 있고 모든 UI가 다른 쪽에 있기를 원하기 때문이다.다시 말하면 저희 상태기는 인증에 필요한 모든 상태 변환을 책임지고,React는 이 변환 상태를 바탕으로 렌더링합니다.따라서 코드가 더욱 치밀하고 디버깅도 쉽다.

개발자가'디버깅이 더 쉽다'는 말을 들었을 때
이제 우리의 유한한 기계를 봅시다

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 - 기계를 식별하는 데 사용할 수 있는 문자열입니다.만약 우리가 여러 대의 기계가 있다면, 우리는 id를 사용하여 기계를 찾을 것이다.

초기 - 기계의 초기 값입니다.

컨텍스트 - 컨텍스트는 기계의 모든 내용을 저장하고 기계를 사용하는 구성 요소에 전달할 수 있습니다.

상태 - 기계가 변환할 수 있는 상태입니다.입력이 어떻든지 간에 기계는 어떠한 다른 상태로도 전환되지 않을 것이다.푸!,디버깅이 쉽습니다!

모든 상태는 켜진 상태로 기계가 이 상태에 있고 해당하는 입력을 전달할 때마다 이 상태를 실행한다.

우리 코드를 예로 들자.만약 우리의 기계 상태가unauthorized라고 가정한다면, 우리는 입력 로그인을 기계에 전달할 것이다.현재 기계는 {LOGIN:'로드'}에서 이 점을 알게 되었다.따라서 기계는 현재 적재 상태로 넘어갈 것이다.권한이 부여되지 않은 상태에서 전달되는 다른 입력은 기계를 안전하게 바꾸지 않습니다.변환을 모르거나 설정 설정strict:true를 사용하면 오류가 발생합니다.

네가 입력을 전달할 때 기계는 모른다

현재, 당신은 기계가 특정 상태에 있을 때 기계가 실행해야 할 조작을 실행할 수 있습니다.이것이 바로 행동이 역할을 발휘하는 곳이다.

어떤 입력을 전달할 때 on 방법에서 동작을 호출할 수 있다.

상태 이후에 동작을 다른 객체로 정의할 수 있습니다.이 예에서 나는 onSuccess와 onError라는 두 가지 동작을 만들었다.나는 온 방법의 동작을 호출했다.나는 입력한 값이 매개 변수에 그치지 않기 때문에 목표라는 것을 사용했다.

동작 함수는 두 개의 매개 변수인context, 이벤트를 사용합니다.현재 이 함수는 상하문의 값을 직접 바꿀 수 있다.이벤트 객체는 어셈블리에서 전달되는 값을 포함합니다.

현재, 우리는 이 설정만 사용한다.다음 토론에서 우리는 보호, 활동, 병행 상태 등 다른 설정을 사용할 것이다.
우리가 구성 요소에서 기계를 실현하기 전에, 우리는 운행 중인 기계에 대해 직관적으로 이해할 수 있다.기본 코드에 상태기 코드를 복사하여 붙여넣기만 하면 로 이동합니다.
한번 해볼게요.복사하여 코드를 붙여넣은 다음 업데이트를 누르십시오.이제 기계가 왼쪽에 표시됩니다.
https://xstate.js.org/viz/
이제 우리 기계를 시험해 봅시다.이벤트 탭으로 이동하여 로그인 유형을 입력하고 보내기를 클릭합니다.지금 기계에 입력 로그인을 알려주고 입력에 따라 상태를 변경합니다.상태 탭에는 시스템의 현재 상태 값과 컨텍스트가 표시됩니다.로그인 입력을 기계로 보냅니다.

이것은 성공이다.이제 우리의 함수가 예상대로 작동하는지 봅시다.이 테스트는 LOGIN_SUCCESS를 사용합니다.

이것은 또 한 번의 성공이다.우리는 우리의 행동이 성공적으로 집행되는 것을 보았고, 우리의 환경에 변화가 생겼다.

심사 비준된 것!!
그래서 우리의 기계는 우리가 예상한 대로 일하는 것 같다.이제 우리는 응용 프로그램으로 실현하기 시작할 수 있다.
이제 검증기 좀 봅시다.회사 명

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 함수는 가상 express 서버와 통신하는 일반 함수일 뿐, 이 서버는 인증을 받은 사용자에게 jwt 영패를 보냅니다.
우리의 상태기를 사용하기 위해서, 우리는 상태기를 우리가 사용하고자 하는 구성 요소로 가져와야 한다.우리의 상태기가 예상대로 작동하도록 하기 위해서, 우리는 기계가 무엇을 하는지 이해하는 해석기가 필요하다.
다행히도, xstate는 우리가 언제든지 사용할 수 있도록 설명 방법을 제공했다.EXPLATE를 사용하여 서비스라는 사용자 정의 방법을 만듭니다.이런 방법에서 우리는 해석하고자 하는 기계를 해석 방법에 전달할 것이다.그리고 우리는 기계의 onTransition 속성을 사용하여 기계가 상태를 변경할 때마다 기계의 현재 상태를 얻을 것입니다.
현재, 우리는 구성 요소가 마운트될 때 서비스를 시작하고, 구성 요소가 마운트될 때 서비스를 중지할 것입니다.
현재 우리는 이미 기계 설정을 완성했다.우리가 유일하게 해야 할 일은 입력을 보내서 기계와 통신하는 것이다.
우리의 서비스 방법은 우리에게 Send라는 방법을 제공했는데, 이 방법은 우리가 기계에 입력을 보낼 수 있도록 허락한다.Send에는 여러 개의 매개 변수가 있습니다. 첫 번째는 입력이고 나머지는 기계로 보내는 값입니다.
코드만 실행하면 완성됩니다.현재 신분증의 상태는 상태기에서 전환됩니다.여기 있습니다.