#กลไกการตอบสนอง: Observable

ใน NocoBase 2.0 นั้น อ็อบเจกต์ตอบสนองแบบ Observable มีอยู่ทุกที่เลยครับ/ค่ะ มันเป็นหัวใจสำคัญของ Data Flow ที่อยู่เบื้องหลังและการตอบสนองของ UI ซึ่งถูกนำไปใช้อย่างแพร่หลายในส่วนต่างๆ เช่น FlowContext, FlowModel และ FlowStep ครับ/ค่ะ

#ทำไมถึงเลือกใช้ Observable?

NocoBase เลือกใช้ Observable แทนที่จะเป็นโซลูชันการจัดการสถานะ (State Management) อื่นๆ อย่าง Redux, Recoil, Zustand หรือ Jotai ด้วยเหตุผลหลักๆ ดังนี้ครับ/ค่ะ:

• ยืดหยุ่นสูงสุด: Observable สามารถทำให้อ็อบเจกต์, อาร์เรย์, Map, Set หรืออื่นๆ กลายเป็นแบบตอบสนอง (Reactive) ได้อย่างอิสระ รองรับการซ้อนกันหลายชั้น (Deep Nesting) และโครงสร้างแบบไดนามิกได้อย่างเป็นธรรมชาติ จึงเหมาะมากสำหรับโมเดลธุรกิจที่ซับซ้อนครับ/ค่ะ
• ไม่รบกวนระบบเดิม (Non-intrusive): คุณสามารถจัดการกับอ็อบเจกต์ต้นฉบับได้โดยตรง โดยไม่จำเป็นต้องกำหนด Action, Reducer หรือ Store เพิ่มเติม ทำให้ประสบการณ์การพัฒนาดีเยี่ยมครับ/ค่ะ
• ติดตามการพึ่งพาอัตโนมัติ (Automatic Dependency Tracking): เพียงแค่คุณใช้ observer ครอบคอมโพเนนต์ คอมโพเนนต์ก็จะติดตามคุณสมบัติ Observable ที่ใช้งานอยู่โดยอัตโนมัติ และเมื่อข้อมูลมีการเปลี่ยนแปลง UI ก็จะรีเฟรชเองโดยที่คุณไม่ต้องจัดการการพึ่งพาด้วยตัวเองครับ/ค่ะ
• เหมาะสำหรับสถานการณ์ที่ไม่ใช่ React: กลไกการตอบสนองแบบ Observable ไม่ได้จำกัดอยู่แค่ React เท่านั้น แต่ยังสามารถนำไปใช้ร่วมกับเฟรมเวิร์กอื่นๆ เพื่อตอบสนองความต้องการข้อมูลแบบตอบสนองที่หลากหลายมากขึ้นได้ครับ/ค่ะ

#ทำไมต้องใช้ observer?

observer จะคอยฟังการเปลี่ยนแปลงของอ็อบเจกต์ Observable และจะทริกเกอร์การอัปเดตคอมโพเนนต์ React โดยอัตโนมัติเมื่อข้อมูลมีการเปลี่ยนแปลงครับ/ค่ะ สิ่งนี้ช่วยให้ UI ของคุณซิงค์กับข้อมูลอยู่เสมอ โดยที่คุณไม่จำเป็นต้องเรียกใช้ setState หรือเมธอดอัปเดตอื่นๆ ด้วยตัวเองครับ/ค่ะ

#การใช้งานพื้นฐาน

import React from 'react';
import { Input } from 'antd';
import { observer, observable } from '@nocobase/flow-engine';

const obs = observable.deep({
  value: 'aa'
});

const MyComponent = observer(() => {
  return (
    <div>
      <Input
        defaultValue={obs.value}
        onChange={(e) => {
          obs.value = e.target.value;
        }}
      />
      <div>{obs.value}</div>
    </div>
  );
});

export default MyComponent;

หากต้องการเรียนรู้การใช้งานแบบตอบสนองเพิ่มเติม สามารถดูได้จากเอกสารของ @formily/reactive ครับ/ค่ะ