React-Redux ง่ายๆ

Redux คืออะไร ?

Redux is a predictable state container for JavaScript apps

Redux

redux คือ ตัวช่วยที่ทำให้เราสามารถคาดการณ์ค่าได้ สำหรับ JavaScript ในบทความนี้ เราจะใช้ร่วมกับ react นะครับ

สิ่งที่ควรรู้สำหรับ Redux

1. Action are payloads of information that send data from your application to your store. They are the only source of information for the store.
2. Reducer specify how the application’s state changes in response to actions sent to the store. Remember that actions only describe what happened, but don’t describe how the application’s state changes.
3. Store is the object that brings them together

ผมจะสมมติเหตุการณ์เพื่อให้เห็นภาพขึ้นนะครับ

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

1. Action → ซื้อหนังสือเล่มนี้
2. Reducer → ประมวลผล
3. Store → คลังหนังสือ

หวังว่าคงจะเห็นภาพมากขึ้นนะครับ หากยัง มึนๆ อยู่บ้าง ก็ไม่เป็นไรครับ อาจจะย้อนกลับขึ้นไปด้านบนเพื่อดูภาพ gif ก็ได้ครับ หรือถ้าเพื่อนๆอยากเขียนเป็นก็ไปดูโค้ดกันดีกว่า (กว่าผมจะเข้าใจก็ใช้เวลาเหมือนกัน) ซึ่งผมจะเริ่มต้นตั้งแต่ขั้นตอนการสร้าง react เลยนะครับ

1. React

1.1 create-react-app

1. npx create-react-app learn-redux
2. cd learn-redux
3. npm start

1. สร้าง react ชื่อโฟลเดอร์ learn-redux
2. เข้าไปในโฟลเดอร์ learn-redux
3. ลองรันโค้ดทดสอบดูว่า ทุกอย่างโอเครไหม

จะได้ดั่งภาพ code 1 และ browser 1

Code 1 : หลังใช้คำสั่ง create-react-app

Browser 1 : หลังใช้คำสั่ง npm start

1.2 create components

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

1. ลบโค้ดบางอย่างที่ไม่ได้ใช้ของ react
2. สร้างโฟลเดอร์ components และสร้างโฟลเดอร์ Book
3. import ไฟล์ Book เข้าไปใน App.js

ทั้ง 3 ขั้นตอนนี้สามารดูรูปได้ที่ Code 2

Code 2

Browser 2

2. Redux

1. npm install redux react-redux

ทำการติดตั้งไลบราลี่ที่ต้องใช้

เรามารู้คำศัพท์ที่สำคัญๆกันก่อน ที่จะไปเขียนโค้ดกันดีกว่า

Actions

Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using dispatch().

วุ้นแปลภาษา : Actions ก็คือ สิ่งที่รวบร่วมข้อมูลเพื่อจะส่งไปที่ store โดยใช้คำสั่ง dispatch

เหตุการณ์ ณ ร้านสารพัดนึก : Actions ก็คือ ผมต้องการซื้อหนังสือ (BUY_BOOK)

Reducer

Reducers specify how the application’s state changes in response to actions sent to the store. Remember that actions only describe what happened, but don’t describe how the application’s state changes.

วุ้นแปลภาษา : Reducer ก็คือ สิ่งที่ตอบสนองต่อ actions นั้นๆ ซึ่งทำให้ state เปลี่ยนไป

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

Store

In the previous sections, we defined the actions that represent the facts about “what happened” and the reducers that update the state according to those actions.

The Store is the object that brings them together.

วุ้นแปลภาษา : Store ก็คือ นำ action และ reducer มาไว้ด้วยกัน

เหตุการณ์ ณ ร้านสารพัดนึก : Store ก็คือ คลังเก็บของ

2.1 redux folder

1. สร้างโฟลเดอร์ redux
2. สร้างไฟล์ store และโฟลเดอร์ book ใน redux
3. สร้าง 3 ไฟล์ ในโฟลเดอร์ book : bookAction.js , bookReducer.js , bookTypes.js

Code 3

2.2 redux code

1. ในไฟล์ bookAction.js สร้าง action ตามจุดประสงค์ก็คือ 1. เพิ่มหนังสือ (ADD_BOOK) 2. ซื้อหนังสือ (BUY_BOOK) ในรูปแบบฟังก์ชั่น เพราะ เวลาให้ action ทำงาน เราต้องใช้คำสั่ง dispatch
2. สร้างตัวแปร เพื่อให้ง่ายต่อการจัดการ และ นำไปใช้งานต่อในไฟล์ BookTypes.js

Code 4

