ติดตามและแจ้งเตือน Connection Status ใน React Native อย่างง่ายดาย

โดย Jordy van den Aardweg

บางครั้งผมชอบสร้างและสำรวจ Technologies ที่ไม่มีเวลาในชีวิตประจำวันเป็น Freelance Frontend Developer ล่าสุดผมสำรวจ React Native และลอง Tools และ APIs ใหม่ๆ

แตการสร้าง Native App ต่างจาก Web App เล็กน้อย ผมเจอ Scenario ที่ User ไม่มี Active Internet Connection

เราจะแจ้ง User ว่า App มี Limited Capabilities ยังไง?

ติดตามและแจ้งเตือน Connection Status ใน React Native อย่างง่ายดาย _Photo by Unsplash: Galen Crout

เมื่อสร้าง App ที่ต้องการ Network Connectivity ต้อง Handle Failing Requests อย่างเหมาะสม เช่นเมื่อ Internet Connection ของ User เล่น Hide and Seek App ของเราสามารถแจ้ง User ทำไม Request Fail หรือแม้แต่ Prevent Request ไม่ให้ Fire และดีกว่านั้น: แสดง Usable Message ให้ User เข้าใจสถานการณ์ เพื่อให้ Action ได้

คือ ให้ Context กับ Users ว่าทำไม App ไม่ทำ Request 某某ได้

Redux vs Context API

React Native Community มี NetInfo Module Expose ข้อมูล Network Connection ของ User ว่า Online หรือ Offline เราต้องการ Data นี้ Globally Available ใน App

ความคิดทั่วไป: ใช้ Redux สำหรับนี้ App ของผมใช้ Redux อยู่แล้ว ทำไมไม่ใช้ Redux?

ทำได้แน่นอน แต่ต้องการให้ทุก Component Hook เข้า Redux Store ถ้าอยากใช้ Connectivity Info Hook เข้า Redux สร้าง Overhead, More Lines of Code และอาจทำให้ App Complex กว่าที่ต้องการ

ลอง Explore อื่นๆ…

React Context API ให้วิธี Simpler, Cleaner เพื่อ Share State-like Data ผ่าน Components:

Context ออกแบบมา Share Data ที่ถือว่า "Global" สำหรับ Tree ของ React Components เช่น Current Authenticated User, Theme, หรือ Preferred Language — Source

ดูเหมือน Use Case ที่สมบูรณ์สำหรับ React Context API ใหม่!

Let's Dive In

First, Install Required Packages เนื่องจาก React Native 0.59 NetInfo Module อยู่ใน Separate Package React 16.6+ Required เพราะ Allow Context Available Outside Render Methods มีประโยชน์ ให้ Flexibility มากขึ้นในการใช้ Context

ไม่ขอรบกวน Setup React Native App สมมติว่ามีอยู่แล้ว

Install NetInfo Package:

npm install @react-native-community/netinfo --save

Installed แล้ว สร้าง Components

Creating the Context Provider
Setup <NetworkProvider> Component Component นี้ Pass Connectivity Status ลง Child Components ทั้งหมด:

เห็นได้ว่าเราแค่ Listen connectionChange Event Event นี้ Return true เมื่อมี Active Internet Connection หรือ false เมื่อ User ไม่มี Active Connection Update State เมื่อ Connectivity Status เปลี่ยน

ทันทีที่ Update State Context ใน Component Tree เปลี่ยน ทุก Component เข้าถึง Updated isConnected Value คล้าย Redux แต่ Boilerplate Code น้อยมาก

Wrapping the Context Provider
เพื่อ Context API ทำงาน ต้อง Wrap <NetworkProvider> Component ที่สร้างไว้ รอบ Components อื่นๆ:

ทำอย่างนี้ทำให้ context Available ในทุก Component ภายใน <NetworkProvider>

Last Step: ใช้ Context ใน Component ใช้ <ExampleComponent> ตอนนี้:

Component นี้ใช้ Context API และ this.context.isConnected Available สำหรับเรา

ตอนนี้แสดง Message ให้ Users ใน <ExampleComponent> เมื่อ Internet Online/Offline

React Versions ก่อนหน้า context ไม่ Available Outside Render Method ตั้งแต่ React 16.6.0 Available ผ่าน static contextType ตามตัวอย่าง ใช้แบบนี้ให้ Flexibility มากขึ้นในที่ที่อยากใช้ Context ภายใน Components

A Final Note

เราแสดงว่า Context API เหมาะสำหรับ Set และ Use Global Values ใน Use Case นี้ Connectivity Status สำคัญต้อง Available ทั่ว App เพื่อแจ้ง Users เมื่อ Action ที่ต้องการ Active Internet Connection จะ Fail

ทำได้ด้วย Redux แต่ต้อง Code มากกว่ามาก ใช้ Native React APIs ที่เป็นไปได้ เพราะ Limit Dependencies!

Complete Gist หาได้ที่ GitHub ของผม

Thanks for Reading!

ใช้ Medium มาหลายปี แต่โดยทั่วไปแค่อ่านและเรียนรู้จาก Content ของคนอื่น Tutorials เหล่านี้ช่วยผมมากตลอดปี การเขียน Tutorial เองคือการคืนให้ Developer Community ที่ Awesome นี้!

Tutorial นี้ช่วยคุณไหม? บอกใน Comments นะ ?

มี Feedback ให้ผปรับปรุง Articles? ผมขอเรียนรู้และแชร์ Knowledge มากขึ้น

เรียนรู้เขียนโค้ดฟรี หลักสูตรโอเพนซอร์สของ freeCodeCamp ช่วยให้ผู้คนมากกว่า 40,000 คนได้งานเป็นนักพัฒนา เริ่มต้นได้เลย