Redux · บทนำ

Redux เป็นหนึ่งในไลบรารี่ที่ร้อนแรงที่สุดในการพัฒนา front-end ในปัจจุบัน อย่างไรก็ตาม หลายคนยังสับสนว่ามันคืออะไรและมีประโยชน์อย่างไร

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

อ่านเพิ่มเติม เกี่ยวกับ SmashingMag

• ทำไมคุณควรพิจารณา React Native สำหรับแอพมือถือของคุณ
• ทดสอบระบบอัตโนมัติสำหรับแอพ เกม และเว็บบนมือถือ
• การแสดงผลฝั่งเซิร์ฟเวอร์ด้วย React, Node และ Express
• 6-6-62. หมายเหตุเกี่ยวกับการเข้าถึงโดยไคลเอนต์

Redux ถูกสร้างขึ้นโดย Dan Abramov ประมาณเดือนมิถุนายน 2015 โดยได้รับแรงบันดาลใจจาก Flux ของ Facebook และภาษาการเขียนโปรแกรมเชิงฟังก์ชัน Elm Redux ได้รับความนิยมอย่างรวดเร็วเนื่องจากความเรียบง่าย มีขนาดเล็ก (เพียง 2 KB) และเอกสารประกอบที่ยอดเยี่ยม หากคุณต้องการเรียนรู้ว่า Redux ทำงานอย่างไรภายในและเจาะลึกในไลบรารี ให้พิจารณาดูหลักสูตรฟรีของ Dan

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

มันแตกต่างจาก MVC และ Flux อย่างไร?

เพื่อให้ได้มุมมอง ลองใช้รูปแบบ classic model-view-controller (MVC) เนื่องจากนักพัฒนาส่วนใหญ่คุ้นเคยกับรูปแบบนี้ ในสถาปัตยกรรม MVC มีการแยกข้อมูล (แบบจำลอง) การนำเสนอ (มุมมอง) และตรรกะ (ตัวควบคุม) อย่างชัดเจน มีปัญหาประการหนึ่งโดยเฉพาะในแอปพลิเคชันขนาดใหญ่: การไหลของข้อมูลเป็นแบบสองทิศทาง ซึ่งหมายความว่าการเปลี่ยนแปลงหนึ่งครั้ง (อินพุตของผู้ใช้หรือการตอบสนอง API) อาจส่งผลต่อสถานะของแอปพลิเคชันในหลายตำแหน่งในโค้ด เช่น การผูกข้อมูลแบบสองทาง การบำรุงรักษาและแก้ไขข้อบกพร่องได้ยาก

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

ประโยชน์ของ Redux

คุณอาจจะถามว่า “ทำไมฉันถึงต้องใช้ Redux?” คำถามที่ดี มีประโยชน์บางประการของการใช้ Redux ในแอปพลิเคชันถัดไปของคุณ:

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

ฟังก์ชั่นการเขียนโปรแกรม

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

• มันสามารถปฏิบัติต่อฟังก์ชั่นเหมือนวัตถุชั้นหนึ่ง
• สามารถส่งผ่านฟังก์ชันเป็นอาร์กิวเมนต์ได้
• สามารถควบคุมการไหลโดยใช้ฟังก์ชัน การเรียกซ้ำ และอาร์เรย์
• สามารถใช้ฟังก์ชันที่บริสุทธิ์ เรียกซ้ำ ลำดับที่สูงกว่า ปิดและไม่ระบุตัวตน
• สามารถใช้ฟังก์ชันตัวช่วย เช่น แผนที่ ตัวกรอง และลดขนาด
• สามารถเชื่อมโยงการทำงานต่างๆ เข้าด้วยกันได้
• สถานะไม่เปลี่ยนแปลง (เช่น เปลี่ยนแปลงไม่ได้)
• ลำดับของการใช้รหัสไม่สำคัญ

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

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

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

