redux offline

ผู้ดูแลต้องการ

redux store แบบถาวรสำหรับแอพพลิเคชั่น™ ที่มีเหตุผล ™️ออฟไลน์ก่อนพร้อมการสนับสนุนชั้นหนึ่งสำหรับ UI ในแง่ดี ใช้กับ React, React Native หรือเป็นคอนเทนเนอร์สถานะแบบสแตนด์อโลนสำหรับเว็บแอปใด ๆ

Redux Offline กำลังได้รับการดูแลโดยทีมงานที่ขับเคลื่อนด้วยชุมชน ตอนนี้ห้องสมุดเวอร์ชันใหม่จะพร้อมใช้งานภายใต้ NPM Organization @redux-offline ขอบคุณมากสำหรับ @jevakallio สำหรับการสร้างห้องสมุดที่น่าทึ่งนี้ตั้งแต่แรก

เริ่มต้นอย่างรวดเร็ว

1. ติดตั้งด้วย NPM (หรือเส้นด้าย)

สำหรับ React Native 0.60+

npm install --save @redux-offline/redux-offline@native

สำหรับ React Native Expo SDK 36

npm install --save @redux-offline/redux-offline@expo

สำหรับ React Native <= 0.59

npm install --save @redux-offline/redux-offline

2. เพิ่มตัวเพิ่มประสิทธิภาพร้านค้า offline ด้วย compose

 import { applyMiddleware , createStore , compose } from 'redux' ;
import { offline } from '@redux-offline/redux-offline' ;
import offlineConfig from '@redux-offline/redux-offline/lib/defaults' ;

// ...

const store = createStore (
  reducer ,
  preloadedState ,
  compose (
    applyMiddleware ( middleware ) ,
    offline ( offlineConfig )
  )
) ; 

3. ตกแต่งการกระทำด้วยข้อมูลเมตาออฟไลน์

 const followUser = userId => ( {
  type : 'FOLLOW_USER_REQUEST' ,
  payload : { userId } ,
  meta : {
    offline : {
      // the network action to execute:
      effect : { url : '/api/follow' , method : 'POST' , json : { userId } } ,
      // action to dispatch when effect succeeds:
      commit : { type : 'FOLLOW_USER_COMMIT' , meta : { userId } } ,
      // action to dispatch if network action fails permanently:
      rollback : { type : 'FOLLOW_USER_ROLLBACK' , meta : { userId } }
    }
  }
} ) ;

หากน้ำหนักบรรทุกของเอฟเฟกต์เป็นสิ่งอื่นที่ไม่ใช่ JSON คุณสามารถผ่านร่างกายและส่วนหัวได้:

 const registerUser = ( name , email ) => ( {
  type : 'REGISTER_USER' ,
  payload : { name , email } ,
  meta : {
    offline : {
      // the network action to execute:
      effect : { url : '/api/register' , method : 'POST' , body : `name= ${ name } &email= ${ email } ` , headers : { 'content-type' : 'application/x-www-form-urlencoded' } } ,
      // action to dispatch when effect succeeds:
      commit : { type : 'REGISTER_USER_COMMIT' , meta : { name , email } } ,
      // action to dispatch if network action fails permanently:
      rollback : { type : 'REGISTER_USER_ROLLBACK' , meta : { name , email } }
    }
  }
} ) ; 

4. (React Native Android) ขออนุญาตอ่านสถานะเครือข่าย

หากการเขียนแอพดั้งเดิมสำหรับ Android คุณจะต้องตรวจสอบให้แน่ใจว่าได้ขออนุญาตเข้าถึงสถานะเครือข่ายใน AndroidManifest.xml :

  < uses-permission android : name = " android.permission.ACCESS_NETWORK_STATE " />

---

ดูเอกสารสำหรับตัวเลือกการกำหนดค่า API เต็มรูปแบบและสูตรทั่วไป

การบริจาค

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

หากคุณกำลังรายงานข้อผิดพลาดโปรดระบุรหัสที่ทำซ้ำข้อผิดพลาด นี่คือแอปพลิเคชันเริ่มต้นบน codesandbox

แทนคู่มือสไตล์ที่เป็นทางการปฏิบัติตามกฎ ESLINT ที่รวมอยู่และใช้ Prettier เพื่อจัดรูปแบบรหัสของคุณ

เบ็ดเตล็ด

การใช้งานด้วย Redux Present V5

ในกรณีที่คุณต้องการใช้รุ่น Redux-Persist ที่กำหนดเองมีการกำหนดค่าตัวอย่าง

ศิลปะก่อนหน้านี้

Redux Offline เป็นการกลั่นของรูปแบบที่ค้นพบในขณะที่สร้างแอพโดยใช้ไลบรารีที่มีอยู่ก่อนหน้านี้:

• Redux-optimist ของ Forbes Lindesay
• Redux-persist ของ Zack Story

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

ใบอนุญาต

มิกซ์