3. ในไฟล์ bookReducer.js หนังสือเริ่มต้นจะมีทั้งหมด 10 เล่ม ซึ่ง bookReducer จะทำการรับ action มา โดยทำการตรวจสอบว่า action ที่ส่งเข้ามา ตรงกับ action.Types เคสไหน แล้วจึงทำการเปลี่ยนค่า

Code 5

4. แล้ว action ที่ส่งเข้ามา จะรู้ได้อย่างไรว่า ต้องส่งไปที่ไฟล์ไหน Store จึงมาทำการแก้ปัญหานี้

Code 6

2.3 Provider

concept ที่สำคัญอีกอย่างหนึ่งของ redux ก็คือ store จะเป็นที่เก็บค่าที่เดียว และ ทุกๆ component สามารถเข้าถึงค่านี้ได้ แต่ว่าจะทำอย่างไรละ เพื่อให้ทุก component นำค่าไปใช้ได้ ? จึงเกิดสิ่งที่เรียกว่า Provider ก็คล้ายๆกับว่า เป็นตัวคุม component ทั้งหมด และ ส่งค่าเข้าไป เป็น props นั้นแหละครับ

Code 7

3 . connect

ขั้นตอนติดตั้ง redux เสร็จเรียบร้อยแล้ว แต่ว่า เราจะนำค่าออกมาใช้กับ react อย่างไรละ ? connect จึงเกิดขึ้นมาเพื่อการนี้ ควบคู่กับ mapStateToProps และ mapDispatchToProps เพื่อให้สามารถนำค่า มาใช้ได้

Code 8

โดยปกติแล้ว เวลาเราจะส่ง state ไปให้อีก component นึง มันก็จะกลายเป็น props ของ component นั้นใช่ป่าว connect ก็เหมือนกัน เจ้า redux เนี่ย เก็บค่าไว้ที่ store และ connect ก็เป็นตัวเชื่อมต่อที่จะให้ mapStateToProps และ mapDispatchToProps เอาค่าจาก store ที่เป็น state และกลายเป็น props ที่ component นั้นๆ

หลังจากนั้น ผมก็จะทำการ เรียกค่า และ เขียนฟังก์ชั่นไป เพื่อให้มันสามารถทำงานได้

Code 9 :

Browser 3

เสร็จสิ้นขั้นตอนนี้ เราก็สามารถใช้ redux ร่วมกับ react ได้แล้วครับ

4. redux-devtools-extension

แล้วที่คนเค้าชอบพูดกันว่า redux ช่วยให้แก้บักได้ง่ายขึ้น มันทำยังไง ที่ดูๆมา ก็ไม่ต่างอะไรจากโค้ดปกติเลยนี่น่า เราไปดูกันครับ

npm install redux-logger
npm install --save redux-devtools-extension

หรือหาสงสัยว่ามันคืออะไร ก็เข้าไปดูในลิงค์ข้างล่างนี้ได้เลยครับ

zalmoxisus/redux-devtools-extension

เมื่อ install ข้างบนเสร็จแล้ว เราจะไปดาวน์โหลด extension ไว้บน Browser ด้วยนะครับ

Redux DevTools

เมื่อทุกอย่างเสร็จเรียบร้อยดีแล้ว เราก็จะทำการนำไปติดตั้งไว้ในโค้ดของเรา

Code 10

Browser 4

จากรูป Browser 4 ผมได้ทำการปรับ css นิดหน่อยมาแล้วนะครับ แต่ผมไม่ได้โชว์ให้ดูเพราะอยากเน้นตรง redux มากกว่า เอาละ มาเข้าเรื่องกันต่อ หากเพื่อนๆไม่ได้หน้าต่างเหมือนผมข้างบน ขอให้เพื่อนๆ กด F12 -> Redux (tab เดียวกับที่พวกเราดู console บ่อยๆเลยครับ)

เท่านี้เพื่อนๆก็สามารถดูได้แล้วครับ ว่าเรากดปุ่มอะไร ใช้ action อะไรบ้าง

ข้อดี :

1. ช่วยให้แก้บักได้ง่ายขึ้นมาก เนื่องจากเราสามารถดูได้ว่า ปุ่มไหนที่เรากดไป มันทำงานหรือไม่ทำงาน
2. เหมาะกับโปรเจคสเกลใหญ่ๆ
3. ช่วยให้ทำงานได้ง่ายขึ้นมาก

ข้อเสีย

1. ใช้เวลาในการ set up นานมาก
2. ใช้เวลาในการทำความเข้าใจสักพัก (หรือสำหรับผมคนเดียว 555)

GIT HUB : https://github.com/rungpharit/react-redux/tree/master