State Machine UI: การสร้างอินเทอร์เฟซที่กำหนดและปราศจากข้อผิดพลาด
เรียนรู้ว่าเครื่องตรวจสอบสถานะภาพกำจัดสถานะ UI ที่เป็นไปไม่ได้ ลดความซับซ้อนของส่วนประกอบเชิงโต้ตอบที่ซับซ้อน และสร้างอินเทอร์เฟซที่กำหนดขึ้นและปราศจากข้อบกพร่องใน React
หลัก Takeaway
เครื่องสถานะ UI เป็นแบบจำลองทางคณิตศาสตร์ที่อธิบายสถานะที่ถูกต้องทั้งหมดที่ส่วนประกอบอินเทอร์เฟซสามารถครอบครองได้ และการเปลี่ยนแปลงที่ชัดเจนระหว่างสถานะเหล่านั้นซึ่งถูกกระตุ้นโดยเหตุการณ์ของผู้ใช้หรือเงื่อนไขของระบบ เครื่องสถานะจะกำจัดข้อบกพร่องของ UI ทุกหมวดหมู่โดยการทำให้ "สถานะที่เป็นไปไม่ได้เป็นไปไม่ได้" - ตัวหมุนโหลดและเครื่องหมายถูกความสำเร็จของคุณไม่สามารถปรากฏพร้อมกันได้หากเครื่องสถานะของคุณห้ามไม่ให้รวมชุดนั้น
เครื่องสถานะปัญหาแก้ไขได้
ข้อบกพร่องของ UI ส่วนใหญ่มาจากส่วนประกอบที่สามารถเข้าสู่สถานะที่เป็นไปไม่ได้ตามตรรกะ ตัวอย่างคลาสสิก: ปุ่มส่งแบบฟอร์มที่ไม่มีโมเดลสถานะที่ชัดเจนสามารถอยู่ในสถานะ "กำลังโหลด" และสถานะ "ปิดใช้งาน" พร้อมกันจากแฟล็กบูลีนสองแฟล็กที่แยกจากกัน เครื่องสถานะป้องกันสิ่งนี้โดยกำหนดให้ส่วนประกอบต้องอยู่ในสถานะที่กำหนดไว้อย่างดีสถานะเดียวเสมอทุกเมื่อ
- "นรกธงบูลีน" - isLoading, isDisabled, isError, isSuccess ขัดแย้งกันทั้งหมด
- สภาพการแข่งขันที่ผู้ใช้ที่รวดเร็วเรียกใช้หลายสถานะพร้อมกัน
- จุดบกพร่องในการเปลี่ยนที่ภาพเคลื่อนไหวเริ่มต้นจากตำแหน่งกลางที่ไม่ถูกต้อง
- โหลดการรับรู้ของนักพัฒนาจากการติดตามการรวมค่าสถานะ n × n ในการตรวจสอบโค้ด
แนวคิดเครื่องสถานะหลัก
เครื่องจักรสถานะประกอบด้วยชุดของสถานะที่จำกัด คำศัพท์ของเหตุการณ์ที่สามารถกระตุ้นให้เกิดการเปลี่ยนภาพ และเงื่อนไขการป้องกันที่กำหนดว่าจะอนุญาตให้เปลี่ยนผ่านหรือไม่
รัฐ
แต่ละสถานะแสดงถึงเงื่อนไขเฉพาะของส่วนประกอบ ตัวอย่างสำหรับองค์ประกอบการดึงข้อมูล: ไม่ได้ใช้งาน กำลังโหลด สำเร็จ ข้อผิดพลาด การรีเฟรช
เหตุการณ์ / การเปลี่ยนแปลง
เหตุการณ์ทำให้เกิดการเปลี่ยนแปลงสถานะ "ส่ง" เปลี่ยนแบบฟอร์มจากไม่ได้ใช้งานเป็นกำลังโหลด "ความสำเร็จ" เปลี่ยนจากการโหลดไปสู่ความสำเร็จ "ERROR" เปลี่ยนจากการโหลดเป็นข้อผิดพลาด
ยาม
เงื่อนไขที่ต้องเป็นจริงสำหรับการเปลี่ยนไปสู่การยิง เหตุการณ์ "ส่ง" สามารถทริกเกอร์การเปลี่ยนแปลงการไม่ได้ใช้งาน → การโหลดได้เท่านั้น หากเจ้าหน้าที่ตรวจสอบความถูกต้องของแบบฟอร์มผ่าน
บริบท / สถานะเพิ่มเติม
ข้อมูลเสริมที่เครื่องพกพา (ค่าที่ผู้ใช้ป้อน ข้อความแสดงข้อผิดพลาด ข้อมูลที่โหลด) ข้างชื่อสถานะปัจจุบัน
เครื่องสถานะใน ExodeUI
ExodeUI จัดเตรียมตัวแก้ไขเครื่องสถานะกราฟโหนดแบบวิชวล คุณวาดสถานะเป็นวงกลม เชื่อมต่อสถานะเหล่านั้นด้วยลูกศรที่มีป้ายกำกับซึ่งแสดงถึงเหตุการณ์ และแนบภาพเคลื่อนไหวในฤดูใบไม้ผลิและการเปลี่ยนแปลงคุณสมบัติการมองเห็นในแต่ละสถานะ เครื่องถูกบันทึกในไฟล์ .exode: ใน React คุณโหลดด้วย ExodeUICanvas และขับเคลื่อนผ่านอินพุต และใน Swift ผ่าน ExodeUIController
ตัวอย่างการใช้งานการผลิต
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function AuthFlow() {
return (
<ExodeUICanvas
src="/auth_flow.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}