เริ่มต้นด้วย Redux Thunk

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

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

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

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

• 20 ปลั๊กอิน jQuery ที่ยอดเยี่ยม

ในบทช่วยสอนนี้เราจะใช้ประโยชน์จาก Thunks เพื่อช่วยดึงข้อมูลจากเซิร์ฟเวอร์แทนที่จะจากไฟล์ JSON ทำงานด้วย Photoshare - แอปพลิเคชั่นแสดงความคิดเห็นภาพถ่ายที่ขับเคลื่อนโดย Redux

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

ดาวน์โหลดไฟล์ สำหรับการกวดวิชานี้

01. ติดตั้งการอ้างอิง

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

 / * หนึ่งเทอร์มินัลภายใน / ไซต์ * /
& gt; เส้นด้าย
& gt; จุดเริ่มต้นของเส้นด้าย
/ * หนึ่งเทอร์มินัลภายใน / เซิร์ฟเวอร์ * /
& gt; เส้นด้าย
& gt; เส้นด้ายเริ่ม 

02. ตั้งค่ามิดเดิลแวร์

Redux Thunk เป็น มิดเดิลแวร์ - ฟังก์ชั่นที่อยู่ระหว่างการกระทำและการลดที่สามารถเปลี่ยนวิธีการกระทำเหล่านั้นทำงานได้ Redux รองรับมิดเดิลแวร์หลายชุดที่ครอบคลุมแอปพลิเคชันทั้งหมด พวกเขาเพิ่มเมื่อร้านค้าถูกสร้างขึ้นโดยใช้ เขียน วิธี. เพิ่มมิดเดิลแวร์ให้กับ สร้างสรรค์ วิธีการภายใน index.js

 นำเข้า {applymiddleware, เขียน}
จาก "Redux";
นำเข้าลำต้นจาก "Redux-Thunk";
[... ]
Const Store = createStore (
รูทไรซ์เตอร์,
เขียน (
applyyiddleware (thunk),
devtools
)
); 

03. ตั้งค่าผู้สร้างแอ็คชั่น

สิ่งแรกที่เราต้องทำตอนนี้คือการโหลดภาพถ่ายลงในแกลเลอรี่ เช่นเดียวกับการกระทำปกติเราต้องการผู้สร้างแอ็คชันสำหรับรัฐต่าง ๆ ที่การโทรแบบอะซิงโครนัสจะใช้เวลา ส่วนใหญ่จะมี เริ่มต้น , ความสำเร็จ และ ข้อผิดพลาด การกระทำ สิ่งเหล่านี้ให้ Redux รู้ว่า JavaScript กำลังยุ่งอยู่กับอะไร ภายใน การกระทำ / ภาพถ่าย / ภาพถ่าย. js ตั้งค่าผู้สร้างแอ็คชั่นสามตัวสำหรับสถานะที่แตกต่างกันเหล่านี้

 ส่งออก const loadgallerystart = () = & gt; ({
ประเภท: load_gallery_start});
การส่งออก const loadgallerysuccess =
ภาพถ่าย = & gt; ({
ประเภท: load_gallery_success,
รูปภาพ
});
ส่งออก Const LoadgalleryError = () = & GT; ({
ประเภท: load_gallery_error}); 

04. สร้าง Thunk สำหรับการโหลด

thunks ทำงานเหมือนกับผู้สร้างแอ็คชั่น เรายังคงส่งค่าส่งคืน แต่คราวนี้ส่งคืนฟังก์ชั่นแทนวัตถุ มิดเดิลแวร์ที่เราตั้งค่าก่อนหน้านี้จะผ่านวิธีการจัดส่งลงในฟังก์ชั่นที่ส่งคืน สิ่งนี้ทำให้เราสามารถส่งการดำเนินการเพิ่มเติมเพื่อลดหลังการจัดส่งเริ่มต้น สร้าง loadgallery วิธีการที่ส่งคืนฟังก์ชั่น สำหรับตอนนี้ให้ส่งการดำเนินการเพื่อแสดงว่าแกลเลอรี่ยังคงโหลดอยู่

 ส่งออก const loadgallery = () = & gt;
