Advanced ReactJS: แนวทางปฏิบัติที่ดีที่สุดสำหรับ React + Redux + Sagas

กาแฟสำหรับความคิด

สิ่งแรกก่อนการแนะนำอย่างรวดเร็วในสิ่งที่เป็นปฏิกิริยา มันเป็นห้องสมุด JavaScript ที่ใช้สำหรับการสร้างส่วนต่อประสานผู้ใช้ มันเปลี่ยนแนวการพัฒนาแบบ Front-end นับตั้งแต่มันออกมา ดังนั้นหากคุณต้องการเป็นห้องสมุดการเรียนรู้ของนักพัฒนาเว็บส่วนหน้าอย่าง React หรือ Vue.js แทบจะเป็นสิ่งจำเป็นในอุตสาหกรรมปัจจุบัน นี่คือบทแนะนำที่ดีถ้าคุณเพิ่งเริ่มเรียนรู้การตอบโต้ https://reactjs.org/tutorial/tutorial.html

ฉันจำได้เมื่อฉันเริ่มเรียนรู้ปฏิกิริยา ฉันมักจะรู้สึกกังวลว่าฉันไม่สามารถเรียนรู้ทุกสิ่งที่ฉันต้องการภาษา JavaScript ที่เปลี่ยนแปลงตลอดเวลาปรากฏอยู่เหนือหัวของฉันและถ้าฉันทำสิ่งที่ถูกต้องฉันจะจบลงด้วยการถามตัวเองว่ามันเป็นวิธีที่ดีที่สุดจริงๆ ที่จะทำมัน? หลังจากบทเรียนออนไลน์หลายร้อยบทค้นหาใน Youtube และกาแฟที่ยังไม่เสร็จ (และส่วนใหญ่ยังไม่ได้ล้าง) ในที่สุดฉันก็เข้าใจอย่างถ่องแท้ถึงสิ่งที่ React พยายามนำเข้าไปในตาราง JavaScript

อย่างไรก็ตามฉันมักจะพยายามหาบทช่วยสอนที่รวมเอาแนวคิดขั้นสูงทั้งหมดของ React เข้าไว้ในบทช่วยสอนขนาดกะทัดรัดหนึ่งชุด

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

พอกับการพูดคุยกัน รหัสพูดคุยกัน ดาวน์โหลดรหัสสำเร็จรูปจาก repo นี้และติดตาม README เพื่อให้คุณเห็นและรู้สึกว่าเรากำลังจะสร้างที่นี่ https://github.com/jelorivera08/react-starter-pack

หน้า Landing ของแอพ

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

เตอร์

ตรงไปที่ไฟล์ selectors.js ที่อยู่ภายในตัวนับคอนเทนเนอร์แนวคิดขั้นสูงแรกที่เราจัดการที่นี่คือ createSelector โดยการดูที่โค้ดก่อนตัวแปรนับ const จะดึงสถานะการนับภายในแผนผังสถานะของ redux โดยใช้ state.get (‘count’)

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

จากนั้นจะใช้ฟังก์ชันผลลัพธ์ภายใน mapStateToProps และด้วย mapStateToProps ตามธรรมชาติสิ่งถัดไปในการกำหนดค่าคือ mapDispatchToProps

สร้างการกระทำ

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

ลด

ด้านบนเป็นตัวลดแอปของเรา สถานะเริ่มต้นถูกล้อมรอบโดย fromJS API จากไม่เปลี่ยนรูปและเป็นชื่อแพคเกจที่ใช้มันปกป้องสถานะเริ่มต้นจากการกลายพันธุ์ React นั้นเข้มงวดมากกับแนวคิดนี้ดังนั้นโปรดระลึกไว้เสมอ createReducer API จาก reduxsauce มีสองอาร์กิวเมนต์

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

นิยายเกี่ยวกับวีรชน

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

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

การแยกรหัส

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

สรุปแล้ว,

มีแพ็คเกจและเครื่องมือมากมายที่ช่วยเราวิศวกรซอฟต์แวร์สร้างโค้ดที่สะอาดและมีประสิทธิภาพมากขึ้น มาพร้อมกับค่าใช้จ่ายค่าใช้จ่ายในการทำความเข้าใจระบบพื้นฐานและที่คิดในการตอบสนอง

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

มันเป็นเรื่องเล็ก ๆ น้อย ๆ เสมอ

ด้วยสิ่งนี้ฉันหวังว่าฉันจะช่วยให้คุณเข้าใจปฏิกิริยาของคุณต่อบทความเล็ก ๆ นี้ ไชโย!