อะไรคือความแตกต่างระหว่าง redux-thunk และ redux-สัญญา?

Question 1

เท่าที่ฉันรู้และแก้ไขฉันหากฉันผิดredux-thunkเป็นมิดเดิลแวร์ที่ช่วยให้เราจัดส่งฟังก์ชัน async และค่าดีบักในการดำเนินการเองในขณะที่ฉันใช้สัญญา reduxฉันไม่สามารถสร้างฟังก์ชัน async ได้โดยไม่ต้องใช้งานของฉันเอง กลไกในขณะที่ Action จะยกเว้นการส่งเฉพาะวัตถุธรรมดาเท่านั้น

อะไรคือความแตกต่างที่สำคัญระหว่างสองแพ็คเกจนี้? มีประโยชน์อะไรบ้างจากการใช้ทั้งสองแพ็คเกจในแอปตอบกลับหน้าเดียวหรือติดกับ redux-thunk ก็เพียงพอแล้วหรือไม่?

Question 2

redux-thunk อนุญาตให้ผู้สร้างการกระทำของคุณส่งคืนฟังก์ชัน:

function myAction(payload){
    return function(dispatch){
        // use dispatch as you please
    }
}

redux-promise อนุญาตให้พวกเขาคืนคำสัญญา:

function myAction(payload){
    return new Promise(function(resolve, reject){
        resolve(someData); // redux-promise will dispatch someData
    });
}

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

Question 3

คุณอาจต้องการ / ต้องการทั้งสองอย่างร่วมกันในแอปของคุณ เริ่มต้นด้วยสัญญาซ้ำซ้อนสำหรับงาน async ที่สร้างสัญญาตามปกติจากนั้นขยายขนาดเพื่อเพิ่ม Thunks (หรือ Sagas เป็นต้น) เมื่อความซับซ้อนเพิ่มขึ้น :

เมื่อชีวิตเรียบง่ายและคุณแค่ทำงาน async ขั้นพื้นฐานร่วมกับครีเอเตอร์ที่ให้คำมั่นสัญญาเดียวredux-promiseจะช่วยปรับปรุงชีวิตของคุณและทำให้สิ่งนั้นง่ายขึ้นอย่างรวดเร็ว (สรุปง่ายๆคือแทนที่จะต้องคิดเกี่ยวกับการ 'ยกเลิก' คำสัญญาของคุณเมื่อพวกเขาแก้ไขจากนั้นเขียน / ส่งผลลัพธ์ออกไปสัญญา redux (-middleware) จะดูแลสิ่งที่น่าเบื่อทั้งหมดให้คุณ)
แต่ชีวิตจะซับซ้อนขึ้นเมื่อ:
- บางทีผู้สร้างแอ็คชั่นของคุณอาจต้องการสร้างสัญญาหลายฉบับซึ่งคุณต้องการส่งเป็นการดำเนินการแยกกันเพื่อแยกตัวลดหรือไม่?
- หรือคุณมีตรรกะที่ซับซ้อนก่อนการประมวลผลและเงื่อนไขในการจัดการก่อนที่จะตัดสินใจว่าจะส่งผลลัพธ์อย่างไรและที่ไหน?

ในกรณีเหล่านี้ข้อดีredux-thunkคือช่วยให้คุณสามารถห่อหุ้มความซับซ้อนไว้ในตัวสร้างการกระทำของคุณได้

แต่โปรดทราบว่าหาก Thunk ของคุณสร้างและส่งมอบสัญญาคุณจะต้องใช้ทั้งสองไลบรารีร่วมกัน :

Thunk จะเขียนแอ็คชั่นดั้งเดิมและส่งพวกเขาไป
redux-promiseจากนั้นจะจัดการแกะที่ตัวลดสัญญาแต่ละรายการที่สร้างขึ้นโดย Thunk ของคุณเพื่อหลีกเลี่ยงแผ่นสำเร็จรูปที่เกี่ยวข้อง (คุณสามารถทำทุกอย่างใน Thunks แทนได้ด้วยpromise.then(unwrapAndDispatchResult).catch(unwrapAndDispatchError)... แต่ทำไมคุณล่ะ?)