Dispatch = & GT; {
จัดส่ง (loadgallerystart ());
}; 

05. โหลดข้อมูลจากเซิร์ฟเวอร์

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

 นำเข้า Axios จาก "Axios";
[... ]
ส่งคืน AXIOS
. รับ ("http: // localhost: 3001 / รูปภาพ")
. จากนั้น (ตอบสนอง = & gt; ส่ง (
loadgallerysuccess (Response.data)))
. catch (() = & gt; ส่ง (
loadgalleryError ())); 

06. ส่งขยะ

ลำซ้ายจะไม่ทำอะไรเลยจนกว่าจะถูกส่งไป เราสามารถทำได้ภายในองค์ประกอบตอบสนองเช่นการกระทำอื่น ๆ เวลาที่ดีในการเริ่มโหลดรูปภาพคือเมื่อผู้ใช้ดูแกลเลอรี่หลัก เราสามารถใช้ React's componentdidmount วิธีการวงจรชีวิตเป็นทริกเกอร์หลังจากตรวจสอบแกลเลอรี่ยังไม่ได้โหลดแล้ว ภายใน ส่วนประกอบ / คอนเทนเนอร์ / แกลเลอรี่ / คลังภาพ ส่ง loadgallery การกระทำโดยการเพิ่มเข้าไป mapdispatchtopropps และเรียกมันภายใน componentdidmount .

 componentdidmount () {
ถ้า (! นี้. props.photosloaded) {
นี่.props.loadgallery ();
}
}
การส่งออก const mapdispatchtopropps =
 Dispatch = & GT; ({
loadgallery: () = & gt;
จัดส่ง (Loadgallery ()),
}); 

07. เพิ่มภาพถ่ายในความสำเร็จ

เมื่อภาพถ่ายกลับมาจากเซิร์ฟเวอร์เราจะส่ง load_gallery_success การกระทำกับภาพถ่าย เราจำเป็นต้องได้รับสิ่งนี้เข้าสู่สถานะผ่าน รูปภาพ ลด. มุ่งหน้า reducers / ภาพถ่าย / photos.js และเพิ่มเคสสำหรับการกระทำที่ประสบความสำเร็จ เพย์โหลดมีรูปภาพทั้งหมดเป็นอาร์เรย์ เมื่อสถานะถูกอัพเดตตัวเลือกภาพถ่ายจะส่งภาพถ่ายไปยังคอมโพเนนต์แกลเลอรี่ที่จะแสดง

 case load_gallery_success:
Return Action.Photos; 

08. ตั้งค่า UI

ปัจจุบันภาพถ่ายปรากฏขึ้นทันทีหลังจากโหลด ในการเชื่อมต่อที่ช้าลงผู้ใช้จะดูที่หน้าจอเปล่าจนกว่าคำขอจะเสร็จสิ้นหากเคยทำ การกระทำที่เราส่งให้โหลดรูปภาพสามารถหยิบขึ้นมาใน UI Reducer เพื่อให้อินเทอร์เฟซทันสมัยกับสิ่งที่เกิดขึ้น อัปเดตการโหลดและการตั้งค่าสถานะข้อผิดพลาดภายใน UI Reducer ที่ Reducers / UI / UI.js .

 Case Load_Gallery_Error:
ส่งคืน {... รัฐ,
กำลังโหลด: เท็จข้อผิดพลาด: จริง};
Case Load_Gallery_Start:
ส่งคืน {... รัฐ,
กำลังโหลด: จริงข้อผิดพลาด: เท็จ};
case load_gallery_success:
ส่งคืน {... รัฐ,
กำลังโหลด: false}; 

