React Context vs React Redux เมื่อใดที่ฉันควรใช้แต่ละอัน [ปิด]

186

ปิด คำถามนี้เป็นคำถามความคิดเห็นตาม ไม่ยอมรับคำตอบในขณะนี้

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

ปิดให้บริการใน2 ปีที่ผ่านมา

React 16.3.0 ได้รับการเผยแพร่และAPI บริบทไม่ได้เป็นคุณลักษณะทดลองอีกต่อไป แดน Abramov (ผู้สร้างของ Redux) การแสดงความคิดเห็นที่ดีเขียนที่นี่เกี่ยวกับเรื่องนี้ แต่มันก็ 2 ปีเมื่อบริบทก็ยังคงคุณลักษณะทดลอง

คำถามของฉันคือในความเห็น / ประสบการณ์ของคุณเมื่อใดที่ฉันควรใช้React Contextผ่านReact Reduxและในทางกลับกัน

— Alfrex92
แหล่งที่มา

หากคุณกำลังเปรียบเทียบ API ของ Redux และ React Context API อาจเป็นเพราะคุณต้องการให้ vars ซิงค์กันระหว่างส่วนประกอบเท่านั้น ตรวจสอบduixแพ็คเกจ npm มันเป็นเพียงผู้จัดการของรัฐที่เรียบง่ายด้วยการโทรกลับใช้งานง่ายมาก เพื่อให้ชัดเจน: ฉันเป็นผู้สร้าง

— Broda Noel

208

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

ตามที่มาร์ค erikson เขียนไว้ในบล็อกของเขา:

หากคุณใช้ Redux เพียงเพื่อหลีกเลี่ยงการใช้อุปกรณ์ประกอบฉากบริบทสามารถแทนที่ Redux ได้ - แต่คุณอาจไม่ต้องการ Redux ในตอนแรก

บริบทยังไม่ให้อะไรอย่างเช่นRedux DevToolsความสามารถในการติดตามการอัพเดทสถานะของคุณmiddlewareเพิ่มตรรกะแอปพลิเคชันจากส่วนกลางและความสามารถอันทรงพลังอื่น ๆ ที่Redux เปิดใช้งาน

Reduxมีประสิทธิภาพมากกว่าและมีคุณสมบัติจำนวนมากที่Context Apiไม่ได้ให้บริการเช่นเดียวกับที่@danAbramovพูดถึง

React Redux ใช้บริบทภายใน แต่ไม่เปิดเผยข้อเท็จจริงนี้ใน API สาธารณะ ดังนั้นคุณควรรู้สึกปลอดภัยในการใช้บริบทผ่าน React Redux มากกว่าโดยตรงเพราะหากมีการเปลี่ยนแปลงภาระในการอัปเดตรหัสจะอยู่ใน React Redux ไม่ใช่คุณ

มันเกิน Redux เพื่อปรับปรุงการใช้งานจริงให้เป็นไปตาม API บริบทล่าสุด

Context API ล่าสุดสามารถใช้กับแอปพลิเคชันที่คุณเพียงแค่ใช้ Redux เพื่อส่งผ่านข้อมูลระหว่างส่วนประกอบอย่างไรก็ตามแอปพลิเคชันที่ใช้ข้อมูลส่วนกลางและจัดการคำขอ API ในผู้สร้าง Action ที่ใช้redux-thunkหรือredux-sagaยังต้องการ redux นอกเหนือจาก redux นี้ยังมีไลบรารีอื่น ๆ ที่เกี่ยวข้องredux-persistซึ่งอนุญาตให้คุณบันทึกข้อมูลการจัดเก็บใน localStorage และ rehydrate ในการรีเฟรชซึ่งเป็นสิ่งที่บริบท API ยังไม่สนับสนุน

ตามที่ @dan_abramov พูดถึงในบล็อกของเขาคุณอาจไม่ต้องการ Redux redux นั้นมีแอปพลิเคชั่นที่มีประโยชน์เช่น

คงสถานะไว้ที่ที่จัดเก็บในตัวเครื่องแล้วบูทขึ้นมานอกกรอบ

สถานะการเติมล่วงหน้าบนเซิร์ฟเวอร์ส่งไปยังไคลเอนต์ใน HTML และบูตจากมันออกมาจากกล่อง

เรียงลำดับการกระทำของผู้ใช้และแนบพวกเขาพร้อมกับภาพรวมของรัฐเพื่อรายงานข้อผิดพลาดอัตโนมัติเพื่อให้นักพัฒนาผลิตภัณฑ์
สามารถเล่นซ้ำพวกเขาเพื่อทำซ้ำข้อผิดพลาด

