kongarn.com

React จะมีปัญหาในการจัดการ State ของ component ที่อยู่โดดๆ แต่ต้องการเข้าถึง State เดียวกัน ซึ่งสามารถแก้ปัญหาได้โดยการใช้ Redux เข้ามาช่วย

Redux เป็น concept มาช่วยเก็บ State ทั้งหมดไว้ที่เดียวแบบ global ซึ่งใน react นั้นจะมี library ให้ใช้คือ react-redux

“Redux holds up the state within a single location.

Also with Redux the logic for fetching and managing the state lives outside React.”

ก่อนที่จะอ่านบทความ Redux ให้คุณทบทวนตัวเองก่อนว่า มีความเข้าใจ React หรือไม่ ถ้าหากยัง ก็ยังไม่ควรไปอ่าน Redux

ให้ค่อยๆอ่านบทความข้างล่าง เป็นการใช้ react กับ redux แบบเบื้องต้น ซึ่งเป็นการ Hard-Code แสดง List View อยู่ แต่ผมรับประกันได้ ว่าคุณจะเข้าใจ concept ของ redux แต่หากยังไม่เข้าใจ ไม่ต้องท้อแท้ ให้ค่อยๆทำความเข้าใจ อ่านซ้ำเรื่อยๆ

https://www.valentinog.com/blog/react-redux-tutorial-beginners/

หลังจากอ่านจบแล้ว ให้อ่านบทความข้างล่างนี้ต่อจะ advanced ขึ้นโดยจะเป็นตัวอย่างการใช้ react กับ redux เรียก API แบบ asyc เพื่อได้ response แบบ json มาทำ List View ใช้ความสามารถของ redux ไปเต็มๆ หลังจากอ่านจบ เราจะสามารถจินตนาการถึง Web Application ลักษณะทั่วไปได้เลย

https://medium.com/@stowball/a-dummys-guide-to-redux-and-thunk-in-react-d8904a7005d3

สรุปสิ่งที่ต้องเข้าใจของการศึกษา Redux
0. React
1. Redux Reducer ทำหน้าที่คำนวณหา next state จากเงื่อนไขของการ dispatch action
2. Redux Action (action ที่เราต้องระดมสมองคิดมันขึ้นมาว่าจะมีอะไรบ้างบนเว็บไซต์ของเรา)
3. Redux Store ใช้สำหรับเป็นตัวจัดการ State โดยจะมี method สำคัญที่เราต้องรู้ 3 ตัวดังนี้

“getState for accessing the current state of the application
dispatch for dispatching an action
subscribe for listening on state changes”

สำหรับ dispatch และ subscribe ให้มองถึง concept pub/sub และเมื่อมีการ dispatch action แล้ว Redux Store จะ trigger (โดยมี subscriber ของ redux เองทำให้) Redux Reducer ให้ทำงานคำนวณ next state ต่อไป

ดังนั้น method subscribe เราเองยังไม่ค่อยได้ใช้งาน

“Internally React Redux works by calling store.subscribe() when the component mounts. Every time the Redux store changes, the subscription callback fires. Inside it, React Redux calls React setState() by taking Redux store state and passing it through mapStateToProps().”

4. connecting React with Redux
4.1 เราจะต้องใช้ Provider นำมาคลุม Component App ของเรา

Provider is an high order component coming from react-redux.

ตัวอย่าง

4.2 mapStateToProps method (จะทำให้ทุกๆ Component ของเรานำเอา Redux State มาใช้เป็น React prop ซึ่งมองเห็นร่วมกันได้)
4.3 mapDispatchToProps method (เช่นเดียวกัน จะทำให้ทุกๆ Component นำเอา Redux Store มาใช้เป็น React prop ซึ่งมองเห็นร่วมกันได้)
4.4 connect

เป็นอะไรที่คนที่มาศึกษาใหม่ จะเหมือนเปลี่ยนโลกไปเลย อาจจะต้องทำ Project ที่ต้องใช้ React with Redux จริงๆถึงจะเข้าใจมากขึ้นอย่างแท้จริง