09. เพิ่มการโหลดและตัวเลือกข้อผิดพลาด

เช่นเดียวกับภาพถ่ายแกลเลอรี่ตัวเองเราต้องการตัวเลือกเพื่อให้ได้ค่า UI ระบุค่าต่าง ๆ ของ Redux เราสามารถส่งต่อเหล่านี้ไปยังแกลเลอรี่ซึ่งจะทำให้องค์ประกอบที่แตกต่างกันหากหนึ่งเป็นจริง ใน เลือก / ui / ui.js เพิ่มฟังก์ชั่นสองอย่างเพื่อให้ได้ค่าออกไป

 ส่งออก const isgalleryerred =
 รัฐ = & gt; state.ui.error;
ส่งออก const isgalleryloading =
 รัฐ = & gt; state.ui.loading; 

10. เพิ่มข้อมูลไปยัง GalleryContainer

ด้วยตัวเลือกพร้อมตอนนี้พวกเขาสามารถเพิ่มลงใน แกลลอรี่ องค์ประกอบคอนเทนเนอร์ การเพิ่มลงที่นี่หมายความว่าส่วนประกอบที่รับผิดชอบในการแสดงแกลเลอรี่ไม่จำเป็นต้องรู้เกี่ยวกับวิธีที่ข้อมูลมาถึง มุ่งหน้า ตู้คอนเทนเนอร์ / แกลเลอรี่ / Gallery.js และเพิ่มตัวเลือกเพื่อ MapStateToprops . ทำให้ค่าคงที่สำหรับค่าที่จะช่วยแสดงสถานะในขั้นตอนต่อไป

 const {ข้อผิดพลาด, กำลังโหลด,
 รูปถ่าย} = นี้ .props;
[... ]
ส่งออก const mapstatetoprops =
 รัฐ = & gt; ({
ข้อผิดพลาด: isgalleryerred (สถานะ),
กำลังโหลด: isgalleryloading (สถานะ),
 }); 

11. แสดงการโหลดและสถานะข้อผิดพลาด

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

 ถ้า (ข้อผิดพลาด) {
Return & Lt; ข้อผิดพลาด / & gt ;;
}
ถ้า (กำลังโหลด) {
Return & Lt; กำลังโหลด / & gt ;;
} 

12. ดึงแกลเลอรี่อีกครั้ง

ด้วยแกลเลอรี่ที่โหลดเราสามารถย้ายไปยังภาพถ่ายแต่ละภาพ การคลิกลงในรูปภาพใด ๆ และการรีเฟรชหน้าไม่โหลดรูปภาพสำรองเนื่องจากไม่มีคำแนะนำในหน้านี้ แต่ยังโหลดแกลเลอรี่ เปิด ภาชนะ / ภาพถ่าย / ภาพถ่าย. js และโหลดแกลเลอรี่ใน componentdidmount เหมือนใน แกลลอรี่ ส่วนประกอบ ที่ ถ่ายภาพ ตรวจสอบจะไม่พยายามโหลดรูปภาพอีกครั้งหากโหลดแล้วภายในแกลเลอรี่

 ถ้า (! นี้. props.photosloaded) {
นี่.props.loadgallery ();
} 

13. เพิ่มความคิดเห็นใหม่

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

 const photo = e.target
 .getboundingclientRect ();
const top = e.clientx - photo.left;
Const left = e.clienty - photo.top;
const toppc = math.round ((ด้านบน /
 photo.width) * 100);
const leftpc = math.round ((ซ้าย /
 Photo.Height) * 100); 

14. บอก Redux เกี่ยวกับความคิดเห็น

ด้วยตำแหน่งที่คำนวณแล้วเราต้องบอก Redux เกี่ยวกับความคิดเห็นเพื่อให้สามารถแสดงแบบฟอร์มความคิดเห็นได้ มีการตั้งค่าการดำเนินการแล้วเพื่อเพิ่มความคิดเห็นใหม่บนหน้าจอ เพิ่ม addnewcomment เข้า mapdispatchtopropps และเรียกมันหลังจากที่เราคำนวณตำแหน่งของการคลิก

 this.props.addnewcomment (
 toppc, leftepc);
