Redux 101- Ep.1 มาลอง getState กันเทอะ !

What is redux ?

“ Redux is a predictable state container for JavaScript apps. ”

Quote from redux.js.org

Redux ก็คือ Container ที่เก็บ State นั้นเอง มีหน้าที่คอยจัดการข้อมูลต่างๆใน state ไม่ว่าจะเป็น เปลี่ยน หรือ ดึงข้อมูล Redux รับจบหมด

Why Redux ?

จากบทความ Why Redux ? สรุปได้ว่า เนื่องจาก React นั้น เป็น one way data flow ซึ่ง failed ในเรื่องของการ tranfer data ระหว่าง components เพราะว่า ต้องส่งข้อมูลตามลำดับ ชั้น 1 ไป ชั้น 2 ไป ชั้น 3 จนถึงชั้น สุดท้าย ซึ่งเราอาจจะไม่ได้ต้องการให้มันผ่านชั้น 2 หรือ 3 ก็ได้ ซึ่งอาจจะมีผลในเรื่องประสิทธิภาพ

แต่ พอมี Redux เราก็ไม่จำเป็นต้อง tranfer ข้อมูลผ่าน component อื่น เพราะ เรามี store ที่คอย transfer ข้อมูลให้ component ต่างๆของเรา

อย่างไรก็ตาม ถ้า state ไม่ได้อยู่ในระดับที่เยอะเกินรับไหว ก็ไม่แนะนำให้ใช้ redux ครับ

สิ่งที่ต้องมีเตรียมก่อนเริ่มต้น

1. Git
2. Vscode
3. Web browser
4. Github

ในตัวอย่างนี้ผมขอใช้ Yarn นะครับ

Let’s get start !

โดยเริ่มแรก เปิด Terminal ขึ้นมา

> cd desktop
> git clone https://github.com/chayatep01/redux-101.git
> cd redux-101
> yarn install

พิมตามลำดับประมานนี้ครับ

เมื่อเราเปิด Editor คู่ใจขึ้นมา และ เปิด folder redux-101 ครับ

ให้เราดูที่ webpack.config.js ครับ ตรงบรรทัดที่6

entry : ‘./src/playground/redux-101–1.js’

ในบรรทัดนี้เราจะสั่งให้ webpack ของเรารันไฟล์ที่ชื่อ redux-101–1.js ด้วย dev-server ครับ

เรามาเริ่มกันเลยครับ

เรามา Install Redux กันครับ

> yarn add redux

ซึ่ง พอเราดูไฟล์ package.json ของเรา ตรง dependencies ก็จะมี redux ปรากฎขึ้นมาแล้วนั่นเอง

เรามาลอง Run กันดูครับ

> yarn run dev-server

จากนั้น ให้เรา เปิด Browser ที่เราชอบขึ้นมา เข้าไปที่ localhost8080

คลิกขวา และ เลือก inspect ครับ

และ กด console ครับ โดย เราจะเห็นว่า มีคำว่า Hello world อยู่ เป็นอันว่าใช้ได้ครับ

ออกนอกเรื่องไปพอสมควร กลับเข้าเรื่องดีกว่าครับ

เปิด ไฟล์ redux-101–1.js ของเราครับ

ขั้นตอนแรก ให้เรา import redux ครับ import {createStore} from 'redux'

ซึ่ง createStore เรียกมาเพื่อสร้าง store นะครับ เราเลยต้องเรียกเพื่อเริ่มนะ

จากนั้นให้เราสร้างตัวแปร store ขึ้นมาครับ และ assign ค่าเท่ากับ createStore()

ผมไม่ค่อยชอบใส่ semi colon ขอโทษล่วงหน้านะครับ T_T

และเพิ่ม function ใน argument ของ createStore นะครับ

ผมขอใช้เป็น Arrow function นะครับ

โดย Parameter แรกของฟังค์ชั่นเราจะเป็น state ที่เป็น current state ครับ

const store = createStore((state) => {
})

โดยหลักการจะเหมือนกับการที่เรา เรียกใช้ this.setState นะครับ

ต่อมาผมจะขอสาธิตการ getState นะครับ

เริ่มด้วยการเพิ่มค่า default objectให้ state ของเรา โดยให้ค่า count เป็น 0 และ return ค่า ดูครับ

const store = createStore((state = { count : 0 }) => {
      return state
})

เรามาดึงค่าด้วย getState กันครับ

console.log(store.getState())

มาดูผลลัพธ์กันครับ

สรุป

บทความนี้เราได้เรียนรู้ว่า Redux คืออะไร , วิธีการเริ่มต้นใช้งาน และ ตัวอย่างการดึงข้อมูลง่ายๆ

ในบทความต่อไป เราจะมาลงลึกวิธีการใช้ Redux ในหัวข้อเรื่อง Dispatch Action กับ Dynamic Action นะครับ

ขอบคุณที่อ่านจนจบครับ หากผิดพลาดประการใดต้องขออภัยมา ณ ที่นี้ด้วย