วิธีใช้สไลซ์ใน react-redux

ภาพรวม

เมื่อฉันเริ่มใช้ redux ในการตอบสนอง ฉันรู้สึกว่ามันเกินความสามารถไปหน่อยสำหรับเว็บแอปในอุดมคติ ฉันต้องจัดการไฟล์หลายไฟล์สำหรับแต่ละโมดูล มีโค้ดมากมายที่เกือบจะเหมือนกันและต้องเขียนมันสำหรับทุกโมดูล และฉันคิดเสมอว่าถ้าเราต้องเขียนโค้ดเดิมซ้ำๆ ทำไมมันถึงไม่จัดการโดย redux? เมื่อฉันเรียนรู้เกี่ยวกับ createSlice ฉันรู้สึกว่าในที่สุดฉันก็ได้ยินคำอธิษฐานของฉัน

createSlice คืออะไร

createSlice มาพร้อมกับแพคเกจRedux-เครื่องมือ เป็นฟังก์ชันที่ยอมรับสถานะเริ่มต้น วัตถุที่เต็มไปด้วยฟังก์ชันตัวลด และ "ชื่อส่วน" และสร้างผู้สร้างการดำเนินการและประเภทการดำเนินการที่สอดคล้องกับตัวลดและสถานะโดยอัตโนมัติ

createSlice ทำงานอย่างไร

1. สร้างร้าน Redux ด้วย configureStore
   a. configureStore ยอมรับฟังก์ชั่นลดเป็นชื่ออาร์กิวเมนต์ข
   configureStore ตั้งค่าร้านค้าโดยอัตโนมัติด้วยการตั้งค่าเริ่มต้นที่ดี
2. ให้ร้านค้า Redux เพื่อตอบสนองคอมโพเนนต์ของโปรแกรมประยุกต์ วางองค์ประกอบ React-Redux <Provider> รอบ <App /> b. ผ่านร้าน Redux เป็น <Provider store={store}>
   
   
3. สร้าง Redux ชิ้น“” ลดกับ createSlice
   เรียก createSlice ด้วยชื่อสตริง สถานะเริ่มต้น และฟังก์ชันตัวลดชื่อ
   b ฟังก์ชั่นลดอาจ "กลายพันธุ์" สถานะโดยใช้ Immer
   c ส่งออกตัวลดสไลซ์ที่สร้างขึ้นและผู้สร้างการดำเนินการ
4. ใช้ตอบสนอง-Redux useSelector / useDispatch hooks ใน React ส่วนประกอบ อ่านข้อมูลจากร้านค้าด้วย useSelector hook b รับฟังก์ชันการจัดส่งด้วย useDispatch hook และส่งการดำเนินการตามต้องการ
   
   

โฟลเดอร์ src ของฉันมีลักษณะดังนี้

ขั้นแรก สร้างชิ้นส่วนโมดูลโดยใช้ createSlice ในแอตทริบิวต์ reducers ของฟังก์ชัน createSlice เพิ่มฟังก์ชันที่จะเก็บตรรกะของธุรกิจ/โดเมน

ส่งออกตัวลดที่คุณจะได้รับจากอินสแตนซ์ของ Slice

นำเข้าตัวลดและส่งต่อไปยังตัวลดร้านค้าส่วนกลางขณะสร้างร้านค้าโดยใช้ configurationStore

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

ผู้ให้บริการจะทำให้ร้านค้าพร้อมใช้งานสำหรับแต่ละองค์ประกอบในทุกระดับภายในองค์ประกอบแอพ ตอนนี้เราจะใช้ร้านค้าในองค์ประกอบเคาน์เตอร์ ขั้นแรก คุณจะต้องรับค่าจากร้านค้าโดยใช้ useSelector hook

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

นำเข้าการดำเนินการเหล่านี้ในส่วนประกอบและส่งการดำเนินการที่คุณต้องการโดยใช้ฟังก์ชัน hook useDispatch ฟังก์ชัน useDispatch จะคืนค่าอินสแตนซ์ของประเภท Dispatch

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

หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับ react, redux หรือ slice โปรดแจ้งให้เราทราบในความคิดเห็น

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