关于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

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

初始化我的项目

开发工具

目录构造

搭建页面