redux offline

維護者想要

持續的Redux商店用於推理式™離線第一應用程序，並具有對樂觀UI的一流支持。與React，React Native或作為任何Web應用程序的獨立狀態容器一起使用。

Redux離線現在由社區驅動的團隊維護。庫的新版本現在將在NPM組織@redux-offline下可用。非常感謝@jevakallio首先創建了這個令人驚嘆的圖書館。

快速開始

1。使用NPM安裝（或紗線）

對於反應天然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 " />

---

有關配置選項，完整的API和常見配方，請參見文檔。

貢獻

歡迎改進和補充。有關大型更改，請在跳入編碼之前提交討論問題；我們討厭您浪費努力。

如果要報告錯誤，請包括複製錯誤的代碼。這是Codesandbox上的啟動應用程序。

代替正式樣式指南，請遵循隨附的ESLINT規則，並使用更漂亮的格式化代碼。

雜項

使用redux持續使用v5

如果您想使用自定義的Redux-Persist版本，則有一個示例配置。

先前的藝術

Redux離線是使用先前現有庫構建應用程序時發現的模式的蒸餾：

• 福布斯·林德斯（Forbes Lindesay）的Redux-Optimist
• Zack Story的Redux-persist

沒有他們的工作，Redux離線將不存在。如果您喜歡Redux離線背後的想法，但想從低級組件中構建自己的堆棧，那麼這些是一個好的起點。

執照

麻省理工學院