[... ]
การส่งออก const mapdispatchtopropps =
 Dispatch = & GT; ({
addnewcomment: (ด้านบนซ้าย) = & gt;
การจัดส่ง (AddNewcomment (ด้านบนซ้าย))
});

15. บอกภาพถ่ายเกี่ยวกับความคิดเห็นใหม่

เมื่อข้อมูลความคิดเห็นใหม่ถูกส่งผ่านไปยัง Redux เราต้องส่งต่อเข้าไปในองค์ประกอบการนำเสนอภาพถ่าย สิ่งนี้ช่วยให้สามารถแสดงแบบฟอร์มได้ที่ตำแหน่งนั้น ค้นหา getnewcomment ตัวเลือกเพิ่มเป็น MapStateToprops และผ่านเสาเข้าไป & lt; ภาพถ่าย & gt; .

 ส่งออก const mapstatetoprops =
 (รัฐอุปกรณ์ประกอบฉาก) = & GT; ({
Newcomment: GetNewcomment (รัฐ),
});
& lt; ภาพถ่าย [... ] newcomment = {
 นี้. props.newcomment} / & gt; 

16. Call Thunk ในความคิดเห็น

การคลิกที่ภาพตอนนี้จะนำรูปแบบความคิดเห็นใหม่ขึ้นมา นี่คือองค์ประกอบที่เชื่อมต่อของตัวเอง เมื่อส่งแบบฟอร์มแล้วมันเรียกว่า ส่งความเห็น ฟังก์ชั่น PROP และได้รับการส่งผ่าน นี่คือสิ่งที่เราจะทำ เปิดออก ภาชนะ / newcomment / newcomment.js และเพิ่ม Thunk to mapdispatchtopropps . ผ่าน prop นั้นลงในองค์ประกอบการนำเสนอที่แสดงผล

 & lt; newcomment [... ]
 ส่งผลงาน = {sutentcomment} / & gt;
การส่งออก const mapdispatchtopropps =
 Dispatch = & GT; ({
ผลผลิต: ความคิดเห็น = & gt; ส่ง (
การส่งผลงาน (ความคิดเห็น))
});

17. รวบรวมเนื้อหาสำหรับ Thunk

The Thunk เพื่อเพิ่มความคิดเห็นใหม่มีโครงสร้างที่คล้ายกันกับการดึงคลังภาพรวมถึงการเริ่มต้นความสำเร็จและการกระทำผิดพลาด มีอาร์กิวเมนต์พิเศษที่ส่งผ่านไปยัง Thhunk นี้ - The getstate ฟังก์ชั่น. สิ่งนี้ช่วยให้สามารถเข้าถึงสถานะปัจจุบันได้โดยตรงเพื่อคว้าข้อมูลจากมัน สร้าง ส่งความเห็น กระฉับกระเฉง การกระทำ / newcomment / newcomment.js . ความคิดเห็นแต่ละรายการเชื่อมโยงกับภาพถ่ายและผู้ใช้ สำหรับการกวดวิชานี้ ID ผู้ใช้จะถูกเข้ารหัสอย่างหนักใน ผู้ใช้ ลด.

 ส่งออก const submitcomment = แสดงความคิดเห็น
 = & gt; (จัดส่ง, getstate) = & gt; {
การจัดส่ง (SubmitCommentStart ());
const currentphotoid =
GetCurrentPhotoid (GetState ());
const ผู้ใช้ =
GetCurrentuser (GetState ());
const {ซ้าย, ด้านบน} =
GetNewcomment (GetState ());
}; 

18. โพสต์คำขอ

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

 ส่งคืน Axios
