Рубрики
Без рубрики

Конечные государственные машины в React JS с использованием xstate JS

Эта статья была опубликована до введения React Hooks. Итак, я следил за более ранним компонентом … Tagged with React, JavaScript, Tulciory, Xstate.

Эта статья была опубликована до введения React Hooks. Итак, я следовал более ранним методам жизненного цикла компонента

Этот блог был первоначально опубликован в Skcript И спасибо https://xstate.js.org/ Для добавления этой статьи на странице учебного пособия.

Теперь вернемся к статье:)

Что такое конечный штат Машина? Чтобы понять, что такое конечная машина, нам нужно сначала узнать, что такое государственная машина.

Государственная машина – это машина, которая может переходить в разные состояния при передаче им определенных входов. Теперь добавьте конечные состояния в машину, чтобы у вашей машины было только ограниченное количество выходов. Вы определяете конечное количество входов и выходов, и ваша машина может переходить только на один из этих выходов.

” Машина идет сюда или там, но больше нигде “

Государственные машины очень полезны, поскольку они никогда не выходят за пределы границ. Каким бы ни был вход, если машина распознает его как возможную, то она будет переходить к надлежащему состоянию, иначе на основе вашей конфигурации, ваш компьютер состояния либо остановит переход, либо бросает ошибку.

Для этой статьи давайте использовать xstate пакет интерпретатора штата, который можно с легкостью использовать с React JS.

Мы создадим простой модуль аутентификации, который будет иметь следующее,

  • Авторизоваться
  • Дом
  • Сервер (сейчас мы будем использовать экспресс -сервер)

Для этого проекта мы будем использовать npm Чтобы установить все наши пакеты.

Сначала мы создадим наше приложение React, используя Create-React-App конечно-machine-auth.

Это создаст наше приложение React. Давайте немного изменим это. Мы создадим 2 контейнера Login.js , Home.js и Authenticator.js Для аутентификации домашней страницы.

Основная причина, по которой мы используем государственные машины для наших государственных переходов, заключается в том, что мы хотим, чтобы вся наша бизнес -логика была на одной стороне и весь наш пользовательский интерфейс с другой стороны. Другими словами, наша государственная машина позаботится обо всех переходах состояния, необходимых для аутентификации, в то время как 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 – Любая строка, которую можно использовать для идентификации машины. Предположим, у нас более 1 машины, мы будем использовать идентификатор, чтобы найти машину.
  • начальный – начальное значение машины.
  • контекст – Контекст можно использовать для хранения чего -либо в машине, а затем передавать его компонентам, которые используют машину.

  • Государства – Государства, куда могут переходить машины. Машина никогда не будет переходить в какое -либо другое состояние независимо от ввода. Пуф!, Легкая отладка!

    • В каждом штате есть на Укажите, что это выполняется всякий раз, когда машина получает машину, находится в этом состоянии, и соответствующий вход передается.
    • Давайте рассмотрим наш код в качестве примера. Предположим, что наша машина имеет свое состояние в несанкционированный , и мы передаем вход Вход к машине. Теперь машина знает, что на {login: ‘загрузка’} Анкет Таким образом, машина теперь перейдет к загрузка государство. Любой другой вход, пройденные во время несанкционированный Государство не будет переходить на машину, сделав ее безопасным. Машина либо остановится, потому что она не знает перехода, либо вынесет ошибку, если настройка конфигурации строго: истинно используется.

Когда вы передаете вход Машина не знает

  • Теперь у вас также могут быть действия, которые машина должна выполнять, когда машина находится в определенном состоянии. Вот где Действия вступают в игру.
  • Вы можете вызвать свои действия в на Метод при прохождении определенного ввода.
  • Вы можете определить свои действия как другой объект после состояний. В этом примере я создал два действия, onsuccess и Onerror Анкет И я назвал действие из на метод Я использовал что -то называемое цель Потому что значение ввода составляет более одного параметра.
  • Функции действия будут принимать два параметра контекст, событие. Так что теперь функция может напрямую изменить значение контекста. Объект события содержит значение, прошедшее из компонентов.

На данный момент мы просто будем использовать эту конфигурацию. В последующих обсуждениях мы будем использовать другие конфигурации, такие как охранники, деятельность, параллельные штаты, и т.п.

Прежде чем мы начнем реализовать нашу машину в нашем компоненте, мы можем иметь визуальный взгляд на нашу машину в действии. Перейдите к https://xstate.js.org/viz/ И просто скопируйте нашу код штата на код по умолчанию.

Попробуем это. Скопировать наш код и нажмите Обновление Анкет Теперь ваша машина будет визуализироваться слева.

Теперь давайте попробуем нашу машину. Перейти к События Вкладка и введите тип как Вход и нажмите «Отправить». Теперь вы говорите машине принять вход Вход и изменить свое состояние на основе ввода. Государство Вкладка покажет вам текущее значение состояния и контекст машины. Давайте отправим Вход Ввод в нашу машину.

И это успех. Теперь давайте посмотрим, работают ли наши функции задуматься. Мы будем использовать Login_success Для этого теста.

И это снова успех. Мы видим, что наше действие выполняется успешно, и наш контекст меняется.

Одобренный!!

Таким образом, наша машина, кажется, работает, когда мы намеревались работать. Теперь мы можем начать реализацию с приложением.

Теперь давайте посмотрим на наш Authenticator.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 (
        
      );
    }
    if (auth.value === "loading") return ;
    return this.props.children;
  }
}

Теперь функции API – это просто нормальные функции, которые связываются с сервером Dummy Express, который отправляет токен JWT для аутентифицированного пользователя.

Чтобы использовать нашу государственную машину, нам нужно импортировать нашу государственную машину в компонент, в который мы собираемся использовать ее. Для того, чтобы наша государственная машина работала, как предполагалось, нам нужен переводчик, чтобы разобрать, что делает машина.

К счастью, Xstate предоставляет интерпретация Метод для нашего готового использования. Мы будем использовать интерпретацию для создания пользовательского метода под названием Сервис Анкет В этом методе мы передадим машину, которая будет интерпретирована в интерпретация метод Тогда мы будем использовать Ontransition Свойство машины для получения текущего состояния машины каждый раз, когда машина меняет свое состояние.

Теперь мы начнем службу, когда компонент будет монтируется, и остановим службу, когда компонент наносит неподвижность.

Теперь у нас есть настройка машины полностью. Единственное, что нам осталось сделать, это общаться с машиной, отправив входы.

Наш метод обслуживания дает нам метод под названием Отправить что позволяет нам отправлять входы в нашу машину. Отправить имеет несколько параметров, первым является вход, а остальные – значения, отправленные на машину.

Просто запустите свой код, и все готово. Ваш аутентификатор теперь переходит на государственную машину. Вот иди.

Оригинал: “https://dev.to/soorajsnblaze333/finite-state-machines-in-react-js-using-xstate-36ho”

Читайте ещё по теме: