ความแตกต่างที่แท้จริงระหว่าง redux และ state machine (เช่น xstate) คืออะไร?

ฉันกำลังดำเนินการตรวจสอบแอปพลิเคชันส่วนหน้าที่มีความซับซ้อนปานกลาง ในขณะนี้มันเขียนด้วย javascript ล้วนมีข้อความตามเหตุการณ์ที่แตกต่างกันมากมายซึ่งเชื่อมต่อกับส่วนหลักบางส่วนของแอปพลิเคชันนี้

เราตัดสินใจว่าเราจำเป็นต้องใช้คอนเทนเนอร์สถานะบางประเภทสำหรับแอปพลิเคชันนี้ในขอบเขตของการปรับโครงสร้างเพิ่มเติม ก่อนหน้านี้ฉันมีประสบการณ์เกี่ยวกับร้านค้า redux และ ngrx (ซึ่งเป็นไปตามหลักการเดียวกัน)

ดัดแปลงเป็นตัวเลือกสำหรับเรา แต่อย่างหนึ่งของนักพัฒนาที่เสนอให้ใช้ห้องสมุดตามรัฐเครื่องโดยเฉพาะในห้องสมุด xstate

ฉันไม่เคยทำงานกับ xstate ดังนั้นฉันจึงพบว่ามันน่าสนใจและเริ่มอ่านเอกสารประกอบและดูตัวอย่างต่างๆ ดูมีแนวโน้มและมีพลัง แต่เมื่อถึงจุดหนึ่งฉันก็เข้าใจว่าฉันไม่เห็นความแตกต่างอย่างมีนัยสำคัญระหว่างมันกับ redux

ฉันใช้เวลาหลายชั่วโมงในการพยายามหาคำตอบหรือข้อมูลอื่น ๆ ที่เปรียบเทียบ xstate และ redux ฉันไม่พบข้อมูลที่ชัดเจนยกเว้นบางบทความเช่น"get from redux to a state machine"หรือลิงก์ไปยังไลบรารีที่เน้นการใช้ redux และ xstate ร่วมกัน (ค่อนข้างแปลก)

หากมีใครสามารถอธิบายความแตกต่างหรือบอกฉันได้ว่าเมื่อใดที่นักพัฒนาควรเลือก xstate - ยินดีต้อนรับสู่

ฉันสร้าง XState แต่ฉันจะไม่บอกคุณว่าจะใช้อันอื่นหรือไม่ ขึ้นอยู่กับทีมของคุณ แต่ฉันจะพยายามเน้นความแตกต่างที่สำคัญบางประการ

• Redux เป็นคอนเทนเนอร์สถานะที่เหตุการณ์ (เรียกว่าการดำเนินการใน Redux) ถูกส่งไปยังตัวลดสถานะการอัปเดต
• XState เป็นคอนเทนเนอร์ของรัฐเช่นกัน แต่แยกสถานะ จำกัด (เช่น"loading", "success") ออกจาก "สถานะไม่มีที่สิ้นสุด" หรือบริบท (เช่นitems: [...])
• Redux ไม่ได้กำหนดวิธีการกำหนดตัวลดของคุณ เป็นฟังก์ชันธรรมดาที่ส่งคืนสถานะถัดไปตามสถานะปัจจุบันและเหตุการณ์ (การกระทำ)
• XState เป็น "ตัวลดที่มีกฎ" - คุณกำหนดการเปลี่ยนทางกฎหมายระหว่างสถานะ จำกัด เนื่องจากเหตุการณ์และการดำเนินการใดที่ควรดำเนินการในช่วงการเปลี่ยนแปลง (หรือเมื่อเข้า / ออกจากสถานะ)
• Redux ไม่ได้มีการสร้างขึ้นในวิธีการจัดการผลข้างเคียง มีตัวเลือกชุมชนมากมายเช่น redux-thunk, redux-saga เป็นต้น
• XState ทำให้การกระทำ (ผลข้างเคียง) เปิดเผยและชัดเจน - เป็นส่วนหนึ่งของStateวัตถุที่ส่งคืนในแต่ละการเปลี่ยนแปลง (สถานะปัจจุบัน + เหตุการณ์)
• ปัจจุบัน Redux ไม่มีวิธีที่จะเห็นภาพการเปลี่ยนผ่านระหว่างรัฐเนื่องจากไม่ได้แยกแยะระหว่างสถานะ จำกัด และสถานะไม่มีที่สิ้นสุด
• XState มีวิชวลไลเซอร์: https://statecharts.github.io/xstate-vizซึ่งเป็นไปได้เนื่องจากลักษณะการประกาศ
• ตรรกะ / พฤติกรรมโดยนัยที่แสดงในตัวลด Redux ไม่สามารถทำให้เป็นอนุกรมอย่างเปิดเผยได้ (เช่นใน JSON)
• คำจำกัดความของเครื่องของ XState ซึ่งแสดงถึงตรรกะ / พฤติกรรมสามารถต่ออนุกรมกับ JSON และอ่านจาก JSON สิ่งนี้ทำให้พฤติกรรมพกพาและกำหนดค่าได้โดยเครื่องมือภายนอก
• Redux ไม่ใช่เครื่องของรัฐอย่างเคร่งครัด
• XState ปฏิบัติตามข้อกำหนด W3C SCXML อย่างเคร่งครัด: https://www.w3.org/TR/scxml/
• Redux อาศัยผู้พัฒนาเพื่อป้องกันสถานะที่เป็นไปไม่ได้ด้วยตนเอง
• XState ใช้แผนภูมิสถิติเพื่อกำหนดขอบเขตตามธรรมชาติสำหรับการจัดการเหตุการณ์ซึ่งป้องกันสถานะที่เป็นไปไม่ได้และสามารถวิเคราะห์แบบคงที่ได้
• Redux สนับสนุนการใช้ที่เก็บปรมาณู "ทั่วโลก" เพียงแห่งเดียว
• XState สนับสนุนให้ใช้วิธีการที่คล้ายกับโมเดลนักแสดงซึ่งอาจมีอินสแตนซ์สถิติ / "บริการ" แบบลำดับชั้นจำนวนมากที่สื่อสารกันได้

