0:00 สวัสดีทุกคน มี Cin อยู่ที่นี่ ยินดีต้อนรับ สู่วิดีโอการสอน Redux with Redux toolkit สุดท้ายที่ คุณจะต้อง ดู ฉันรับรองว่าถ้าคุณดู วิดีโอนี้จนจบ คุณจะไม่ต้องดู วิดีโอเกี่ยวกับเรื่องนี้อีกเลย เยี่ยมเลย ตอนนี้เราอยู่ในคอมพิวเตอร์ของฉันแล้ว และ เราสามารถเริ่มต้นได้แล้ว สิ่งแรกที่ฉันอยาก ทำคือใช้เวลาสักสองสามนาที ไม่นานเกินไป เพื่อพูดคุยเกี่ยวกับ Redux โดย รวม และพูดถึง แนวคิดหลักสามประการของ Redux ซึ่งก็คือ store actions และ reducers จากนั้นเราจะ สร้างแอปพลิเคชันง่ายๆ โดยใช้ weux toolkit เพื่อให้คุณได้เห็นว่า Pieces ต่างๆ ทั้งหมดมารวมกันอย่างไร และดูว่าการทำงานกับ Redux รุ่นใหม่โดยใช้ Redux นั้นง่ายเพียงใด มา พูดถึง Redux กันดีกว่า Redux เป็น ไลบรารีการจัดการสถานะโดยพื้นฐานแล้ว
0:46 ซึ่งช่วยให้คุณมีสถานะทั่วโลกใน บริบทของ React ซึ่งหมายความว่า คุณสามารถมีสถานะที่สามารถ เข้าถึงได้จากส่วนประกอบใดๆ ก็ได้ไม่ว่าจะอยู่ ที่ใดในแผนผัง นี่คือสาเหตุที่ เรียกว่าไลบรารีการจัดการสถานะ และทำให้ การกำหนดค่ารูปภาพและรีดิวเซอร์เป็นเรื่องง่ายมาก มีสถานะทั่วโลก ในแอปพลิเคชัน React ของคุณ ดังนั้น Redux จึงมีแนวคิดที่แตกต่างกันสามแบบและ ทั้งหมดนั้นสำคัญมาก แนวคิดแรกคือแนวคิดของร้านค้า ดังนั้นฉันจะเขียนร้านค้าไว้ที่นี่ ร้านค้า ร้านค้าเป็นสถานะโดยพื้นฐานแล้ว เป็นสถานะทั่วโลกที่ดังที่ฉันเพิ่ง กล่าวไปว่าจะเข้าถึงได้ ผ่านส่วนประกอบใดๆ ไม่ว่าจะอยู่ที่ใด ในแอปพลิเคชัน React ของคุณ ร้านค้าที่คุณสามารถกำหนดได้ในทุกวิถีทางที่ คุณต้องการ คุณสามารถใส่สิ่งที่คุณ ต้องการลงไปได้ มันขึ้นอยู่กับคุณ และความต้องการของแอปพลิเคชัน และ Redux พร้อมชุดเครื่องมือ Redux จะช่วยให้คุณ ตั้งค่านี้ได้อย่างง่ายดาย จากนั้นเชื่อมต่อ
1:33 กับแอปพลิเคชัน React ของคุณ ตอนนี้ ร้านค้ามักจะประกอบด้วยสไลซ์ หลายสไลซ์ สไลซ์หลายสไลซ์ของ สถานะ ซึ่งแต่ละสไลซ์รับผิดชอบ โดเมนเฉพาะในแอปพลิเคชัน ตัวอย่างเช่น สมมติว่าเรามีแอปพลิเคชันตัวนับ เราจะมีสไล ซ์ตัวนับ สไลซ์ตัวนับของสถานะของเรา ซึ่ง จะถือชิ้นส่วนของสถานะที่ เกี่ยวข้องกับตัวนับโดยเฉพาะ ตัวอย่างเช่น เราสามารถทำบางอย่างเช่น อินเทอร์เฟซ จากนั้นก็ตัว นับ สถานะ และเราสามารถกำหนดสถานะใดๆ ที่ เราต้องการสำหรับตัวนับนี้ ตัวอย่างเช่น เราสามารถทำค่าได้ และนั่น จะเป็นประเภทหมายเลข เราจะมี สไลซ์ของสถานะของเราเรียกว่า สถานะเคาน์เตอร์ซึ่งจะถือค่าของ การนับของเราซึ่งเป็นประเภทหมายเลขและจากนั้น จะเป็นส่วนหนึ่งของสถานะ redu ของเรา จากนั้นเราอาจมีชิ้นส่วนอื่น
2:18 ของสถานะของเราเช่นการ โต้ตอบและจากนั้นเราสามารถทำสถานะผู้ใช้ ด้วยตัวพิมพ์ใหญ่และจะถือ ชิ้นส่วนทั้งหมดของสถานะสำหรับผู้ใช้ของเราตัวอย่างเช่น ลงชื่อเข้าใช้ถูกต้องคือผู้ใช้ ลงชื่อเข้าใช้ในขณะนี้คือผู้ใช้ ลงชื่อออกในขณะนี้แน่นอนว่าฉันทำให้ สิ่งนี้ง่ายเกินไปอย่างมากใน แอปพลิเคชันจริงคุณจะมีมากกว่า นี้มาก แต่ประเด็นก็คือสถานะของคุณที่ เก็บข้อมูลส่วนกลางของคุณใน rux จะ ประกอบด้วยสไลซ์หลายชิ้นและ ทั้งหมดมารวมกันเพื่อสร้าง สถานะส่วนกลางหนึ่งอันที่จะ เข้าถึงได้ในแอปพลิเคชันทั้งหมดของคุณ จากนั้นแนวคิดถัดไปใน Redux คือ แนวคิดของการดำเนินการดังนั้นฉันจะมาที่ นี่และทำการดำเนินการการดำเนินการโดย พื้นฐานแล้วสิ่งที่คุณใช้เพื่อบอก weux ว่า ควรทำอะไรกับสถานะใน
3:03 กรณีของสถานะเคาน์เตอร์ของเราที่นี่เรามี ค่าซึ่งเป็นประเภทหมายเลขซึ่ง หมายความว่าเราอาจมีการดำเนินการเพื่อ เพิ่มการนับเพื่อทำให้ค่านี้ บวกหนึ่งและเราอาจมี การดำเนินการเพื่อลด การนับเพื่อทำให้ ค่านี้ลบหนึ่งการกระทำและ Redux มีคุณสมบัติสองอย่างที่ สำคัญมากดังนั้นให้ฉันเขียนโค้ดบางส่วน ที่นี่เพื่ออธิบายสิ่งนี้ซึ่งไม่เหมือนกับ โค้ดจริงนี่คือโค้ดเทียมเพื่อ อธิบายให้คุณเห็นว่าฉันหมายถึงอะไรด้วย ตัวอย่างนี้ฉันจะทำ const increment ซึ่งจะเท่ากับอ็อบเจ็กต์ ซึ่งจะมีประเภทนั้นประเภทนั้นจะ เป็น increment ฉันจะ ลบสิ่งนี้ออกที่นี่แล้วเรายัง มี payload ซึ่งจะเป็นหนึ่ง นี่คือลักษณะของการกระทำและ ให้ฉันทำสิ่งเดียวกันสำหรับ การลด ดังนั้นฉันจะมาที่นี่ และทำการ ลดตอนนี้เรามี pseudo actions สองรายการ
3:50 จำไว้ว่านี่คือรหัสเทียมนี่ไม่ใช่ รหัสจริงพวกเขามีประเภทซึ่ง จะเป็นประเภทสตริงเสมอและ สิ่งนี้จำเป็น นี่คือ ชื่อของการกระทำนี้โดยพื้นฐานแล้ว reux จะ ใช้ประเภทนี้เพื่อกำหนดว่า ควรทำอะไรกับสถานะหากได้รับ การกระทำด้วยประเภทการเพิ่มมันจะ รู้ว่าต้องเพิ่มสถานะ หนึ่งหากได้รับการกระทำด้วย ประเภทการลด มันจะรู้ว่าต้อง ลดสถานะลงหนึ่งจากนั้นเราจะ มีเพย์โหลดที่นี่ซึ่งเป็น คุณสมบัติที่สองของการดำเนินการอันนี้ ไม่จำเป็นซึ่งเป็นทางเลือก เพย์โหลดเป็นข้อมูลใด ๆ ที่คุณ ต้องการส่งไปยัง Redux ในการดำเนินการของคุณเพื่อ ให้สามารถทำงานได้ สมมติว่า แทนที่จะเพิ่มเรามี การดำเนินการที่เพิ่มขึ้นตามจำนวนและ เราต้องการปริมาณที่แน่นอนในการเพิ่ม
4:36 สถานะของเราตามจำนวนที่เราซื้อเราจะใช้ เพย์โหลดนี้เพื่อส่งค่าจริง ที่เราต้องการเพิ่มสถานะของเราซื้อ ซึ่งจะเป็นเพย์โหลดของ การดำเนินการนี้ แต่ในกรณีนี้ในกรณีของ การเพิ่มเราไม่จำเป็นต้องใช้ เพย์โหลดเพราะการเพิ่มจริงๆ หมายถึงการเพิ่มทีละหนึ่งดังนั้นใน กรณีเฉพาะนี้เราสามารถไปโดยไม่ต้องมี เพย์โหลดนี้เราสามารถลบออกได้ที่นี่ ในทั้งสองกรณีเพราะคุณไม่ ต้องการเพิ่มด้วยสิ่งอื่นใด นอกจากหนึ่งคุณจึงไม่ต้องการ เพย์โหลดจริงๆ แต่ถ้าคุณมีการดำเนินการ เช่นการเพิ่มตาม จำนวนใช่แล้วเราจะต้องมี เพย์โหลดที่เฉพาะเจาะจงเนื่องจากเราไม่ทราบว่า เราต้องการเพิ่ม สถานะเป็นจำนวนเท่าใดดังนั้น ในกรณีนี้เรา จะส่งเพย์โหลดไปที่ Redux ในกรณีนี้คือ 10 ซึ่งสามารถเป็นอะไรก็ได้ที่คุณต้องการ เพย์โหลดนี้
5:22 ไม่จำเป็นต้องเป็นตัวเลข มันเป็นเพียง ตัวเลขเท่านั้น เพราะเรากำลังทำงานใน ตัวอย่าง State suro ของเคาน์เตอร์ของเราใช่หรือไม่ แต่คุณ สามารถกำหนดสถานะและ การกระทำของคุณในรูปแบบใดก็ได้ และคุณสามารถส่ง เพย์โหลดใดๆ ก็ตามที่คุณต้องการได้ จากนั้นเรามี แนวคิดที่สามใน rux ซึ่งเป็น แนวคิดของตัวลด ตัวลดนั้นโดยพื้นฐานแล้วมี หน้าที่ในการดำเนินการ จากนั้น จะขึ้นอยู่กับประเภทของการดำเนินการ ซึ่งจะออกไปและทำการอัปเดต ใน Redux store ซึ่งจะใช้ ประเภทของการดำเนินการเพื่อทราบว่าจะต้องทำการอัปเดตใด และจะใช้ เพย์โหลดเพื่อดำเนินการเฉพาะเหล่านั้นเพื่อ ทำการอัปเดตเฉพาะเหล่านั้นใน Redux store ขณะนี้ สิ่งสำคัญอย่างหนึ่งที่ต้อง รู้เกี่ยวกับตัวลด และสิ่งที่ต้องรู้ เกี่ยวกับ Redux โดยทั่วไปก็คือความจริงที่ว่า ตัวลดจะไม่ทำการ อัปเดตใน Redux store โดยตรง เรามี
6:07 แนวคิดเรื่องความไม่เปลี่ยนแปลง ซึ่งหมายความว่า เราไม่ได้รับอนุญาตให้เปลี่ยนแปลง สถานะโดยตรง แทนที่จะเป็นแบบนั้น ตัวลดจะทำการรับ สถานะตามที่พวกเขาต้องการ ในการทำสำเนา สถานะแล้วทำการเปลี่ยนแปลงเหล่านั้นกับ สำเนาของสถานะนั้นซึ่งจะ มีคุณสมบัติไม่เปลี่ยนแปลงอื่น ๆ ทั้งหมด ของสถานะด้วยและจากนั้นจะ แทนที่สถานะทั้งหมดอย่างสมบูรณ์ด้วย สำเนาที่นำการเปลี่ยนแปลงไปใช้ เรา จะไม่กลายพันธุ์สถานะโดยตรง Redux ไม่ทำงานหากคุณกลายพันธุ์ สถานะโดยตรงคุณต้องปฏิบัติตาม แนวคิดของความไม่เปลี่ยนแปลงเสมอทำสำเนา ไปยังสถานะทำการเปลี่ยนแปลงกับ สำเนานั้นแล้วแทนที่สถานะทั้งหมด สิ่งนี้สำคัญมากเพราะนี่คือ วิธีการทำงานของ Redux เจ๋งมากตอนนี้ด้วยสิ่งนี้เรา เข้าใจ Redux อย่างสมบูรณ์เราเข้าใจ
6:52 การดำเนินการของสโตร์และตัวลดและวิธีการ ทำงานร่วมกันทั้งหมดซึ่งหมายความว่าเรา มีทุกอย่างที่จำเป็นในการ เริ่มสร้างแอปพลิเคชันที่เรียบง่ายของเรา ด้วยชุดเครื่องมือ Redux เพื่อให้คุณได้ เห็นวิธีการใช้สโตร์การดำเนินการ และตัวลดและวิธีการ เชื่อมต่อทั้งหมดเข้าด้วยกันได้อย่างง่ายดายด้วย ชุดเครื่องมือ Redux สิ่งแรกที่เรา ต้องทำคือเราต้องสร้างสโตร์ของเรา ดังนั้นฉันจะมาที่นี่ที่ ตัวสำรวจไฟล์ฉันจะสร้าง โฟลเดอร์ใหม่และฉันจะทำให้ทุกอย่าง เรียบง่ายมากฉันจะ เรียก โฟลเดอร์นี้ว่า state แล้วเราจะทำ state และ ภายในโฟลเดอร์นี้ ฉันจะ สร้างไฟล์ใหม่ และไฟล์นี้จะเป็น store TS ไฟล์นี้จะ เก็บ rux store ของเรา ดังนั้นสิ่งที่เราต้องทำ เพื่อสร้าง store คือเราต้องนำเข้า บางอย่างจาก Redux toolkit ดังนั้นฉัน จะทำการนำเข้า configure จริงๆ แล้ว
7:38 ให้ฉันทำเครื่องหมายที่ import configure store แล้วเราก็มี import ตรงนี้เราจะนำเข้า configure store จาก rxjs toolkit ซึ่งจะช่วยให้เรา สร้าง store ของเราได้ง่ายขึ้น จากนั้นเราจะ มาที่นี่และเราจะทำการส่งออก const store เท่ากับ configure store ซึ่ง จะรับ PR es จากนั้นก็เป็น อ็อบเจ็กต์เป็นพารามิเตอร์ จากนั้น อ็อบเจ็กต์นี้จะรับคีย์เดียวเท่านั้นและ จะเป็นตัวลด และตอนนี้ เนื่องจากเราไม่มีตัว ลดจริงๆ เราจะให้สิ่งนี้เป็น อ็อบเจ็กต์เปล่า แต่ทันทีที่เราสร้าง ตัวลดต่างๆ ของเรา ส่วนต่างๆ ของสถานะของเรา ดังที่เราเห็นที่นี่ เราจะมาที่นี่และ เชื่อมต่อพวกมันโดยใช้ store นี้เพื่อให้สามารถ เข้าถึงได้ทั่ว ทั้งแอปพลิเคชันของเรา และในที่สุดสิ่งที่เรา
8:24 ต้องทำเนื่องจากเรากำลังทำงานใน typescript เราจะต้องส่งออก สองประเภทที่จะเป็น เป็น ประโยชน์อย่างมากเมื่อเราทำงานกับ ส่วนประกอบต่างๆ ของ Redux และ ชุดเครื่องมือ Redux ในแอปพลิเคชัน React ของเรา ดังนั้น Copilot จึงเป็นประโยชน์อย่างมาก มัน รู้ชัดเจนว่าฉันต้องการส่งออก ประเภทแรกที่ฉันต้องการส่งออก หากฉัน ทำได้ ก็คือ สถานะราก ซึ่งโดยพื้นฐานแล้วนี่คือ ประเภทผลตอบแทน ซึ่งเป็นยูทิลิตี้ตัวช่วย TypeScript ของประเภทของ store.get state ดังนั้น configure store นี้จะให้ ตัวแปร store ที่นี่ ซึ่งมีฟังก์ชัน get State จากนั้นเราจะรับ ประเภทผลตอบแทนของฟังก์ชันนั้นเพื่อให้มี สถานะรากของเราได้ ดังนั้นในส่วนประกอบ React ใดๆ ก็ตาม ที่คุณจะเห็น เมื่อใดก็ตามที่เราต้องการเข้าถึงสถานะโดย ใช้ตัวเลือก เราจะสามารถ กำหนดสถานะโดยใช้
9:09 ประเภทสถานะรากนี้ จากนั้นเราจะสามารถเข้าถึง สถานะทั้งหมดของเราใน TypeScript ได้อย่าง ง่ายดายมาก จากนั้นด้านล่างสุด เราจะ ส่งออกประเภทอื่น ซึ่งจะ เป็นประเภทการจัดส่งแอป ซึ่งจะมี ประโยชน์มากเช่นกัน ฉันจะ มาที่นี่และทำการส่งออกประเภท การจัดส่งแอป จากนั้นแน่นอนว่า Copilot รู้แน่ชัดว่าฉันต้องการอะไร สิ่งนี้มา จากประเภทของร้านค้า dispatch ดังนั้นเรา จึงมีฟังก์ชั่นอื่นในร้านค้าที่ เรียกว่า dispatch และเราสามารถรับประเภท ของฟังก์ชั่นนั้นแล้วส่งออกเป็น แอป dispatch ประเภทนี้ คุณจะ เห็นว่าสิ่งนี้จะมีประโยชน์มาก เมื่อเราพยายามทำการกระทำแบบอะซิงโครนัสโดย ใช้ dispatch hook ที่เราใช้ เจ๋งมาก ตอนนี้ด้วยสิ่งนี้ เราจึง สร้างร้านค้า Redux สำเร็จแล้ว ขั้นตอนต่อไปที่ เราต้องทำคือเชื่อมต่อร้านค้านี้กับ React เนื่องจาก React โดยค่าเริ่มต้นไม่สามารถ
9:55 สื่อสารกับ Redux ได้โดยตรง เราต้องใช้ ผู้ให้บริการจาก React Redux เพื่อ เชื่อมต่อร้านค้าของเราและ สถานะแอปพลิเคชัน Redux ทั้งหมดของเราเพื่อ React ดังนั้นสิ่งที่ฉัน จะทำ ฉันจะมาที่นี่ใน ไฟล์หลักของฉันทุกที่ที่ฉันกำลัง เรนเดอร์แอปทั้งหมด จากนั้นฉัน จะนำเข้า ผู้ให้บริการถ้าฉันสามารถพิมพ์ได้อย่างถูกต้อง ฉันมี แป้นพิมพ์ใหม่ นั่นคือสาเหตุที่สิ่งนี้ ช้ากว่าเล็กน้อย ผู้ให้บริการจาก React Redux จากนั้นเราจะ นำเข้าร้านค้าที่เราเพิ่งสร้างขึ้น ดังนั้น ฉันจะมาที่นี่และทำการนำเข้า ร้านค้า และนั่นจะมาจาก ร้านค้า State SL นี่คือร้านค้า ที่เราเพิ่งสร้างในขณะนี้ ผู้ให้บริการรายนี้มาโดยตรงจาก React Vux และไม่ใช่จากชุดเครื่องมือซึ่ง จะช่วยให้เราเชื่อมต่อ Redux Store กับแอปพลิเคชัน React ของเรา
10:42 ผู้ให้บริการรายนี้ทำงานร่วมกับ Redux context API ซึ่งหากคุณไม่คุ้นเคย ฉันมีวิดีโอแนะนำทั้งหมดเกี่ยวกับเรื่องนี้ซึ่ง คุณสามารถดูได้เพื่อให้เข้าใจง่ายขึ้น และโดยพื้นฐานแล้วเราจะ หุ้มแอปทั้งหมดของเราด้วยผู้ให้บริการรายนี้ มอบร้านค้าของเราให้กับผู้ให้บริการซึ่ง จะช่วยให้เราสามารถใช้ ร้านค้าในส่วนประกอบ React ใดก็ได้ ดังนั้นฉัน จะมาที่นี่ สร้างบรรทัดใหม่ จากนั้นทำเพียงแค่ผู้ให้บริการ ฉันจะให้ ร้านค้าที่นี่ จากนั้นเขียนด้านล่าง แอป ฉันจะสร้าง บรรทัดใหม่ จากนั้นปิดแท็กผู้ให้บริการนี้ จากนั้น บันทึก จากนั้น ลบสิ่งนี้ออกจริงๆ เพราะสิ่งนี้ไม่จำเป็นและ นี่คือสิ่งที่เราต้องเชื่อมต่อ React กับ Redux ตอนนี้ ดังนั้นเราจึงใช้ผู้ให้บริการรายนี้ เราฉีดมันเข้าไปในร้านค้าโดยใช้บริบท ซึ่งหมายความว่าตอนนี้ร้านค้านี้ จะสามารถเข้าถึงได้จากแอปทั้งหมดของเรา และส่วนประกอบใดๆ ไม่ว่าพวกมันจะ
11:28 อยู่ที่ใดในต้นไม้ มัน มีประโยชน์จริงๆ ตอนนี้ เราได้ตั้งค่าผู้ให้บริการเรียบร้อยแล้ว เราสามารถไปสร้าง สไลซ์สถานะแรกของเราได้ ดังนั้น สิ่งที่เราจะ สร้างในวิดีโอการสอนนี้จะ เป็นแอปพลิเคชันตัวนับที่เรียบง่าย ดังนั้น เราจะต้องสร้างส ไลซ์ตัวนับ ดังนั้น ฉันจะมาอยู่ที่นี่ ในโฟลเดอร์สถานะของฉัน ฉันจะสร้าง โฟลเดอร์ใหม่ชื่อตัวนับ ซึ่ง จะเก็บสไลซ์ตัวนับของเรา จากนั้น ฉันจะสร้างไฟล์ใหม่และเรียกมันว่าส ไลซ์ตัวนับ TS ไฟล์นี้จะ มีทุกอย่างที่เราต้องการ ทุกอย่าง ที่เกี่ยวข้องกับสไลซ์ตัวนับ การกระทำ ตัวลด สถานะของเรา ทั้งหมดจะอยู่ในไฟล์นี้ ดังนั้น สิ่งแรกที่เราต้องทำ เนื่องจาก เรากำลังทำงานใน typescript เราจำเป็นต้อง กำหนดสถานะของเรา ดังนั้น สิ่งที่ฉันจะทำ คือสร้าง อินเทอร์เฟซเคาน์เตอร์สเตท จากนั้นเรา จะให้ค่า และนั่น
12:15 จะเป็นหมายเลขประเภท เรา จะไม่ให้ค่าอื่นใด เพราะ อย่างตรงไปตรงมา เราไม่ต้องการอะไรอื่นใน สถานะของเรา ขั้นตอนต่อไปคือ เราต้อง สร้างสถานะเริ่มต้นของเรา ฉัน จะให้ copilot ช่วยเหลือเราอย่างมาก เรามีสถานะเริ่มต้นซึ่ง จะเป็นประเภทเคาน์เตอร์สเตท และ นั่นจะกำหนดค่าเริ่มต้นเป็น ศูนย์ ซึ่งหมายความว่าเมื่อใดก็ตามที่เรากำลัง กำหนดค่าเริ่มต้นสถานะ มันจะ เริ่มต้นด้วยค่าเป็นศูนย์เสมอ จากนั้น สิ่งที่เราต้องทำคือมาที่นี่และ สร้างสไลซ์จริงของเรา ดังนั้น ฉันจะ ใช้ const counter slice ซึ่งจะ เท่ากับ create slice และฉัน จะนำเข้าสิ่งนี้โดยตรงจาก ชุดเครื่องมือ rxjs จะใช้ วงเล็บ จากนั้นจะใช้ วัตถุเป็นพารามิเตอร์ คีย์ที่ เราจะให้กับวัตถุนี้ คือ ชื่อที่จะเป็นชื่อของ สไลซ์ของเรา ซึ่งจะเป็นเคาน์เตอร์
13:01 เราไม่อยากทำอะไรที่แปลก ๆ ใช่มั้ย นี่เป็นชื่อธรรมดาสำหรับสไลซ์ธรรมดา จากนั้นจะใช้ สถานะเริ่มต้นซึ่งเราสามารถให้ไว้ที่นี่ได้ สถานะเริ่ม ต้นที่จะเป็น สถานะที่สไลซ์นี้จะเริ่มต้นด้วย จากนั้นเราสามารถให้ตัวลดบางอย่างแก่มันได้ ดังนั้น ฉันจะทำแค่ตัวลด จากนั้น สำหรับตอนนี้ เราจะไม่มีตัวลด จริง ๆ ดังนั้น นี่จะ เป็นวัตถุเปล่า ๆ ธรรมดา จากนั้นเรา จะมาที่นี่ที่ด้านล่างและทำ สิ่งที่เจ๋งมาก ๆ ฉันจะ ทำการส่งออกตัวนับค่าเริ่มต้น C สไลซ์ ตัวลดขนาดและบันทึกสิ่งนี้ โดยพื้นฐานแล้วเนื่องจากเราใช้ Create slice จากชุดเครื่องมือ Redux JS ซึ่งให้ ประโยชน์มากมายแก่เรา รวมถึง สิ่งเจ๋งๆ มากมายเบื้องหลังโดยที่เราไม่ต้อง ตั้งค่าอะไรเลย เพียงแค่ กำหนดสไลซ์นี้ที่นี่ เราก็จะสามารถ
13:46 เข้าถึงตัวลดขนาดได้โดยอัตโนมัติ ซึ่งเราจะส่งออกที่นี่โดยการทำ counter slice ตัวลดนี้ ใช้ได้เฉพาะเพราะเราใช้ crate slice จากชุดเครื่องมือ rxjs และมันทำสิ่ง มหัศจรรย์ให้เราได้มาก หากเราไม่ ใช้สิ่งนี้ เราจะต้องเขียน โค้ดสำเร็จรูปมากขึ้นเพื่อให้ได้ ฟังก์ชันเดียวกัน ดังนั้น ตอนนี้ด้วยสิ่งนี้ เราสามารถส่งออก ตัวลดเป็นไฟล์ส่งออกเริ่มต้นของ ไฟล์นี้ได้อย่างมีประสิทธิภาพและง่ายดาย ซึ่งหมายความว่าตอนนี้เราสามารถ มาที่ร้านค้าของเราได้ ซึ่งเราได้กำหนด ร้านค้าของเราแล้ว และเรามีคีย์ตัวลดที่ว่างเปล่า ที่นี่ และเราสามารถนำเข้าตัวลด ที่เราเพิ่งสร้างขึ้นได้ ดังนั้น ฉันจะ มาที่นี่และทำการนำเข้าตัวลดตัวนับ จาก และนั่นจะเป็นตัวนับจุด SLC ตัวนับ โดยพื้นฐานแล้ว นี่คือ ตัวลดที่เราเพิ่งส่งออกที่นี่
14:31 เป็นการส่งออกเริ่มต้น จากนั้นภายใน วัตถุตัวลดนี้ ที่นี่ แทนที่จะ ว่างเปล่า ฉันจะทำตัว ลดตัวนับเคาน์เตอร์ และตอนนี้ เราได้ เชื่อมต่อตัวนับสไลซ์ เข้ากับร้านค้าของเราแล้ว ซึ่งจะ เข้าถึงได้โดยใช้ตัวให้บริการนี้กับ แอปพลิเคชัน React ทั้งหมดของเรา ความสวยงามของ การตั้งค่าด้วยวิธีนี้คือ คุณสามารถ มีสไลซ์ได้มากเท่าที่คุณต้องการ ดังที่เราได้ เห็นมาก่อน มีตัวนับ สถานะที่นี่เรามีสถานะของผู้ใช้เราสามารถ มีสถานะได้หลายสถานะเราจะ สร้างสไลซ์สำหรับแต่ละสถานะเหล่านั้น พวกมันจะมี สไลซ์สถานะเฉพาะของตัวเองและในไม่ช้าเรา จะได้เห็นการกระทำและตัวลดและ จากนั้นคุณก็สามารถรวมทั้งหมดไว้ ที่นี่ซึ่งทำให้การ แยกข้อกังวลเป็นเรื่องง่ายมาก แต่ละ สไลซ์จะรับผิดชอบสถานะของตัวเอง และไม่มีอะไรอื่นและทำให้ทุกอย่างเป็น
15:17 ระเบียบและใช้งานง่ายจริงๆ เจ๋งมากตอนนี้เรามา สร้างการกระทำและตัวลดบางอย่างกันตอนนี้ Redux Toolkit ทำให้สิ่งนี้ ง่ายมากจริงๆ สิ่งเดียวที่เราต้องทำ เพื่อสร้างตัวลด AED และการกระทำ คือการกำหนดตัวลดที่นี่ดังนั้นฉัน จะสร้างบรรทัดใหม่ที่นี่และสิ่งที่ ฉันจะทำคือฉันจะทำการ เพิ่มและนั่นคือ ตัวลดและตัวลดของเราพวกมันจะใช้ สถานะเป็นพารามิเตอร์เสมอจากนั้นพวกมันจะ กลับมาที่นี่และให้ฉันดูว่า copilot สามารถทำได้หรือไม่ ใช่มันทำได้ ดังนั้นตัวลด คุณต้องกำหนดพวกมันด้วยชื่อคุณ ต้องให้คีย์กับพวกมันจากนั้นพวกมัน จะใช้สถานะเสมอและตัวเลือก หากฉันสามารถพิมพ์อย่างถูกต้อง แป้นพิมพ์ของฉันก็ ค่อนข้างจะคุ้นเคยยาก พวกเขา ยังจะดำเนินการที่นี่ด้วย แต่เป็น ทางเลือก ซึ่งไม่จำเป็นต้อง
16:03 เกิดขึ้นเสมอไป เนื่องจากสามารถเกิดขึ้นได้ในกรณี ของการเพิ่ม ตัวอย่างเช่น เมื่อคุณไม่ จำเป็นต้องใช้สิ่งใดจาก การดำเนินการ คุณเพียงแค่รู้ว่าคุณมีการ เพิ่ม และคุณเพียงแค่ต้องอัปเดต สถานะเป็นบวกหนึ่ง ดังนั้น ในกรณีนี้ โดยเฉพาะสำหรับตัวลดการเพิ่ม เราจะไม่ให้สิ่งนี้ เพราะนี่จะเป็นคุณสมบัติที่ไม่ได้ใช้ ตอนนี้มีบางอย่างที่ น่าสนใจจริงๆ ที่ฉันอยากให้คุณ ใส่ใจ เพราะสิ่งนี้ สำคัญมาก โปรดจำไว้ว่าในตอนต้น ของวิดีโอ ฉันบอกว่า Redux คุณจะไม่ กลายพันธุ์สถานะโดยตรง คุณต้อง คัดลอกไปยังสถานะเสมอ จากนั้นคุณ แทนที่สถานะทั้งหมดด้วยสถานะ นั้น ดูเหมือนว่าตัวลดการเพิ่มนี้ จะรับสถานะ จากนั้น จะกำหนดสถานะโดยตรง ค่าบวก เท่ากับ 1 นี่ไม่ใช่การกลายพันธุ์ สถานะโดยตรงหรือไม่ นี่เป็นความผิดพลาดหรือไม่ ไม่ใช่ นี่ ไม่ใช่ความผิดพลาด แต่ในขณะเดียวกัน ฉัน
16:50 ไม่แน่ใจว่ารู้สึกอย่างไรกับสิ่งนี้ เพราะ สิ่งนี้อาจสร้างความสับสนได้จริงๆ โดยเฉพาะ กับผู้ที่เพิ่งเริ่มต้นใช้ Redux โดยพื้นฐานแล้ว สิ่งที่เกิดขึ้นก็คือ เราใช้ crate slice จาก Redux toolkit ตามที่ฉันได้กล่าวไว้ สิ่งนี้ทำสิ่ง มหัศจรรย์มากมายให้เราเบื้องหลัง เพื่อที่เราจะได้ไม่ต้องทำ และโดยพื้นฐานแล้ว สิ่งที่เกิดขึ้น นี่คือการ สร้างสไลซ์ที่ฉลาดพอที่จะ รู้ว่าเราต้องการทำการอัปเดตนี้ให้กับ สถานะ ดังนั้นจึงอนุญาตให้เราเขียน โค้ดที่กลายพันธุ์ได้ ซึ่งฉันใส่ เครื่องหมายคำพูด เพราะเราไม่ได้ กลายพันธุ์มันจริงๆ และสิ่งที่มันจะทำ คือ เบื้องหลัง มันจะสร้าง สำเนาสถานะของตัวเอง นำ การเปลี่ยนแปลงนี้ไปใช้กับสำเนานั้น แล้วส่ง ค่าสถานะใหม่นั้นกลับมาให้เรา จากนั้น เขียนทับสิ่งนี้ ช่วยให้เราเขียน โค้ดที่กลายพันธุ์ได้ ซึ่งทำให้ง่ายขึ้นสำหรับ เรา เพราะเราไม่จำเป็นต้องสร้าง สำเนาทั้งหมดและจัดการสิ่งเหล่านั้น แต่ต้องแลกมาด้วย
17:37 ค่าใช้จ่ายเล็กน้อย สับสนเล็กน้อย เพราะดูเหมือนว่าเรากำลังเขียน โค้ดที่กลายพันธุ์ ดังนั้นโปรดจำไว้ว่า สิ่งนี้สำคัญจริงๆ คุณสามารถทำได้เฉพาะ เมื่อคุณใช้ Create slice จาก Redux มิฉะนั้นคุณจะทำไม่ได้และ คุณจะต้องสร้างสำเนาสถานะของคุณเอง และทำทั้งหมดด้วยตนเอง แต่เนื่องจากเราใช้สิ่งนี้ เราจึงไม่ จำเป็นต้องทำ และจะถูกจัดการ ให้เราโดยอัตโนมัติ ซึ่งการผสมผสาน ความรู้สึก LS อีกครั้งมันสะดวกแต่ก็ สับสนเช่นกัน ดังนั้นตอนนี้เรา เข้าใจแล้วว่าเราสามารถสร้าง ตัวลดถัดไปได้ ซึ่งจะเป็น กรณี decr มันจะง่ายมาก มันจะเหมือนกับสิ่งที่ เราจะทำ การลดค่าจะใช้ สถานะที่นี่ด้วย และจะทำ สถานะด้วย ค่าลบหนึ่งอีกครั้งเนื่องจาก เรากำลังใช้ Create slice เราจึงสามารถทำแบบนี้ได้ และมันจะไม่ใช่ปัญหา เราจะ ไม่กลายพันธุ์สถานะ โดยตรง ดังนั้นตอนนี้สิ่งเหล่านี้เป็นตัวลดของเรา
18:24 เราเพิ่งแจ้ง reux ว่าเรามี ตัวลดสองตัวคือการเพิ่มและการลด และ นี่คือวิธีที่สถานะควรอัปเดต เมื่อใดก็ตามที่เรามีการดำเนินการที่ ต้องการทริกเกอร์ตัวลดเหล่านั้นจริงๆ แล้ว เราจะสร้างการดำเนินการเหล่านั้นได้อย่างไร นี่ เป็นอีกจุดหนึ่งของความมหัศจรรย์ของ ชุดเครื่องมือ Redux เราสามารถเข้าถึงการดำเนินการได้อย่างง่ายดาย โดยเพียงแค่ทำการส่งออก con และฉัน จะให้การคัดลอกเป็นประโยชน์อย่างมาก เราจะส่งออก con การเพิ่มและ การลดจาก counter slice การดำเนินการเช่น เดียวกับที่เราสามารถเข้าถึง ตัวลดจากสไลซ์ตัวนับนี้โดย ใช้ชุดเครื่องมือ rux เรายังสามารถรับ การดำเนินการโดยตรงจากส ไลซ์ตัวนับนี้และฉลาดพอที่จะรู้ ว่าเรามีการดำเนินการเพิ่ม และการดำเนินการลดเท่านั้นซึ่งทำให้มัน ง่ายมากจริงๆ เพราะเราไม่จำเป็นต้อง เขียนโค้ดพิเศษใดๆ เพื่อสร้าง
19:10 การดำเนินการของเรา และตอนนี้เราได้ส่งออก การดำเนินการของเราแล้ว ซึ่งหมายความว่าเราสามารถ ใช้การดำเนินการเหล่านี้ในส่วนประกอบ React ได้โดยตรง ดังนั้นเราจึง สามารถมาที่นี่ที่แอปของเราได้ เราสามารถ กำจัดโค้ดแนะนำทั้งหมด ที่เรามีก่อนหน้านี้ได้ เราสามารถบันทึกสิ่งนี้และ จากนั้นเราสามารถไปที่ส่วนประกอบตัวนับ ซึ่งตอนนี้ว่างเปล่า ดังนั้นตอนนี้สิ่งที่เรา จะทำคือเราจะเชื่อมต่อ ส่วนประกอบตัวนับนี้กับ Redux เพื่อ เข้าถึงสถานะและเราจะ เชื่อมต่อมันเพื่อให้สามารถจัดส่งการ ดำเนินการบางอย่างได้ สิ่งแรกที่เรา ต้องทำคือเราต้องเชื่อมต่อสิ่งนี้กับ สถานะ ดังนั้นฉันจะสร้าง บรรทัดใหม่ที่นี่และฉันจะทำ const count จะเท่ากับการใช้ selector ที่จะมาจาก React Redux นี่คือฟังก์ชั่น นี่คือตัวเชื่อม ดังนั้นจึง ใช้เครื่องหมายวงเล็บ จากนั้นยัง ใช้สถานะเป็นพารามิเตอร์ และ จะส่งคืนบางสิ่งบางอย่างมาที่นี่ ดังนั้น มา
19:56 ทำการระบุสถานะกันดีกว่า นับว่าไม่ถูกต้อง เพราะเรายังไม่ได้เพิ่มประเภทใดๆ ลง ในสถานะของเรา โปรดจำไว้ว่า ถ้าฉันไปที่ ร้านค้าที่นี่ เราได้ส่งออก ประเภทที่แตกต่างกันสองประเภทที่นี่ ประเภทหนึ่ง คือสถานะราก ดังนั้น เราจึง จะใช้สถานะรากนี้เพื่อกำหนด สถานะของเราที่นี่ ดังนั้น ฉันจะทำ ที่นี่ จากนั้นนำเข้าสถานะราก จากสถานะ เก็บและตอนนี้รู้ สถานะแล้ว count ไม่ถูกต้องเพราะนั่น ไม่ใช่วิธีที่เรากำหนดสถานะของเรา ดังนั้นฉันจะ มาที่นี่ ลบสิ่งนี้แล้ว ทำ state DOT ตอนนี้จะรู้ว่าเรา มี counter slice แล้วฉันจะทำ dot อีกครั้ง และรู้ว่าเรามี ค่าที่จะเป็น หมายเลขประเภท เพราะนั่นคือวิธีที่เราได้กำหนดไว้ ใน counter slice ที่นี่ ซึ่งหมายความ ว่าตอนนี้ตัวแปร count นี้เป็น หมายเลขประเภท เพราะทุกอย่างถูกต้อง พิมพ์ นี่คือวิธีที่คุณเชื่อมต่อ React กับ
20:42 Redux คุณต้องใช้ตัวเลือกของคุณ จากนั้นคุณจะได้สถานะ จากนั้นคุณสามารถ เลือกทุกอย่างที่คุณต้องการ เราสามารถเลือกอะไรก็ได้นอกเหนือจาก count แต่ในกรณีนี้ เราต้องการ count นั่นคือวิธีที่เราได้ count สิ่งต่อไปที่เราต้องทำ คือ เราต้องเชื่อมต่อสิ่งนี้กับแพตช์ dis เพื่อให้เราสามารถจัดส่ง การดำเนินการไปยังร้านค้า Redux ของเราได้ ดังนั้น ฉันจะ ทำ const dispatch ที่นี่ และนั่น จะเท่ากับใช้ dispatch ซึ่ง จะมาจาก Redux โดยตรง เราจะใช้ dispatch นี้ เพื่อจัดส่งการดำเนินการ เพราะอย่างที่ฉันได้กล่าวไปแล้ว React ไม่สามารถพูดคุยกับ Redux โดยตรงได้ เรา ต้องใช้บางส่วนของ ฮุกจาก React Redux เพื่อให้เรามี ฟังก์ชันการทำงานเพื่อเชื่อมต่อระหว่าง คอมโพเนนต์ React และร้านค้า Redux ของเรา จากนั้นฉัน จะสร้างพื้นที่ตรงนี้ สร้างบรรทัดใหม่ จากนั้นเราจะ สร้างคอมโพเนนต์ของเราได้จริง ดังนั้น
21:27 สิ่งแรกที่ฉันต้องการทำอาจเป็น บางอย่างเช่น H2 จากนั้นใส่การนับของเรา ที่นี่ โอ้พระเจ้า มันยากมากที่จะ พิมพ์ด้วยแป้นพิมพ์นี้ ฉันไม่สามารถ พิมพ์นับได้ตลอดชีวิต นั่นแหละ ใน ที่สุด หลังจากผ่านไป th ปี จากนั้นฉัน จะสร้าง div ใหม่ที่นี่ด้วย ปุ่มสองปุ่ม ปุ่มที่นี่เพื่อให้ ฉันแก้ไขสิ่งนี้ ปุ่มที่นี่เพื่อ เพิ่ม จากนั้นปุ่มที่นี่ เพื่อลด ขณะนี้ ไม่มีฟังก์ชันใดแนบมากับสิ่งเหล่านี้ และเรา จะเปลี่ยนแปลงสิ่งนั้นในอีกสักครู่ ปุ่มเมื่อ คลิกจะ เท่ากับที่นี่ เราจะสร้าง วงเล็บ สร้างสิ่งนี้และสิ่งนี้ และตอนนี้ เราจะ จัดส่ง และการจัดส่งจะดำเนินการ และนั่นคือการเพิ่มของเรา ซึ่ง
22:14 อีกครั้ง เราสามารถนำเข้าโดยตรงจาก สไลซ์ตัวนับของเรา ดังนั้น นี่คือ สิ่งที่เราส่งออกที่นี่ เราได้ส่งออกการ ดำเนินการเพิ่มนี้ ซึ่งเราสามารถ นำเข้า ในตัวอย่างเคาน์เตอร์ของเราแล้ว เราสามารถจัดส่งได้ แต่เนื่องจากเป็น ฟังก์ชันเราจำเป็นต้องใส่ เครื่องหมายวงเล็บที่นี่ด้วยจากนั้นเราจะทำ สิ่งเดียวกันที่นี่สำหรับการลดลงเมื่อ คลิกเท่ากับที่นี่จากนั้นเปิด วงเล็บแล้วฟังก์ชันลูกศร จัดส่งการลดการนำเข้าสิ่งนี้เช่นกัน จากนั้นเรียกสิ่งนี้และเราทำเสร็จแล้วนี่ คือวิธีที่คุณจัดส่งการกระทำใน Redux คุณ ใช้การจัดส่งนี้จากใช้การจัดส่ง จากนั้นคุณใช้การกระทำที่มาจาก การกระทำที่นี่ของสไลซ์ของเราจากนั้น คุณสามารถจัดส่งได้อย่างง่ายดายและจากนั้น ทุกอย่างอื่นจะถูกจัดการ โดยอัตโนมัติสำหรับคุณตอนนี้ถ้าเรากลับไป
23:00 ที่แอปพลิเคชันของเราตอนนี้เราจะเห็นเคาน์เตอร์ของเรา ซึ่งเริ่มต้นด้วยศูนย์ และจากนั้นเรามีปุ่มเพื่อเพิ่ม และปุ่มเพื่อลดการนับหากฉันกดมัน จะเพิ่มขึ้นหนึ่งหาก ฉันกดลดมันจะ ลดลงและโดยพื้นฐานแล้วสิ่งนี้ทำงานได้ อย่างที่เราคาดหวังเรามี ตัวอย่างเคาน์เตอร์ที่ใช้งานได้เต็มรูปแบบซึ่งนำไปใช้ใน Redux พร้อมกับ Redux tokit เยี่ยมมากตอนนี้ที่ เราได้เห็นวิธีการทำงานแล้วมาสร้าง การกระทำอื่นในครั้งนี้ด้วย อาร์กิวเมนต์เพราะตอนนี้การกระทำการเพิ่มและ ลดของเราไม่ได้ รับอาร์กิวเมนต์ใด ๆ ดังนั้นเราจะมาที่นี่ กลับไปที่สไลซ์ของเราแล้วเราจะ สร้างตัวลดใหม่ และ ครั้งนี้จะเพิ่มทีละ m หากฉันพิมพ์เพิ่มทีละ จำนวนได้ และครั้งนี้จะใช้ สถานะ แต่คราวนี้จะ
23:47 ใช้การกระทำด้วย เพราะเราจะ ต้องส่งเพย์โหลดเพื่อตั้งค่าว่า เราต้องการให้สถานะ เพิ่มขึ้นเท่าไร ฉันจะทำให้ ฟังก์ชันลูกศรเท่ากันนี้ แล้วมาดูกันว่า Copilot ทำอะไร ใช่ มันฉลาด พอที่จะคิดว่ามันสามารถใช้ เพย์โหลดของการกระทำเพื่อเพิ่ม สถานะ bu แล้วเนื่องจากเรากำลังทำงาน ใน typescript สิ่งที่ฉันต้องการทำคือให้ ประเภทแก่สิ่งนี้ ดังนั้นฉันจะมาที่นี่ แล้วทำการดำเนินการเพ ย์โหลด เราจะ นำเข้าสิ่งนี้โดยตรงจากชุดเครื่องมือ reux จากนั้นเราจะให้ประเภทกับมัน ซึ่งจะ เป็นตัวเลข บันทึกสิ่งนี้ แล้วเราก็มีการเพิ่มทีละจำนวนที่ใช้ ในสถานะเช่นเดียวกับตัวลดอื่นๆ จากนั้นจึงใช้ในการกระทำเสริม ด้วยเพย์โหลดเสริม และ น้ำหนักบรรทุกนั้นจะมีประเภทหมายเลข ซึ่งหมายความว่าเราสามารถระบุสถานะได้ คุณค่า
24:34 บวกเท่ากับการกระทำ โหลด โหลดนี้ คุณสามารถกำหนดมันได้ในทุกวิถีทางที่คุณ ต้องการ แทนที่จะเป็นตัวเลข เราอาจมี บางอย่างเช่นวัตถุที่นี่ซึ่งมี ค่า จากนั้นเราสามารถทำตัวเลขได้ จาก นั้นสิ่งนี้จะไม่ทำงานอีกต่อไป เพราะ เราจะต้องทำค่าจริง ๆ เพื่อให้ ได้ตัวเลขจริง ดังนั้นมันจึงเป็น ตัวเลขบวกตัวเลขที่ถูกต้อง แต่เรา จะไม่ทำแบบนั้น เราแค่ต้อง นับเพราะเราต้องการเก็บ สัญลักษณ์ไว้ และจริงๆ แล้วสิ่งที่เราต้องการก็คือการนับ แต่อีกครั้ง คุณสามารถค้นหาสิ่งนี้ได้ในทุกวิถีทาง ที่คุณต้องการ นั่นคือประเด็นทั้งหมดของ Redux คือมันขึ้นอยู่กับแอ ปพลิเคชันและสิ่งที่ต้องการ และคุณ สามารถกำหนดค่าสิ่งนี้ได้ในทุกวิถีทางที่ คุณต้องการ จากนั้นเพื่อเข้าถึงการ ดำเนินการนี้ ทั้งหมดที่เราต้องทำคือมาที่ นี่แล้วเพิ่มทีละจำนวน และ อีกครั้ง มันรู้แล้วว่านี่คือ การดำเนินการ ดังนั้นเราจึงสามารถใช้มันใน คอมโพเนนต์ตัวนับได้อย่างง่ายดาย เราสามารถมาที่นี่แล้ว เพิ่มทีละจำนวน มันรู้แล้วว่า จาก
25:21 นั้นแทนที่จะเพิ่ม เราสามารถ ซื้อทีละจำนวน จากนั้นเราสามารถส่งมันที่นี่ 10 ตัวอย่างเช่น บันทึกสิ่งนี้กลับไปที่การ เพิ่มแอปพลิเคชัน มันจะเพิ่มทีละ 10 เพิ่มอีกครั้ง 10 อีกครั้ง เพิ่ม อีกครั้ง เมื่อฉันกดลด อันนี้ ยังคงทำทีละหนึ่ง ดังนั้น แอปพลิเคชันนี้จึงทำงานตามที่คุณคาดหวัง นี่คือความง่ายในการสร้าง การกระทำจำนวนเท่าใดก็ได้ คุณเพียงแค่กำหนด ตัวลด คุณส่งออกการกระทำและ ทุกอย่างก็ทำงานได้อย่างง่ายดาย ตอนนี้ให้ฉัน แสดงบางสิ่งที่เจ๋งและมี ประโยชน์จริงๆ ให้คุณดู เราจะมาดู การกระทำแบบอะซิงโครนัส เพราะความจริงก็ คือ ถ้าคุณทำงานกับสุนัขสามตัว บ่อยครั้ง คุณจะต้องทำการกระทำแบบซิง โครนัส ตัวอย่างเช่น คุณต้องการ ดึงข้อมูลบางส่วนจาก API ที่ต้อง เป็นแบบอะซิงโครนัส และมี ความแตกต่างเล็กน้อยเมื่อคุณทำเช่น นั้นเมื่อเทียบกับการกระทำง่ายๆ ที่เป็นแบบซิงโครนั
26:07 ส ดังนั้นมาที่นี่และเราจะ กำหนดการกระทำแบบอะซิงโครนัสของเรา เราจะ ทำการส่งออก const เพิ่มแบบ อะซิงโครนัส ซึ่งจะเท่ากับ สิ่งใหม่ที่จะเท่ากับ สร้างแบบอะซิงโครนัส thunk สิ่งนี้จะ มาจากชุดเครื่องมือ meix นี่คือวงเล็บ จากนั้นจะต้องมีอาร์กิวเมนต์เล็กน้อย ดังนั้นอาร์กิวเมนต์แรกจะเป็น ชื่อของการกระทำ ดังนั้นเราเพียงแค่ จะ ทำการเพิ่มตัวนับ SL แบบอะซิง โครนัส ฉันสามารถพิมพ์การ เพิ่มแบบ อะซิงโครนัสแบบซิงค์ได้หรือไม่ และนั่นจะเป็นเครื่องหมายจุลภาค จากนั้น มันจะใช้ ฟังก์ชันจริง และหวังว่าเราจะให้ โคไพลอตทำงานได้อย่างดี นี่จะเป็น
26:54 ฟังก์ชันอะซิงโครนัส มัน จะใช้พารามิเตอร์ในกรณีของเรา ซึ่งจะ เป็นจำนวน ซึ่งจะมีค่าเป็น ประเภทหมายเลข จากนั้นจะ รอ 1 วินาที ซึ่งจะ จำลองการรอให้บางอย่างเกิดขึ้น สิ่งนี้สามารถจำลองได้ เช่น การดึง ข้อมูลจาก API ซึ่งอาจ ใช้เวลาหนึ่งวินาที จากนั้นจะ ส่งคืนจำนวน มันง่ายมาก เป็น ตัวอย่างง่ายๆ ในขณะที่เรากำลังล้อเลียน ฟังก์ชันอะซิงโครนัส แต่โดยพื้นฐานแล้ว เราเพียงแค่ส่งคืนค่าที่นี่ ซึ่งจะ เป็นเพย์โหลดของ การดำเนินการนี้ ตอนนี้มีสองสิ่งสำคัญมาก ที่เราเพิ่งทำไป สิ่งแรก คือชื่อ เราไม่ได้ กำหนดชื่อใดๆ สำหรับ การดำเนินการอื่นๆ เหล่านี้ในตัวลด นั่นเป็น เพราะชุดเครื่องมือ reux จะ ทำสิ่งนั้นให้เราโดยอัตโนมัติ ดังนั้นโดยพื้นฐานแล้ว ทุกๆ อย่างของสิ่งเหล่านี้คือ จะเป็น เคาน์เตอร์ SL เพิ่มเคาน์เตอร์ SL
27:41 ลดเคาน์เตอร์ SL เพิ่มจำนวน เราจะเห็นสิ่งนี้ในอีกสักครู่ ขณะที่เราดูเครื่องมือ Redux def แต่ใน กรณีของฟังก์ชันอะซิงโครนัส เรา ต้องกำหนดชื่อของเรา เอง ดังนั้นเราจึงทำเคาน์เตอร์ SL เพิ่มแบบอะซิง โครนัส นี่คือสิ่งแรก และ สิ่งที่สองคือในกรณีของ การดำเนินการแบบซิงโครนัส คุณต้องกำหนดการ ดำเนินการก่อนเสมอโดยใช้ Create async thunk จากนั้นคุณกำหนดตัวลด เมื่อเรามีการดำเนินการแบบซิงโครนัส เราทำตัว ลดก่อน จากนั้นเราจึงทำการดำเนิน การ มันแตกต่างกันเล็กน้อย เพราะเรากำลังทำงานกับฟังก์ชันอะซิงโครนัส และวิธีที่คุณ กำหนดตัวลดสำหรับฟังก์ชันอะซิงโครนัสก็ แตกต่างกัน เนื่องจากมันไม่ เข้าไปในอ็อบเจกต์ตัวลดนี้ มัน เข้าไปที่นี่ที่ด้านล่างในบางสิ่งที่ เราเรียกว่าตัวลดพิเศษ และสิ่งนี้ จะใช้ฟังก์ชัน เกิดอะไรขึ้น
28:26 คีย์บอร์ดของฉันกำลังเล่นตลกกับฉันอีกแล้ว โอ้พระเจ้า มันน่าอาย วิดีโอทั้งหมดนี้ควรจะเป็นแค่การต่อต้าน คอมพิวเตอร์กับคีย์บอร์ด สิ่งนี้ จะใช้ตัวสร้างเป็นข้อโต้แย้ง คุณไม่จำเป็นต้องกังวลเกี่ยวกับ ตัวสร้างนี้ มันเป็นเพียงเครื่องมือที่ จะช่วยให้คุณเพิ่ม กรณีต่างๆ ลงในตัวลดเหล่านี้ได้ และ ปล่อยให้ Co-Pilot ทำงานของมันให้ดียิ่งขึ้น เรา มี Builder แล้ว เพิ่มกรณีแล้วนี่คือ เวทมนตร์ที่เรามี increment async do complemented เรากำลังได้รับการเข้าถึงเพื่อทำ complemented เพราะเราใช้ create assing thunk เรายังจะได้รับการเข้าถึงเป็น pending จากนั้น error State เพราะเมื่อคุณกำลังทำงานกับ ฟังก์ชั่นอะซิงโครนัส คุณ จะมีสถานะที่แตกต่างกันเสมอ คุณ จะมี pending State ในขณะที่ การดำเนินการนั้นกำลังทำงานอยู่ ในกรณี นี้ ในขณะที่เรากำลังรอ คำสัญญานี้ มันจะอยู่ใน pending State คำสัญญายังไม่ได้รับ
29:12 การแก้ไข ในกรณีของการดึง API เป็น ระยะเวลาที่เราต้องรอ ให้ข้อมูลกลับมาจาก API จากนั้นเราก็มี complemented State เมื่อใดก็ตามที่คำสัญญานี้ได้รับการแก้ไข และเราได้ รับข้อมูลกลับมาบางส่วน ในกรณีนี้ จำนวนที่เราจะอยู่ใน compressed State นี้ และโดยพื้นฐานแล้ว สิ่งที่ เราได้ทำคือ เราได้บอก Builder นี้ ตัว ลดพิเศษนี้ Builder เพื่อเพิ่ม กรณีสำหรับ increment async do complemented ซึ่งควรรันโค้ดบางส่วน อีกครั้ง มันจะใช้สถานะและ การดำเนินการซึ่งเป็นทางเลือก จากนั้นก็ จะทำการอัปเดต สถานะแบบเดียวกันในลักษณะเดียวกับที่เราทำ ที่นี่ เพียงแต่แตกต่างกันเล็กน้อย เพราะเรากำลังใช้ตัวลดพิเศษนี้ ในแนวคิดนี้โดยแท้จริงแล้วทำงานใน ลักษณะเดียวกันทุกประการ มี ความแตกต่างทางไวยากรณ์เพียงเล็กน้อยเท่านั้น เนื่องจากเรากำลังทำงานกับฟังก์ชันอะซิงโครนัส อีกครั้ง ฉันจะกำหนดการดำเนินการที่นี่ ฉัน จะดำเนินการ จากนั้น
29:58 ทำเครื่องหมายโคลอน จากนั้นทำการดำเนินการโหลด ซึ่งจะเป็นประเภทหมายเลข เช่นกัน เพื่อให้เราทราบว่า โหลดนี้เป็นหมายเลขประเภท เพื่อให้เราสามารถ เพิ่มลงในค่าสถานะได้จริง จากนั้นสิ่งนี้จะใช้งานได้ เพราะเราส่งตัวเลข ที่นี่ สิ่งนี้จะส่งคืนตัวเลข ทุกอย่าง ใช้งานได้ ไม่มีสคริปต์ประเภทใดที่จะ บ่น จากนั้นสิ่งที่เราจะทำคือ เราจะเพิ่มอีกกรณีสำหรับ สถานะที่รอดำเนินการ เพื่อให้คุณได้ เห็นวิธีการทำงานของสิ่งนี้ ซึ่งจริงๆ แล้วไม่ จำเป็นสำหรับการดำเนินการนี้ เพราะจริงๆ แล้วเรา ไม่มีประโยชน์สำหรับสถานะที่รอดำเนินการ อย่างไรก็ตาม สิ่ง สำคัญจริงๆ คือการที่พวกเขาเข้าใจว่า แนวคิดนี้ทำงานอย่างไร การทำงานของฟังก์ชันอะซิงโครนัสภายใน Redux ดังนั้นเรา จะทำสิ่งนี้ สิ่งที่ฉันจะทำคือ ฉันจะมาที่นี่และทำ Builder เพิ่มกรณีและหวังว่ามาดูกันว่า Co-pilot สามารถรู้ได้อย่างแน่นอนว่า เราต้องการอะไร มันเยี่ยมมาก มา สร้างบรรทัดใหม่กันตรงนี้ ฉันจะ
30:45 ลบความคิดเห็นนี้เพราะเราไม่ ต้องการสิ่งนี้ แล้วสิ่งที่ฉันจะทำ ฉันจะ ปิดวงเล็บนี้ที่นี่ ฉันจะลบ Builder นี้ที่นี่ และฉันจะเชื่อมต่อกรณีโฆษณาเหล่านี้ และบันทึกไว้ คุณมี Builder หนึ่งตัว คุณสามารถเพิ่มกรณีหนึ่งลงไปได้ จากนั้นคุณสามารถเชื่อมต่ออีกกรณีหนึ่งได้ และ คุณสามารถทำเช่นนี้ได้ตลอดไป และ คุณสามารถเชื่อมต่อกรณีได้มากเท่าที่คุณต้องการ ดังนั้นตอนนี้เรามีกรณีสำหรับการเพิ่ม acing ที่รออยู่ ซึ่งเราจะสามารถเข้าถึงได้ เพราะเรากำลังใช้ thunk acing ที่ยอดเยี่ยมนี้ มิฉะนั้นเราจะไม่สามารถเข้าถึงได้ และในกรณีนี้ เรา ไม่จำเป็นต้องมีสถานะด้วยซ้ำ เพราะเรา จะไม่ทำอะไรกับ สถานะจริงๆ ดังนั้น ฉันจะลบสิ่งนี้ออกไป สิ่งที่เราจะทำคือ เรา จะบันทึกการเพิ่มคอนโซลเป็น sing รอดำเนินการเพื่อให้เราเห็นวิธีการ ทำงานของทั้งหมดนี้ ดังนั้นตอนนี้ด้วยสิ่งนี้เนื่องจาก เราได้ส่งออก
31:30 ฟังก์ชัน increment async นี้แล้ว เราสามารถมาที่ ตัวนับของเราได้ เราสามารถนำเข้า increment async จากนั้นแทนที่จะใช้สิ่งนี้ ที่ นี่เราสามารถทำ increment async จาก นั้นเราสามารถส่งตัวเลขให้มันได้ มัน จะให้ค่าอาร์กิวเมนต์ข้อผิดพลาด ของชนิด async thunk ซึ่งไม่สามารถ กำหนดค่าให้กับการดำเนินการใดๆ ได้ ถูกต้อง เรา ลืมทำสิ่งหนึ่ง จำไว้ว่าที่นี่เรา มีสถานะราก ขอไปที่ คำจำกัดความของมัน เรายังมีการจัดส่ง ADD ซึ่งเราไม่ได้ใช้ นั่นเป็นเพราะเรา จำเป็นต้องใส่ไว้ที่นี่ ดังนั้นเราจะทำการ จัดส่งแอป และสำหรับสิ่งนี้ด้วย ให้ บันทึกสิ่งนี้ และตอนนี้เราไม่มี ข้อผิดพลาดอีกต่อไป สิ่งนี้จำเป็นหากคุณกำลังทำงาน กับการดำเนินการแบบอะซิงโครนัส ดังนั้นเราจึงได้ จัดส่งการดำเนินการ increment async อีกครั้ง เราได้ส่งอาร์กิวเมนต์นี้ไปให้ ซึ่งมันรู้ว่าจะคาดหวังอาร์กิวเมนต์ เพราะเราได้กำหนดไว้ที่นี่ เราบอกว่า
32:16 จำนวนคือตัวเลข ถูกต้อง ดังนั้นนี่คือ อาร์กิวเมนต์ที่จะถูกใช้ จาก นั้นอาร์กิวเมนต์นี้จะถูกส่งกลับมาที่นี่เป็น จำนวนซึ่งจะเข้ามา ในสิ่งนี้ การดำเนินการที่นี่เป็นเพย์โหลดซึ่ง จะช่วยให้เรา อัปเดตสถานะเป็นสถานะของเราได้ดังนั้นหากฉันบันทึกทั้งหมด นี้ให้กลับไปที่ตัวนับของฉันบันทึกทั้งหมด นี้แล้วหากเรากลับไปที่ แอปพลิเคชันหากเราเปิด คอนโซลที่นี่ด้วยเพื่อให้เราเห็น สิ่งที่เกิดขึ้นหากฉันกดเพิ่มเราจะ ได้การเพิ่ม Asing ที่ไม่ค้างอยู่และ 1 วินาทีต่อมาสถานะของเราจะเพิ่มขึ้น 10 มาทำกันอีกครั้ง เพิ่มเราได้รับบันทึกคอนโซลแล้ว หนึ่งวินาทีต่อมาเราได้รับการเพิ่มขึ้น 10 ครั้งที่สามเพื่อให้แน่ใจ เพิ่มบันทึกคอนโซลหนึ่งวินาทีต่อมาเรา ได้ 30 แอปพลิเคชันของเราแอ ปพลิเคชัน reux ของเรารองรับการ ดำเนินการแบบอะซิงโครนัสอย่างสมบูรณ์ซึ่งหมายความว่าเรา
33:02 สามารถทำสิ่งใดก็ได้ที่เป็นแบบอะซิงโครนัส ที่นี่เรามีการเพิ่ม Asing ง่ายๆ แต่คุณสามารถดึงคำขอ API ได้ คุณสามารถทำทุกสิ่งที่คุณต้องการคุณ สามารถมีอาร์กิวเมนต์จำนวนเท่าใดก็ได้ที่นี่ คุณสามารถกำหนดได้ตามต้องการทำ สิ่งที่คุณต้องการในฟังก์ชันนี้ ส่งคืนเพย์โหลดจากนั้นคุณจะเข้าถึง เพย์โหลดนี้ได้ที่นี่ใน Reducer Builder นี้จากนั้นคุณสามารถ อัปเดตสถานะใด ๆ ที่คุณต้องการได้อย่างง่ายดายมาก ๆ เยี่ยมมาก ตอนนี้ฉันจะแสดงสิ่งสุดท้ายให้คุณดู มันจะสั้นมาก แต่ก็คุ้มค่า และฉัน รับรองว่าคุณจะไม่ต้อง ดูวิดีโอเกี่ยวกับเรื่องนี้ อีกเลย สิ่งที่ฉันต้องการแสดงให้คุณดูคือ Redux de tools ซึ่งมี ประโยชน์มากจริงๆ หากคุณทำงานกับ redog เพราะมันช่วยให้คุณดีบักหลายๆ อย่างได้อย่างง่ายดาย คุณสามารถรับสิ่งนี้สำหรับ Chrome ได้ มันง่ายมาก เพียงแค่ใช้ Google Redux def tools แล้วคุณจะได้ มัน เป็นลิงก์แรก โดยพื้นฐานแล้ว สิ่งนี้
33:47 จะเชื่อมต่อกับ Redux store ของคุณโดยอัตโนมัติ จากนั้นจะ แจ้งทุกอย่างที่เกิด ขึ้นในแอปพลิเคชันของคุณ ดังนั้น ฉันจะรีเฟรชตรงนี้ เพื่อให้เรามี สเลทที่สะอาด โดยพื้นฐานแล้ว หากฉันกด increment ที่นี่ ลองดูว่าจะเกิดอะไรขึ้น เราจะ ได้ counter SL increment asyn SL pending จากนั้นเราจะได้ counter SL increment async SL fulfiled สิ่งเหล่านี้มาโดยตรง จากตัวลดของเราที่นี่ จากการกระทำของเรา เพราะเราใช้ create async thunk จำไว้ว่าเราสามารถเข้าถึง pending ได้ จาก นั้นก็ fulfiled สิ่งเหล่านี้ตรงกัน และจำไว้ว่าฉันบอกไปแล้วว่าเราจำเป็นต้อง กำหนดชื่อของฟังก์ชันอะซิงโครนัสนี้ เราต้องให้มันเพิ่มตัวนับที่นี่แบบอะ ซิงค์ นั่นคือสิ่งที่ เรากำลังเห็นที่นี่ เรากำลังเห็นตัวนับ SL ที่เพิ่มขึ้นแบบอะซิงค์ SL ที่รอการดำเนินการ รอการดำเนินการนี้และดำเนินการสำเร็จมาโดยตรง จากการสร้าง assing thunk ไม่เพียงแค่นั้น แต่ที่นี่ทางด้านขวา ถ้าฉันเลือก
34:33 การดำเนินการสำเร็จของคุณ คุณจะเห็น ความแตกต่างที่ชัดเจนของสถานะของเราเมื่อ ดำเนินการนี้ เราเปลี่ยนจาก 00 เป็น 10 หาก ฉันกดเพิ่มอีกครั้ง เราจะได้รับสถานะที่ รอการดำเนินการใหม่ และสถานะนี้เท่ากัน ไม่มีความแตกต่าง เพราะโปรดจำไว้ว่า ในสถานะนี้ สิ่งที่เราทำทั้งหมดคือ เรา ทำการบันทึกคอนโซลเท่านั้น จึงไม่มี สถานะจริงที่กำลังดำเนินการอยู่ แต่ในกรณี ของการดำเนินการสำเร็จ เราเปลี่ยนจาก 10 เป็น 20 คุณ สามารถติดตามได้อย่างง่ายดายว่าการอัปเดตทั้งหมดของคุณ เกิดขึ้นอย่างไร และการดำเนินการใดที่ทำให้เกิดการอัปเดตเหล่านั้น หากเรา ลดค่า คุณจะเห็น ว่าสิ่งเดียวที่เรามีคือการ ลดค่าตัวนับ SL ตอนนี้เราไม่เคย ตั้งชื่อของ การดำเนินการนี้โดยตรงที่ใดเลย นี่เป็นเพราะเราใช้ create slice จากนั้นเราใช้ ตัวลดเหล่านี้ที่นี่ จากนั้นเราส่งออกโดย ใช้สิ่งนี้โดยใช้ counter slice การกระทำ นี้จะถูกจัดการโดยอัตโนมัติสำหรับเรา ดังนั้น คุณไม่ต้องกังวลเกี่ยวกับ
35:19 การกำหนดชื่อของ การกระทำเฉพาะของคุณเลย ชุดเครื่องมือ reux จะดำเนินการ โดยอัตโนมัติสำหรับคุณ และหากฉันคลิก ที่นี่ คุณจะเห็นว่าสถานะของเรา เปลี่ยนจาก 20 เป็น 19 ซึ่งมีประโยชน์มาก เพราะช่วยให้คุณดีบักได้ ช่วยให้คุณ ระบุได้ว่าอะไรผิดพลาดหากมีบางอย่าง ผิดพลาดในแอปพลิเคชัน React ของคุณ และ คุณสามารถติดตามได้อย่างง่ายดายว่าการกระทำใด นำไปสู่ความแตกต่างของสถานะใด ไม่เพียงเท่านั้น แต่คุณสมบัติที่ยอดเยี่ยมอีกอย่างหนึ่งของ เครื่องมือ def เหล่านี้ก็คือ คุณสามารถ ข้ามไปที่การดำเนินการก่อนหน้าได้โดยตรง ตัวอย่างเช่น การเพิ่ม acing ที่เติมเต็ม ฉันสามารถกด ข้ามที่นี่ และตอนนี้สถานะของเราจะย้อนกลับไปยัง สถานะที่ดำเนินการนี้ถูก ต้อง คุณจะเห็นสถานะที่เราเปลี่ยน จาก 0 เป็น 10 10 ฉันข้าม เวลากลับไปโดยตรงได้อย่างง่ายดายเพื่อดูว่า แอปพลิเคชันของฉันเป็นอย่างไรในช่วงเวลาที่เฉพาะเจาะจงนั้น ฉันสามารถคลิกกลับมาที่นี่และ
36:05 ฉันสามารถข้ามไปยังช่วงเวลาปัจจุบัน และ ตอนนี้สถานะของเราคือ 19 ด้วย การอัปเดตต่างๆ เหล่านี้ คุณสามารถข้ามไปที่ การกระทำใดๆ ก็ได้ คุณสามารถย้อนเวลากลับไปและ เดินหน้าต่อไปในเวลาได้อย่างง่ายดาย ซึ่งทำให้เป็นเรื่อง ง่ายจริงๆ debug ถ้าคุณ ทำงานกับ Redux พร้อมชุดเครื่องมือหรือไม่ สิ่งนี้มีค่าจริงๆ และฉันขอ แนะนำให้คุณติดตั้งสิ่งนี้เสมอ เพราะมันมีประโยชน์จริงๆ โอ เคเพื่อนๆ บท ช่วยสอนนี้ยาวมาก ฉันหวังจริงๆ ว่าคุณจะ สนุกกับสิ่งนี้ นั่นคือ Rux พร้อม ชุดเครื่องมือ Reux JS ฉันสัญญากับคุณในตอนต้น ของวิดีโอนี้ว่าถ้าคุณดู วิดีโอนี้และดูจนจบ คุณจะไม่ต้องดูวิดีโอเกี่ยวกับเรื่อง นี้อีกเลย และฉันหวังจริงๆ ว่า ฉันจะสามารถทำให้ คำสัญญานั้นเป็นจริงได้ ถ้าคุณชอบวิดีโอนี้และ ต้องการดูวิดีโออื่นๆ เช่นนี้ คุณสามารถคลิกที่นี่เพื่อสมัครรับข้อมูล ซึ่งจะ ช่วยฉันได้มากจริงๆ คุณยังสามารถ คลิกที่นี่เพื่อดูวิดีโออื่นๆ ของ ฉัน ซึ่งฉันแน่ใจว่ามัน
36:50 ยอดเยี่ยมมากๆ และจากที่กล่าวมา ชื่อของฉันคือ Darus Causin นี่คือ Causin Solutions ขอบคุณมากที่รับ ชม และฉันจะพบคุณทุกคนใน วิดีโอถัดไป Cha Cha