อีกวิธีง่ายๆในการสรุปความแตกต่างในกรณีการใช้งาน: จุดเริ่มต้นกับจุดสิ้นสุดของวงจรการดำเนินการ Redux :

Thunks มีไว้สำหรับจุดเริ่มต้นของโฟลว์ Redux ของคุณ: หากคุณต้องการสร้างแอ็คชันที่ซับซ้อนหรือห่อหุ้มตรรกะการสร้างแอ็คชั่นที่น่ากลัวบางอย่างโดยไม่ต้องใช้ส่วนประกอบของคุณและไม่ต้องใช้ตัวลด
redux-promiseเป็นจุดสิ้นสุดของขั้นตอนของคุณเมื่อทุกอย่างถูกต้มให้เป็นสัญญาง่ายๆและคุณเพียงแค่ต้องการแกะและเก็บค่าที่แก้ไข / ปฏิเสธไว้ในร้านค้า

หมายเหตุ / REFS:

ฉันพบว่าredux-promise-middlewareการนำแนวคิดที่อยู่เบื้องหลังแนวคิดดั้งเดิมredux-promiseมาใช้อย่างสมบูรณ์และเข้าใจง่าย redux-promise-reducerมันอยู่ภายใต้การพัฒนางานและยังมีครบครันอย่างชัดเจนโดย
มีมิดเดิลแวร์ที่คล้ายกันเพิ่มเติมสำหรับการเขียน / จัดลำดับการกระทำที่ซับซ้อนของคุณ: หนึ่งที่นิยมมากคือredux-sagaซึ่งคล้ายกันมากredux-thunkแต่ขึ้นอยู่กับไวยากรณ์ของฟังก์ชันเครื่องกำเนิดไฟฟ้า อีกครั้งคุณน่าจะใช้ร่วมกับredux-promise.
นี่เป็นบทความที่ยอดเยี่ยมในการเปรียบเทียบตัวเลือกการจัดองค์ประกอบ async ต่างๆโดยตรงรวมถึง thunk และ redux-contract-middleware (TL; DR: "Redux Promise Middleware ช่วยลดมาตรฐานสำเร็จรูปลงอย่างมากเมื่อเทียบกับตัวเลือกอื่น ๆ " ... "ฉันคิดว่าฉันชอบ Saga สำหรับแอปพลิเคชันที่ซับซ้อนมากขึ้น (อ่าน:" ใช้ ") และ Redux Promise Middleware สำหรับอย่างอื่น" )
โปรดทราบว่ามีกรณีสำคัญที่คุณอาจคิดว่าคุณต้องส่งการกระทำหลายอย่าง แต่คุณทำไม่ได้จริง ๆ และคุณสามารถทำให้เรื่องง่ายๆเป็นเรื่องง่าย นั่นคือที่ที่คุณต้องการให้ตัวลดหลายตัวตอบสนองต่อการโทรแบบ async ของคุณ แต่ไม่มีเหตุผลเลยว่าทำไมตัวลดหลายตัวไม่สามารถตรวจสอบประเภทการกระทำเดียวได้ คุณเพียงแค่ต้องการให้แน่ใจว่าทีมของคุณรู้ว่าคุณกำลังใช้การประชุมนั้นดังนั้นพวกเขาจึงไม่ถือว่าตัวลดเพียงตัวเดียว (ที่มีชื่อเกี่ยวข้อง) สามารถจัดการกับการกระทำที่กำหนดได้

Question 4

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

ReduxPromise จะส่งคืนสัญญาเป็น payload เมื่อมีการส่งการดำเนินการจากนั้นมิดเดิลแวร์ ReduxPromise จะทำงานเพื่อแก้ไขสัญญานั้นและส่งผลลัพธ์ไปยังตัวลด

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

นี่คือการเชื่อมโยงไปยังการกวดวิชาที่ผมพบว่าข้อมูลนี้: https://blog.tighten.co/react-101-part-4-firebase