ฉันจะเพิ่มความแตกต่างที่สำคัญให้กับเอกสารในสัปดาห์นี้

สถานะเครื่องไม่ได้บอก (บังคับ) ให้คุณมีการไหลของข้อมูลทิศทางเดียว ไม่มีส่วนเกี่ยวข้องกับการไหลของข้อมูล มันเป็นเรื่องเกี่ยวกับข้อ จำกัด การเปลี่ยนแปลงสถานะและเกี่ยวกับการเปลี่ยนสถานะ ดังนั้นโดยทั่วไปจะมีเพียงบางส่วนของแอปพลิเคชันเท่านั้นที่ได้รับการออกแบบด้วยเครื่องของรัฐเท่านั้นและเฉพาะในกรณีที่คุณจำเป็นต้องจำกัด / ห้ามการเปลี่ยนแปลงสถานะบางอย่างและคุณสนใจที่จะเปลี่ยน

ระวังว่าด้วยเครื่องของรัฐหากด้วยเหตุผลบางประการ (การพึ่งพา API ภายนอก ฯลฯ ... ) มีโอกาสที่แอปอาจถูกล็อกในสถานะที่ไม่สามารถเปลี่ยนไปใช้สถานะอื่นได้เนื่องจากมีข้อ จำกัด คุณต้องแก้ไข

แต่ถ้าคุณสนใจเฉพาะสถานะแอพสุดท้ายเท่านั้นแทนที่จะเปลี่ยนสถานะและข้อ จำกัด ของสถานะก็ไม่สำคัญคุณควรไม่ใช้เครื่องสถานะและอัปเดตสถานะโดยตรง ( คุณยังสามารถตัดสถานะในการอัปเดตคลาส Singleton ผ่าน คลาสแอ็คชั่น ).

บนมืออื่น ๆ , Reduxเป็นสถาปัตยกรรมกรอบทิศทางเดียว สถาปัตยกรรมแบบทิศทางเดียวบังคับให้คุณมีทิศทางเดียวของการไหลของข้อมูล ใน Redux เริ่มต้นด้วยUser->View->(Action)->Store->Reducer->(Middleware)->Store->(State)->View. เช่นเดียวกับ State Machines คุณสามารถเรียกใช้ผลข้างเคียงกับ Middlewares ใน Redux คุณสามารถ จำกัด / ห้ามการเปลี่ยนสถานะได้หากต้องการ แตกต่างจาก State Machine , Redux บังคับให้การไหลของข้อมูลทิศทางเดียวบริสุทธิ์ ! ฟังก์ชั่นลด, ออบเจ็กต์สถานะไม่เปลี่ยนรูป, สถานะแอพเดียวที่สังเกตได้