. โพสต์ (
"http: // localhost: 3001 / ความคิดเห็น", {
user_id: user.id
photo_id: currentphotoid,
ความคิดเห็น,
ซ้าย,
ด้านบน
}) 

19. จัดการกับความสำเร็จและข้อผิดพลาด

หากสัญญาจาก Axios แก้ไขหรือปฏิเสธเราต้องบอกแอปพลิเคชันเกี่ยวกับเรื่องนี้ หากมีการแก้ไขปัญหาให้สำเร็จเซิร์ฟเวอร์จะส่งคืนเนื้อหาของความคิดเห็น เราควรผ่านการกระทำที่ประสบความสำเร็จ หากได้รับการปฏิเสธให้ไฟแอคชั่นข้อผิดพลาด อัปเดตสัญญาด้วย จากนั้น และ จับ บล็อก

. จากนั้น (({ข้อมูล: {
 ID, ความคิดเห็น, ซ้าย, ด้านบน}}) = & gt;
ส่ง (
submitcommentsuccess (
ID, ความคิดเห็น, ซ้าย, ด้านบน,
ผู้ใช้, currentphotoid)
)
)
. catch (() = & gt; ส่ง (
 SubmitCommentError ())); 

20. เพิ่มความคิดเห็นไปยังภาพถ่าย

ตอนนี้เมื่อมีการเพิ่มความคิดเห็นสำเร็จแล้วจะถูกล้างออกจากหน้าจอ แต่ไม่สามารถมองเห็นได้จนกว่าหน้าจะรีเฟรชหน้า เราสามารถอัปเดตตัวลดรูปภาพเพื่อรับความคิดเห็นใหม่และเพิ่มลงในอาร์เรย์ความคิดเห็นเพื่อแสดงเช่นส่วนที่เหลือของพวกเขา เปิด Reducer / Photos / Photos.js และเพิ่มเคสเพื่อจัดการกับการกระทำ สร้างสำเนาของรัฐเพื่อให้แน่ใจว่าเราไม่ได้กลายพันธุ์ของรัฐที่มีอยู่โดยไม่ตั้งใจ

 กรณี submit_comment_success:
const {id, ความคิดเห็น, ด้านบน, ซ้าย,
ผู้ใช้, photoid} = action.payload;
const newstate = json.parse (
json.stringify (รัฐ););
Const Photo = NewState.Find (
รูปภาพ = & gt; photo.id === photoid);
Photo.comments.push ({
ID, ความคิดเห็น, ซ้าย, ด้านบน, ผู้ใช้
});
ส่งคืน NewState; 

21. ซ่อนความคิดเห็นอื่น ๆ

สุดท้ายหากความคิดเห็นอื่นเปิดอยู่และผู้ใช้ต้องการเพิ่มความคิดเห็นใหม่ UI จะรกเกินไป เราควรซ่อนกล่องแสดงความคิดเห็นหากมีความคิดเห็นใหม่ที่กำลังประกอบด้วย เราสามารถขอเข้าสู่ที่มีอยู่ add_new_comment การดำเนินการเพื่อล้าง ความคิดเห็น ค่า. มุ่งหน้า reducer / ui / ui.js และเพิ่มเคสสำหรับสิ่งนั้น

 case add_new_comment:
กลับ {
...สถานะ,
combersopen: ไม่ได้กำหนด
}; 

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 283 ของนิตยสารออกแบบเว็บสร้างสรรค์ นักออกแบบเว็บไซต์ . ซื้อปัญหา 283 ที่นี่ หรือ สมัครสมาชิกกับนักออกแบบเว็บไซต์ที่นี่ .

บทความที่เกี่ยวข้อง:

• 5 apis จาวาสคริปต์ที่ยอดเยี่ยม
• พัฒนาส่วนประกอบปฏิกิริยาที่ใช้ซ้ำได้
• 9 ของกรอบ JavaScript ที่ดีที่สุด