ส่งวัตถุการกระทำผ่านเครือข่ายเพื่อใช้สภาพแวดล้อมการทำงานร่วมกันโดยไม่มีการเปลี่ยนแปลงอย่างมากกับวิธีการเขียนโค้ด

รักษาประวัติเลิกทำหรือใช้การกลายพันธุ์ในแง่ดีโดยไม่มีการเปลี่ยนแปลงอย่างมากกับวิธีการเขียนโค้ด

เดินทางระหว่างประวัติศาสตร์ของรัฐในการพัฒนาและประเมินสถานะปัจจุบันใหม่จากประวัติการกระทำเมื่อรหัสมีการเปลี่ยนแปลง la TDD

ให้ความสามารถในการตรวจสอบและควบคุมอย่างเต็มรูปแบบกับเครื่องมือการพัฒนาเพื่อให้นักพัฒนาผลิตภัณฑ์สามารถสร้างเครื่องมือที่กำหนดเองสำหรับ
แอพของพวกเขา

จัดทำ UIs ทางเลือกในขณะที่นำตรรกะทางธุรกิจมาใช้ซ้ำ

ด้วยแอปพลิเคชั่นมากมายเหล่านี้มันเร็วเกินไปที่จะบอกว่า Redux จะถูกแทนที่ด้วย API บริบทใหม่

— ชูบัตขัตริ
แหล่งที่มา

ตกลง แต่การใช้ซ้ำได้ บริบทนั้นสามารถนำมาใช้ซ้ำได้อย่างสมบูรณ์เมื่อ redux + thunk และโดยเฉพาะ redux + saga แทบจะไม่

— Yurii Haiovyi

4

@Daggett สิ่งหนึ่งที่เราต้องเข้าใจคือ redux ไม่ใช่บริบทมันสร้างขึ้นจากบริบทร้านค้าที่คุณถูกส่งผ่านตามบริบทคุณสามารถอธิบายสิ่งที่คุณหมายถึงโดยการนำมาใช้ใหม่

— Shubham Khatri

แม้แต่การพัฒนาสิ่งพื้นฐานเช่นภาชนะที่ใช้ซ้ำได้ซึ่งมีผลข้างเคียงก็กลายเป็นฝันร้ายกับการเปลี่ยนถ่าย Redux นั้นแน่นกับระดับแอปพลิเคชั่นและคุณอาจบอกว่ามันยังสามารถใช้ซ้ำได้ ฯลฯ แต่การพูดว่า reuse ผมหมายถึงสามารถนำกลับมาใช้ใหม่ได้ทั้งหมด ... โดยไม่มี spaghetti of spikes สร้างเป็นแพ็กเกจแยกต่างหาก .

— Yurii Haiovyi

@YuriiHaiovyi ฉันเห็นด้วยกับคำถามของคุณ คำตอบนี้เป็นรุ่นรวบรวมสิ่งที่โพสต์บล็อกที่เชื่อมโยงพูด ไม่มีอะไรเกี่ยวกับการแบ่งปันมุมมองของตัวเองเหมือนที่ฉันใช้บริบทเพียงอย่างเดียวและจากนั้นฉันก็ติดขัดและรู้สึกว่ามันเป็นตัวเลือกที่ไม่ดีสำหรับเหตุผล x, y, z แล้วย้ายไปที่ Redux, Mobx ที่แก้ไขได้ .. หรือย้อนกลับ เรื่องเช่น คนส่วนใหญ่ถามหรือค้นหาสิ่งนี้เพื่อดูว่ามีเรื่องราวบางเรื่องที่ไม่ดีหรือดีซึ่งอาจช่วยให้ผู้อ่านคิดและทำการตัดสินใจที่คำนวณได้ ... ดังนั้นคำถามของฉันคือเส้นทางที่คุณเลือก?

— Arup Rakshit

4

ส่วนใดของ redux ที่ไม่สามารถใช้ซ้ำได้ คุณสามารถนำ reducers, selectors, action และ action creators กลับมาใช้ใหม่ในแอปพลิเคชันอื่นที่มี redux (ตอบสนองแม้กระทั่งเชิงมุม)

— DávidMolnár

85

หากคุณใช้ Redux เพียงเพื่อหลีกเลี่ยงการส่งอุปกรณ์ประกอบฉากไปยังส่วนประกอบที่ซ้อนกันอย่างลึกล้ำคุณสามารถแทนที่ Redux ด้วยContextAPI ได้ มันมีไว้สำหรับกรณีการใช้งานนี้

