[React + Android] Improve Code with ReDroid Native

Happy New Year 2018 นะสำหรับคนที่เข้ามาอ่านสำหรับบทความนี้ก็เป็นบทความแรกของปีนี้หลังจากที่เจ้าของบทความไปเก็บตัวมาประมาณ 6 เดือน ได้ไปหาประสบกาม เอ้ย ประสบการณ์ในการฝึกงานให้ตัวเองอยู่ เราก็กลับมาเจอกันอีกครั้ง

สำหรับบทความนี้ตั้งใจให้เป็นบทความที่จะมาแชร์ประสบการณ์(ไม่เล่นมุกแล้วนะ รู้ว่าแป๊กไปแล้ว 555+) ก็คิดว่าตัวเองอยากจะมีแนวคิดที่ทำให้การเขียน Code ของตัวเองให้ดีขึ้นสามารถทำให้คนอื่นมาอ่านเข้าใจได้มากขึ้น(มั้ง) เลยยอมสละเวลา 1 เดือนไปอยู่กับสาย ReactJs มาคิดซะว่าลองเปิดตามองไปในโลก Web IOS ต่างๆบ้างเวลาเขียน Code คงจะมีแนวคิดใหม่ๆ(มั้ง) และในวันนี้ก็ครบ 1 เดือนเต็ม บวกกับเป็นการ Challenge ตัวเองด้วยว่าจะไปได้ขนาดไหน วันนี้ผมจะพาทุกคน Deep Drive into ReDroid Native (มาจากคำว่า React + Android เฉยๆนะครับ)

ก่อนอื่นถ้าหากใครเคยแตะ ReactJs มาแล้วคงจะต้องรู้จัก Redux กับ React Router แน่นอน เพราะ 2 ตัวนี้ผมคิดว่าเป็นตัวหลักในการทำ ReactJs โดยที่ React นั้นจะมองทุกอย่างเป็น Component จากนั้น import เข้ามาใช้ แต่ Android ไม่ได้มองแบบนั้นสิ ถ้าจะมอง Class ใน Android เป็น Component ก็จะแบบรู้สึกแปลกๆใช่ปะ แต่ก็คิดว่ามันอาจจะทำให้เรามีแนวคิดได้บ้าง เลยคิดว่า จะเอาแนวคิดของ Redux มาผสม กับการเขียน Code ตัวเอง

Redux คืออะไร

Redux คือ การจัดการ Data Flow ของเราเป็นไปในแนวเดียวกัน โดยที่ Redux จะมี Store ไว้เก็บ State จาก Component ต่างๆ ซึ่งใน Store จะมีส่วนประกอบตามนี้เลย

  1. Reducer — คือสิ่งที่คอยดัก State โดยจะรับ parameter เป็น action กับ payload พูดง่ายๆเหมือน Class ใน Android เราส่ง parameter เข้ามาเสร็จแล้วจะทำการ Switch Case ถ้าเกิดมันเข้าอันไหนก็ Return หรือไม่ก็ปล่อยไป ในKotlin ก็ ส่ง lamda ออกไป
  2. Dispatch — การ Dispatch คือการ Edit State ธรรมดาเลย
  3. Subscribe — เหมือน youtube เลย คือการติดตามการเปลี่ยนแปลง State ต่างๆโดยที่สามารถ log ออกมาดูได้ว่า State ไหนเปลี่ยนแปลงไปบ้าง (แต่ Live ลงไปไม่ได้นะ อิอิ)

ใช้แล้วเราจะนำ Redux มาปรับเปลี่ยนแนวเขียน Code ของเรา โดยเราจะทำทั้งหมด 3 แบบ

1.ปรับการ Handle ของ Code เรา เช่น ปกติเราจะดักไปเลยใน Model เราก็อาจจะทำเป็น Class แยกสำหรับ Handle แบบนี้

class Handle(msg: String,private val callBack: ()->Unit) {
init {
calculateMsg(msg)
}

private fun calculateMsg(msg: String) {
when (msg) {
"" -> {
callBack()
}
else -> {
callBack()
}
}
}
}

2.Concept ของ Redux คือ Store ที่สามารถทำให้ Component มา Subscription แล้วรับข้อมูลไปใช้ได้ งั้นถ้าผมทำแบบนี้ สร้าง Class ซึ่งทำหน้าที่เป็นหน้าที่เป็น getter setter แล้วให้ Class หลักเรียกใช้งาน ก็น่าสนใจ

class Handle(msg: String) {
private val storeHandle by lazy {
Store()
}

init {
calculateMsg(msg)
}

private fun calculateMsg(msg: String) {
when (msg) {
"" -> {
storeHandle.setMsg("")
}
else -> {
storeHandle.setMsg("")
}
}
}

inner class Store{
private lateinit var msg : String

fun setMsg(newMsg : String){
msg = newMsg
}

fun getMsg() : String = msg
}
}

3. ถ้าไม่อยากทำ callBack งั้นเราก็ลองใช้ LiveData เข้ามาช่วยดูก็ได้นะ โดยการใช้ Observe ในการดัก การเปลี่ยนแปลง ค่า Value แล้วให้ Class หลัก Observe ไป

inner class ObserveValue : LiveData<String>() {
init {
getMsg()
}

private fun getMsg() {
value = msg
}

fun setMsg(newMsg : String){
value = newMsg
}
}
handle.ObserveValue().observe(this, Observer<String> {

//Todo Something
})

ซึ่งจริงๆแล้วเรายังสามารถปรับ Code ได้มากกว่านี้อีก แต่ลองปรับไปเรื่อยๆดีกว่าครับ การแบ่ง Code เป็นส่วนๆเวลาคนอื่นมาหามันจะหาที่ไปที่มาได้มากกว่า

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

Like what you read? Give Patipan Injai a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.