เก็บข้อมูลใน Redux Store ลงใน Local Storage ด้วย Redux-Persist

เมื่อไม่นานมานี้ได้ลองใช้ Redux-Persist เลยถือโอกาสนี้เขียนบล็อกซะเลย

ปัญหาเมื่อต้องให้ Client จำ State ใน Redux Store

สถานการณ์ตัวอย่าง

ในการเล่นเว็บไซต์ที่ใช้ redux เราพอจะนึกภาพออกอยู่แล้วใช่ไหมครับ ว่าเวลาเรากดรีเฟรชเบราเซอร์ เราจะได้ค่า initial state ของ store มาใหม่ทุกครั้ง ปัญหาก็คือ ถ้าเราอยากให้มันจำค่าล่าสุดของ store ไว้ล่ะ จะทำยังไงดี ?

ยกตัวอย่างว่า เราเข้าเว็บไซต์ที่มีค่า initial state เป็นภาษาอังกฤษ แล้วเราอยากเล่นเว็บเป็นภาษาไทย เราก็กดเปลี่ยนภาษา แล้วก็เล่นเว็บละก็ปิดไป วันดีคืนดีอยากเข้าเว็บอีกรอบ เอ้า! เว็บไซต์กลายเป็นภาษาอังกฤษอีกละ เอ.. มันควรจะจำได้สิเนอะ ว่าเราเพิ่งเปลี่ยนเป็นภาษาไทยไปนี่นา

ใช้ Local Storage ช่วยสิ

บนเบราเซอร์เราสามารถใช้ local storage ในการเก็บข้อมูลได้ ดังนั้นจากตัวอย่างข้างบน หากเราเปลี่ยนเว็บเป็นภาษาไทยแล้ว ต่อให้ปิดเว็บและเปิดใหม่กลับมา ก็จะได้เว็บเป็นภาษาไทยเหมือนเดิม

มาลองเขียนโค้ดเก็บ redux store ลง local storage กัน

โดยวิธีการที่นิยมกันก็คือ ทุกๆครั้งที่ store จะทำงาน เราจะดึง state เริ่มต้นจาก local storage ก่อน แล้วถ้าไม่มีค่าใน local storage ค่อยไปใช้ค่า initial state ที่เราตั้งเอาไว้ และทุกๆครั้งที่ state ใน store มีการเปลี่ยนแปลง เราจะเอาค่านี้เซฟกลับลงไปใน local storage ด้วย

สร้างโมดูลสำหรับใช้งาน local storage

โดยเราจะสร้างฟังก์ชันในการอ่านและเก็บค่าจาก local storage ตามนี้ครับ

loadState และ saveState เอาไว้อ่านและเก็บ state ลงใน local storage

เพิ่มให้ store อ่านและเก็บค่าลง local storage

ใน store เราจะเพิ่มโค้ดที่เอาไว้ติดต่อกับ local storage ตามนี้ครับ

Config store ให้อ่านและเก็บ state ลง local storage

ตอนเราสร้าง store เราสามารถใส่ initial state ได้ ผ่าน parameter ตัวที่ 2 ของ createStore โดย initial state ก็ได้จากการอ่านค่ามาจาก local storage นั่นเอง

ส่วนการเซฟค่าลง local storage เราจะใช้ store.subscribe ซึ่งจะทำงานทุกๆครั้งที่มีการ dispatch action ซึ่งเราจะอ่านค่า state ทั้งหมดและนำไปเก็บใน local storage ตอนนี้แหละครับ

หากใครลองเล่นเว็บดูค่า state ใน redux store ก็จะถูกบันทึกไว้ใน local stage เรียบร้อยครับ เวลารีเฟรชเบราเซอร์ก็จะได้ state ล่าสุดจาก store มาใช้แล้ว ใครนึกภาพไม่ออกก็ดูโค้ดได้ที่นี่เลย

aofleejay/try-redux-persist

มาลองใช้ Redux-Persist กันดีกว่า

จากวิธีข้างต้นเราสามารถเขียนโค้ดขึ้นมาได้แล้ว แต่ถ้าใครอยากสบายกว่านั้น เรามี redux-persist มานำเสนอครับ

เปลี่ยนมาใช้ Redux-Persist ในการเก็บ Redux Store แทน

โดยเจ้า redux-persist เองก็ทำงานตามหลักการข้างต้นเลยครับ โดยเราไม่ต้องเขียนโค้ดที่คุยกับ local storage เองครับ แค่เซ็ตอัพ store นิดๆหน่อยก็ใช้งานได้แล้ว ตามนี้เลย

Config store โดยใช้ redux-persist

และตอนจะเอา store ไปก็จะใช้ผ่าน component ชื่อว่า PersistGate คือจะทำหน้าทีรอให้โหลดข้อมูลจาก storage ให้เสร็จก่อนครับ

ตอนเอาไปใช้ก็ wrap component ด้วย <PersistGate/>

ใช้งานได้กับ storage หลายๆแบบ

โดยความเจ๋งแรงของมันก็คือ เราสามารถใช้ redux-persist ร่วมกับ storage ได้หลายเจ้ามากๆ ไม่ว่าจะเป็น local storage บนเบราเซอร์ หรือ แม้แต่ async storage ใน react-native สามารถเข้าไปดูรายชื่อ storage ที่รองรับได้ตามนี้เลย

สามารถเลือก state ที่จะบันทึกลง storage ได้

โดยสามารถใส่เป็น config ผ่าน object property ที่ชื่อว่า blacklist หรือ whitelist ได้แบบนี้เลย

เลือกใน blacklist หรือ whitelist ได้

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

aofleejay/try-redux-persist