关于javascript:一-利用xstate追踪新冠动态-项目搭建

xstate 官网上有个用例，应用 xstate+react 实现了一个 covid tracker，可能实时展现某个国家 (地区) 的新冠动静，于是复刻一个 angular 的版本，也算是一个学习和进步的过程，最终实现的成果如下图：

我的项目并不简单（UI 比逻辑更耗时），然而可能加深对 xstae 中 actor 模式的了解，以及 invoke 的应用。

思考到如果把文章内容都整合到一起，长长的滚动条会让人望而生畏，因而文章将分为三个篇幅进行解说：

• 我的项目搭建：实现页面的根底局部
• 实现状态机：实现转态机的代码
• 综合使用：将状态机使用到具体的组件中

篇幅都不长，图文并茂，可随到随看，心愿能给大家带来启发。

初始化我的项目

开发工具

这里间接抉择了 线上开发，应用了 stackblitz（微软）的脚手架工具创立了 angular 工程目录。

比拟闻名的线上开发网站还有 codesandbox，当初比拟多人应用，速度快，也不必翻墙。

目录构造

无论用 vue 还是 react 或者 angular，都倡议 独自 创立一个 machine 目录用于寄存状态机，不便保护和治理。

本我的项目应用 angular，所以要采纳服务的形式应用xstate，除了machine 目录，还须要有一个 services 目录寄存解析状态机后的服务。

更多细节能够返回 在 Angular 中应用 xstate

目录构造如图：

这里有几个要点：

• component 不间接操作 machine，通过 services 转换之后引入。
• 为什么会有两个 machine 文件？

  因为咱们要应用 actor 个性，covidMachine 用于存储所有的材料，他的 context 中会有一个 countryRef 属性，指向以后选中的国家。而这个 countryRef，正是通过孵化 (spawn) 产生的 actor，这个 actor，就是 covidDataMachine!

搭建页面

我的项目中只有一个入口页面app.component.ts，和三个组件：

• bar.component.ts：条形图
• number.component.ts：统计卡
• select.component.ts：页面中 可能交互 的惟一组件，下拉框。展现所有国家和监听用户的抉择。

我的项目中应用了 ngx-charts 图表组件

页面一览：

//app.component.ts

import {Component} from "@angular/core";

@Component({
  selector: "my-app",
  styles: [
    `
      :host {
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
    `
  ],
  template: `
    <p style="text-align:center" *ngIf="state.context">
      {{state.matches("idle") ? "Select a country" : null }}
    </p>

    <!-- 下拉框 --> 
    <app-select
      [data]="countryList"
      (selectChange)="selectCountry($event)"
    ></app-select>

    <!-- 图表：数字卡片 --> 
    <app-number [data]="countryData"></app-number>

    <!-- 图表：条形图 --> 
    <app-bar [data]="countryData"></app-bar>
  `
})
export class AppComponent {countryData: any[];
  countryList: any[];
  state: any = {};

  selectCountry(name: string) {// TODO:}
}

页面也比较简单，有几个要点：

• 数据的更改解决尽量在 父组件 中实现，子组件只负责 展现数据 以及 发送事件

• 相干字段的正文：

  • countryData：寄存 以后 country 的数据
  • countryList：寄存 所有 country 的信息（名称）
  • state：状态机

搭建页面并非 xstate 的内容，这里就不做开展了。

下一章咱们将实现状态机。点击跳转：

• (二) 利用 xstate 追踪新冠动静 – 实现状态机
• (三) 利用 xstate 追踪新冠动静 – 综合利用

线上 Demo