เนื่องจากฟังก์ชัน pure ไม่ได้แก้ไขค่าใดๆ ค่าเหล่านี้จึงไม่มีผลกระทบใดๆ กับขอบเขตหรือผลข้างเคียงใดๆ ที่สังเกตได้ และนั่นหมายความว่านักพัฒนาสามารถมุ่งเน้นเฉพาะค่าที่ฟังก์ชัน pure ส่งคืนเท่านั้น

สามารถใช้ Redux ได้ที่ไหน?

นักพัฒนาส่วนใหญ่เชื่อมโยง Redux กับ React แต่สามารถใช้กับไลบรารีมุมมองอื่นๆ ได้ ตัวอย่างเช่น คุณสามารถใช้ Redux กับ AngularJS, Vue.js, Polymer, Ember, Backbone.js และ Meteor Redux plus React ยังคงเป็นชุดค่าผสมที่พบบ่อยที่สุด อย่าลืมเรียนรู้ React ตามลำดับที่ถูกต้อง: คำแนะนำที่ดีที่สุดคือ Pete Hunt's ซึ่งมีประโยชน์มากสำหรับนักพัฒนาที่เริ่มต้นใช้งาน React และรู้สึกท่วมท้นกับทุกสิ่งที่เกิดขึ้นในระบบนิเวศ ความล้าของ JavaScript เป็นปัญหาที่ถูกต้องตามกฎหมายในหมู่นักพัฒนา front-end ทั้งใหม่หรือมีประสบการณ์ ดังนั้นให้ใช้เวลาในการเรียนรู้ React หรือ Redux อย่างถูกวิธีในลำดับที่ถูกต้อง

เหตุผลหนึ่งที่ Redux ยอดเยี่ยมคือระบบนิเวศของมัน มีบทความ บทช่วยสอน มิดเดิลแวร์ เครื่องมือ และต้นแบบมากมาย โดยส่วนตัวแล้ว ฉันใช้ต้นแบบของ David Zukowski เพราะมันมีทุกสิ่งที่จำเป็นในการสร้างแอปพลิเคชัน JavaScript ด้วย React, Redux และ React Router คำเตือน: พยายามอย่าใช้ชุดคำสั่งสำเร็จรูปและชุดเริ่มต้นเมื่อเรียนรู้กรอบงานใหม่ๆ เช่น React และ Redux มันจะทำให้สับสนมากขึ้น เพราะคุณจะไม่เข้าใจว่าทุกอย่างทำงานร่วมกันอย่างไร เรียนรู้ก่อน และสร้างแอพที่ง่ายมาก เหมาะเป็นโปรเจ็กต์เสริม จากนั้นใช้ต้นแบบสำหรับแอพที่ใช้งานจริงเพื่อประหยัดเวลา

ชิ้นส่วนอาคารของ Redux

แนวคิด Redux อาจฟังดูซับซ้อนหรือแฟนซี แต่ก็เรียบง่าย จำไว้ว่าห้องสมุดมีขนาดเพียง 2 KB Redux มีสามส่วนในการสร้าง: การกระทำ การจัดเก็บ และตัวลดขนาด

มาพูดคุยกันว่าแต่ละคนทำอะไรกันบ้าง

การกระทำ

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

 { type: LOGIN_FORM_SUBMIT, payload: {username: 'alex', password: '123456'} }

การกระทำถูกสร้างขึ้นด้วยผู้สร้างการกระทำ ฟังดูชัดเจนฉันรู้ พวกมันเป็นเพียงฟังก์ชันที่ส่งคืนการกระทำ

 function authUser(form) { return { type: LOGIN_FORM_SUBMIT, payload: form } }

การเรียกการกระทำที่ใดก็ได้ในแอปนั้นง่ายมาก ใช้วิธีการ dispatch เช่น:

 dispatch(authUser(form));

ลด

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

 function handleAuth(state, action) { return _.assign({}, state, { auth: action.payload }); }