ในทางกลับกันถ้าคุณใช้ Redux สำหรับทุกอย่าง (มีคอนเทนเนอร์สถานะที่คาดเดาได้จัดการตรรกะของแอปพลิเคชันของคุณนอกส่วนประกอบของคุณรวมศูนย์สถานะของแอปพลิเคชันของคุณโดยใช้Redux DevToolsเพื่อติดตามสถานะที่ไหนทำไมและอย่างไร การเปลี่ยนแปลงหรือการใช้ปลั๊กอินเช่นRedux Form , Redux Saga , Redux Undo , Redux Persist , Redux Logger , ฯลฯ …) จากนั้นไม่มีเหตุผลที่คุณจะต้องละทิ้ง Redux ContextAPI ไม่ได้ให้การใด ๆ นี้

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

อ้างอิงบางส่วน:

— GG
แหล่งที่มา

12

ฉันชอบใช้ redux กับ redux-thunk เพื่อทำการเรียก API (เช่นใช้ Axios) และส่งการตอบกลับไปยัง reducers มันสะอาดและง่ายต่อการเข้าใจ

Context API นั้นเฉพาะเจาะจงมากกับส่วนที่ทำปฏิกิริยา -uxux เกี่ยวกับวิธีที่ส่วนประกอบของ React เชื่อมต่อกับร้านค้า สำหรับเรื่องนี้ปฏิกิริยาตอบสนองเป็นสิ่งที่ดี แต่ถ้าคุณต้องการเนื่องจาก Context ได้รับการสนับสนุนอย่างเป็นทางการคุณสามารถใช้ Context API แทน react-redux

ดังนั้นคำถามควรเป็น Context API เทียบกับ react-redux ไม่ใช่ Context API vs redux นอกจากนี้คำถามมีความเห็นเล็กน้อย ตั้งแต่ฉันคุ้นเคยกับ react-redux และใช้มันในทุกโครงการฉันจะใช้มันต่อไป (ไม่มีแรงจูงใจให้ฉันเปลี่ยน)

แต่ถ้าคุณกำลังเรียนรู้เกี่ยวกับ redux เพียงแค่วันนี้และคุณไม่ได้ใช้มันทุกที่มันคุ้มค่าที่จะให้ Context API ยิงและแทนที่ react-redux ด้วยโค้ด Context API ที่คุณกำหนดเอง อาจจะเป็นวิธีที่สะอาดกว่ามาก

โดยส่วนตัวแล้วมันเป็นคำถามของความคุ้นเคย ไม่มีเหตุผลที่ชัดเจนในการเลือกอย่างใดอย่างหนึ่งเพราะพวกเขาจะเทียบเท่า และภายในปฏิกิริยาตอบสนองจะใช้ Context anyways

— vijayst
แหล่งที่มา

10

เหตุผลเดียวที่ใช้ Redux สำหรับฉันคือ:

คุณต้องการออบเจ็กต์สถานะโกลบอล (ด้วยเหตุผลต่างๆเช่น debuggability, persistence ... )
แอปของคุณมีขนาดหรือใหญ่และควรปรับให้เหมาะกับนักพัฒนาหลายคน: ในกรณีเช่นนี้คุณอาจต้องมีระดับของการอ้อม (เช่นระบบเหตุการณ์): คุณทำการเริ่มเหตุการณ์ (ในอดีต) แล้วคนที่คุณไม่รู้จักในตัว องค์กรสามารถรับฟังพวกเขาได้จริง

คุณอาจไม่ต้องการระดับการอ้อมสำหรับแอปทั้งหมดของคุณดังนั้นจึงเป็นการดีที่จะผสมผสานสไตล์และใช้สถานะ / บริบทท้องถิ่นและ Redux ทั้งสองในเวลาเดียวกัน

— เซบาสเตียน Lorber
แหล่งที่มา

1

หากคุณต้องการใช้มิดเดิลแวร์เพื่อวัตถุประสงค์ต่างๆ ตัวอย่างเช่นการบันทึกการทำงานการรายงานข้อผิดพลาดการส่งคำขออื่น ๆ ขึ้นอยู่กับการตอบสนองของเซิร์ฟเวอร์เป็นต้น

เมื่อข้อมูลที่มาจากหลายปลายทางมีผลกับส่วนประกอบ / มุมมองเดียว

เมื่อคุณต้องการควบคุมการกระทำในแอปพลิเคชันของคุณให้มากขึ้น Redux ช่วยให้สามารถติดตามการกระทำและเปลี่ยนแปลงข้อมูลได้

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

จาก: เมื่อใดที่จะใช้ Redux

— Michał Rejman
แหล่งที่มา