มีการเขียนมากมายเกี่ยวกับปฏิกิริยาและรีดักซ์และการไหลของข้อมูลทิศทางเดียวและวิธีที่คุณสามารถรวมสิ่งเหล่านี้เพื่อสร้างยูนิคอร์นผายลมสีรุ้งจากแอปหน้าเดียวของคุณ ในโพสต์นี้ Imma พูดถึงรูปแบบของผู้ให้บริการที่ใช้โดย React-Redux (และ MobX และ Apollo และเฟรมเวิร์กอื่น ๆ ในอนาคต)

ภาษาและเฟรมเวิร์กการเขียนโปรแกรมที่แตกต่างกันมีการใช้งานที่แตกต่างกันไปตามรูปแบบของผู้ให้บริการ ฉันจะเขียนเกี่ยวกับรูปแบบของผู้ให้บริการในโลกแห่งการตอบสนอง

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

โดยพื้นฐานแล้ว การเพิ่มข้อมูลลงในบริบทของโหนดจะทำให้ข้อมูลนั้นพร้อมใช้งานสำหรับแผนผังย่อยทั้งหมดของโหนดนั้น โดยทั่วไปเราใช้บริบท API เพื่อให้ข้อมูลพร้อมใช้งานสำหรับแผนผังส่วนประกอบทั้งหมด กรณีการใช้งานที่ดีสำหรับการใช้ Context API คือการกำหนดธีมข้อมูลที่เกี่ยวข้องซึ่งเราต้องการให้โหนดทั้งหมดของเราเข้าถึงได้ เดาว่ามีอะไรอีกบ้างที่สามารถทำให้โหนดทั้งหมดในแผนผังส่วนประกอบผ่านบริบท API ได้ ใช่ คุณเข้าใจถูกแล้ว — ร้านรีดักซ์

<Provider store={store}>
  <App />
</Provider>

โค้ดด้านบนช่วยให้แน่ใจว่าที่เก็บ Redux พร้อมใช้งานสำหรับโหนดทั้งหมดในแผนผังส่วนประกอบผ่าน Context API ในความเป็นจริง นี่คือวิธีที่ฟังก์ชัน 'เชื่อมต่อ' เข้าถึงร้านค้า Redux แม้ว่าเราจะไม่เคยส่งผ่านร้านค้าอย่างชัดเจนเป็นข้อมูลอ้างอิงหรือพารามิเตอร์ใดๆ ก็ตาม โดยคร่าวๆ รหัส 'เชื่อมต่อ' จะคล้ายกับ (ในความหมายเท่านั้น - รหัสจริงมีประสิทธิภาพมากกว่ามาก) -

const connect = Component => class extends React.Component {
  constructor(props, context) {
    super(props, context);
    const { store } = context;
    // do everything related to store subscriptions, etc, here.  
  }
render() {
    return // refer actual code on github :)
    // https://github.com/reduxjs/react-redux/blob/master/src/components/connectAdvanced.js
  }
}

คุณเข้าใจแล้ว — องค์ประกอบของผู้ให้บริการที่กำหนดบริบทและ HoC ที่ได้รับข้อมูลที่ต้องการจากบริบทที่ผู้ให้บริการกำหนด เมื่อร่วมมือกัน ทั้งคู่จะสร้างประสบการณ์นักพัฒนาที่ดีทีเดียวและสรุปความซับซ้อนที่ซ่อนอยู่มากมาย เรียบร้อยใช่ไหม?