สำหรับแอพที่ซับซ้อนมากขึ้น การใช้ยูทิลิตี้ combineReducers() ที่ Redux ให้มานั้นเป็นไปได้ (แนะนำจริงๆ) รวมตัวลดทั้งหมดในแอปไว้ในตัวลดดัชนีเดียว ตัวลดทุกตัวมีหน้าที่รับผิดชอบในส่วนของสถานะของแอป และพารามิเตอร์สถานะจะแตกต่างกันไปสำหรับตัวลดทุกตัว ยูทิลิตี้ combineReducers() ทำให้โครงสร้างไฟล์ง่ายต่อการบำรุงรักษา

หากวัตถุ (สถานะ) เปลี่ยนเฉพาะค่าบางค่า Redux จะสร้างวัตถุใหม่ ค่าที่ไม่เปลี่ยนแปลงจะอ้างอิงถึงวัตถุเก่าและจะมีการสร้างเฉพาะค่าใหม่เท่านั้น ที่ยอดเยี่ยมสำหรับประสิทธิภาพ เพื่อให้มีประสิทธิภาพมากยิ่งขึ้น คุณสามารถเพิ่ม Immutable.js

 const rootReducer = combineReducers({ handleAuth: handleAuth, editProfile: editProfile, changePassword: changePassword });

เก็บ

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

 import { createStore } from 'redux'; let store = createStore(rootReducer); let authInfo = {username: 'alex', password: '123456'}; store.dispatch(authUser(authInfo));

เครื่องมือสำหรับนักพัฒนา การเดินทางข้ามเวลา และการโหลดซ้ำสุดฮอต

เพื่อให้ Redux ทำงานได้ง่ายขึ้น โดยเฉพาะอย่างยิ่งเมื่อทำงานกับแอปพลิเคชันขนาดใหญ่ ฉันขอแนะนำให้ใช้ Redux DevTools มีประโยชน์อย่างเหลือเชื่อ โดยแสดงการเปลี่ยนแปลงของรัฐเมื่อเวลาผ่านไป การเปลี่ยนแปลงแบบเรียลไทม์ การดำเนินการ และสถานะปัจจุบัน ซึ่งจะช่วยประหยัดเวลาและความพยายามของคุณด้วยการหลีกเลี่ยงสถานะและการดำเนินการปัจจุบันของ console.log

Redux มีการนำการเดินทางข้ามเวลาไปใช้งานที่แตกต่างจาก Flux เล็กน้อย ใน Redux คุณสามารถกลับไปที่สถานะก่อนหน้าและแม้กระทั่งนำสถานะของคุณไปในทิศทางที่แตกต่างจากจุดนั้น Redux DevTools รองรับคุณสมบัติ "การเดินทางข้ามเวลา" ต่อไปนี้ในเวิร์กโฟลว์ Redux (คิดว่าเป็นคำสั่ง Git สำหรับสถานะของคุณ):

• รีเซ็ต : รีเซ็ตเป็นสถานะสร้างร้านค้าของคุณด้วย
• ย้อนกลับ : กลับไปที่สถานะการคอมมิตล่าสุด
• กวาด : ลบการกระทำที่ปิดใช้งานทั้งหมดที่คุณอาจยิงโดยไม่ได้ตั้งใจ
• Commit : ทำให้สถานะปัจจุบันเป็นสถานะเริ่มต้น

คุณลักษณะการเดินทางข้ามเวลาไม่ได้มีประสิทธิภาพในการผลิตและมีไว้สำหรับการพัฒนาและการดีบักเท่านั้น เช่นเดียวกับ DevTools

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

สร้างแอป

ในการสรุปคู่มือแนะนำนี้ มาสร้างแอปพลิเคชันที่ง่ายมากโดยใช้ Redux และ React เพื่อให้ทุกคนติดตามได้ง่ายขึ้น ฉันจะใช้ JavaScript แบบเก่าธรรมดา โดยใช้ ECMAScript 2015 และ 2016 ให้น้อยที่สุด เราจะดำเนินการตามตรรกะการเข้าสู่ระบบที่เริ่มต้นก่อนหน้านี้ในโพสต์นี้ ตัวอย่างนี้ไม่ได้ใช้ข้อมูลสดใดๆ เนื่องจากจุดประสงค์ของแอปนี้คือเพื่อแสดงให้เห็นว่า Redux จัดการสถานะของแอปที่ง่ายมากอย่างไร เราจะใช้ CodePen

