มีการเขียนมากมายเกี่ยวกับปฏิกิริยาและรีดักซ์และการไหลของข้อมูลทิศทางเดียวและวิธีที่คุณสามารถรวมสิ่งเหล่านี้เพื่อสร้างยูนิคอร์นผายลมสีรุ้งจากแอปหน้าเดียวของคุณ ในโพสต์นี้ 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 ที่ได้รับข้อมูลที่ต้องการจากบริบทที่ผู้ให้บริการกำหนด เมื่อร่วมมือกัน ทั้งคู่จะสร้างประสบการณ์นักพัฒนาที่ดีทีเดียวและสรุปความซับซ้อนที่ซ่อนอยู่มากมาย เรียบร้อยใช่ไหม?