redux offline

أراد المشاهدون

متجر Redux المستمر للتطبيقات غير المتصلة بالإنترنت ، مع دعم من الدرجة الأولى لواجهة المستخدم المتفائلة. استخدم مع 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

للتفاعل الأصلي <= 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. (رد فعل Android الأصلي) اطلب الإذن بقراءة حالة الشبكة

إذا كتبت تطبيقًا أصليًا لنظام Android ، فستحتاج إلى التأكد من طلب الإذن للوصول إلى حالة الشبكة في AndroidManifest.xml :

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

---

انظر الوثائق لخيارات التكوين ، واجهة برمجة التطبيقات الكاملة ، والوصفات الشائعة.

المساهمة

التحسينات والإضافات موضع ترحيب. للتغييرات الكبيرة ، يرجى تقديم مشكلة مناقشة قبل القفز إلى الترميز ؛ كنا نكرهك أن تضيع الجهد.

إذا كنت تقوم بالإبلاغ عن خطأ ، فيرجى تضمين رمز يعيد إنتاج الخطأ. فيما يلي تطبيق بدء على CodesandBox.

بدلاً من دليل النمط الرسمي ، اتبع قواعد ESLINT المضمنة ، واستخدم أجمل لتنسيق الكود الخاص بك.

Miscellanea

الاستخدام مع Redux لا يزال V5

في حال كنت ترغب في استخدام إصدار Redux-Persist مخصص ، يوجد مثال تكوين.

الفن السابق

Redux غير متصل هو تقطير للأنماط التي تم اكتشافها أثناء إنشاء التطبيقات باستخدام المكتبات الموجودة سابقًا:

• Forbes Lindesay's Redux-Optimist
• Zack Story's Redux-Persist

بدون عملهم ، لن يكون هناك Redux غير متصل. إذا كنت تحب الأفكار الكامنة وراء Redux Online ، ولكنك ترغب في إنشاء مكدس خاص بك من المكونات ذات المستوى الأدنى ، فهذه أماكن جيدة للبدء.

رخصة

معهد ماساتشوستس للتكنولوجيا