1. ส่วนประกอบปฏิกิริยา

เราต้องการส่วนประกอบและข้อมูลของ React มาสร้างองค์ประกอบอย่างง่ายแล้วแสดงผลบนหน้า ส่วนประกอบจะมีช่องป้อนข้อมูลและปุ่ม (เป็นรูปแบบการเข้าสู่ระบบที่ง่ายมาก) ด้านล่างนี้ เราจะเพิ่มข้อความที่แสดงถึงสถานะของเรา:

2. เหตุการณ์และการกระทำ

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

3. รีดิวเซอร์

ตอนนี้เรามีการดำเนินการแล้ว ตัวลดจะดำเนินการนั้นและคืนสถานะใหม่ มาจัดการการดำเนินการ LOGIN ที่ส่งคืนสถานะการเข้าสู่ระบบและเพิ่มการดำเนินการ LOGOUT เพื่อให้เราสามารถใช้งานได้ในภายหลัง auth ลดการตรวจสอบสิทธิ์ยอมรับสองพารามิเตอร์:

1. สถานะปัจจุบัน (ซึ่งมีค่าเริ่มต้น)
2. การกระทำ

4. การแสดงสถานะปัจจุบัน

ตอนนี้ เรามีสถานะเริ่มต้น (ค่าเริ่มต้นในตัวลด) และส่วนประกอบ React พร้อมแล้ว มาดูกันว่าสถานะจะเป็นอย่างไร แนวปฏิบัติที่ดีที่สุดคือการผลักสถานะลงไปที่องค์ประกอบย่อย เนื่องจากเรามีองค์ประกอบเพียงองค์ประกอบเดียว ให้ส่งสถานะของแอปเป็นคุณสมบัติเพื่อ auth ความถูกต้องของส่วนประกอบ เพื่อให้ทุกอย่างทำงานร่วมกันได้ เราต้องลงทะเบียน Store Listener ด้วยวิธี subscribe helper โดย ReactDOM.render ในฟังก์ชันและส่งต่อไปที่ store.subscribe() :

5. เข้าสู่ระบบและออก

ตอนนี้เรามีตัวจัดการการดำเนินการเข้าสู่ระบบและออกจากระบบแล้ว มาเพิ่มปุ่มออกจากระบบและดำเนินการออกจาก LOGOUT กัน ขั้นตอนสุดท้ายคือการจัดการปุ่มที่จะแสดงการเข้าสู่ระบบหรือออกจากระบบโดยย้ายการเข้าสู่ระบบนี้ออกนอกวิธีการแสดงผลและแสดงผลตัวแปรด้านล่าง:

บทสรุป

Redux ได้รับแรงฉุดทุกวัน มีบริษัทหลายแห่งใช้ (Uber, Khan Academy, Twitter) และในหลายโครงการ (Apollo, WordPress' Calypso) ประสบความสำเร็จในการผลิต นักพัฒนาบางคนอาจบ่นว่ามีค่าใช้จ่ายเยอะ ในกรณีส่วนใหญ่ จำเป็นต้องมีโค้ดเพิ่มเติมเพื่อดำเนินการง่ายๆ เช่น การคลิกปุ่มหรือการเปลี่ยนแปลง UI แบบธรรมดา Redux ไม่เหมาะกับทุกสิ่ง จะต้องมีความสมดุล บางทีการดำเนินการธรรมดาและการเปลี่ยนแปลง UI ไม่จำเป็นต้องเป็นส่วนหนึ่งของร้าน Redux และสามารถรักษาไว้ที่ระดับส่วนประกอบได้

แม้ว่า Redux อาจไม่ใช่โซลูชันในอุดมคติสำหรับแอปหรือเฟรมเวิร์กของคุณ แต่ฉันขอแนะนำให้ตรวจสอบ โดยเฉพาะอย่างยิ่งสำหรับแอปพลิเคชัน React

เครดิตรูปภาพหน้าแรก: Lynn Fisher, @lynnandtonic