這是一個創建的反應本機庫,以處理與後端的同步。想像一下,派遣了一些動作,在那一刻您沒有互聯網,使用此庫,您將能夠捕捉到這種情況,保存與操作相關的信息,並在恢復連接時再次派遣它。最好的部分是,該庫非常容易使用。
redux
react-redux
@react-native-community/netinfo >您必須在此之前安裝此庫,這是以下步驟:NET信息
@react-native-community/async-storage
yarn add sync-offline-actions
或NPM:
npm install --save sync-offline-actions
我們提供四個工具,以便您可以處理項目的行為。這些是:
這是一個組件,您必須在項目的根源中使用。完全有必要在項目根部使用此組件,因為它必須存在於其始終還活著的組件中。例如,該組件必須包裝您在項目根部中所擁有的其他組件,例如:
import { RestoreOfflineActions } from 'sync-offline-actions' ;
import actions from '@redux/some/actions' ;
// Some stuff
// Render/return
< RestoreOfflineActions
sections = { [
{ generalCondition : /* Condition of something */ , actions : { name : 'login' , associatedAction : actions . login } }
] } >
< AppNavigator />
</ RestoreOfflineActions >道具sections完全必須使用此部分。讓我們看看結構:
您將通過應用程序的各個部分。每個部分都可以使用多個操作,如果發生了多個操作。例如,想像一下,我想為應用程序的Authorization部分設置一些動作,並為App部分設置一些動作。我將在generalCondition值中為每個部分設置條件。我將有這樣的數組:
sections={[
{ generalCondition: /* Condition to know if the user is not logged in */, actions: [{ name: 'someAction', associatedAction: actions.someAction }] },
{ generalCondition: /* Condition to know if the user is logged in */, actions: [{ name: 'otherAction', associatedAction: actions.otherAction }, {name: 'otherAction2', associatedAction: actions.otherAction2 }] }
]}
每個部分都有相關的操作。每個操作都會有一個name (我們稍後會看到此名稱的重要性)和一個associatedAction ,最後一個是您要在恢復連接時要派遣的操作。
這是保存稍後將要派遣的時刻,動作或術語的功能。以下是使用以下示例:
// actions.js
import { saveActionToBeSync } from 'sync-offline-actions' ;
// Some code
// Imagine that you have an action and that action which send a request to back, that action will fail and you will want to save that request to do it later. You will do
saveActionToBeSync ( 'someAction' , [ arg1 , arg2 , arg3 ] ) ;
//Thunk Action example
function myThunkActionCreator ( id , someValue ) {
return async ( dispatch , getState ) => {
dispatch ( { type : "REQUEST_STARTED" } ;
let response ;
try {
response = myAjaxLib . post ( "/someEndpoint" , { id , data : someValue } ) ;
} catch ( error ) {
saveActionToBeSync ( 'someThunkAction' , [ id , someValue ] ) ; // here we register the failed event that want to dispatch when the connection is restored
dispatch ( { type : "REQUEST_FAILED" , error } ) ;
}
dispatch ( { type : "REQUEST_SUCCEEDED" , payload : response } ) ;
}
}
// redux-recompose example
login : ( authData : AuthData ) => ( {
type : actions . LOGIN ,
target : TARGETS . CURRENT_USER ,
service : AuthService . login ,
payload : authData ,
successSelector : ( ) => null ,
injections : [
withPostFailure ( ( ) => {
//Check the reason of the failure
saveActionToBeSync ( 'login' , [ authData ] ) ;
} )
]
} ) ,該方法的第一個參數將是您在RestoreOfflineActions組件中聲明各節的操作之前使用的名稱。第二個參數將是一系列arguments ,當恢復連接時,將與第二個參數的參數列表調用與第一個參數name關聯的associatedAction 。它比看起來更簡單。
我們建議您擁有一個恆定的文件,您可以在其中保存操作的名稱,以便您可以更有條理地將這些名稱更有條理,類似這樣:
// some constant file
export const OFFLINE_ACTION_NAMES = {
SOME_ACTION : "someAction" ,
OTHER_ACTION : "otherAction" ,
} ;在恢復連接並派遣某些操作後,將刪除所有的大量。並非馬瑟(Mather)是某些部分沒有派遣的動作,無論如何它們都會被刪除。請,如果您不同意這種行為,請通過問題告訴我們。
該工具對於此庫是一個加號,但它們與此工具無關,它們可以幫助您更輕鬆。
這是要求連接狀態的事件。這是使用以下示例:
import { withNetInfo } from "sync-offline-actions" ;
class SomeComponent extends Component {
/*some code*/
someMethod = ( ) => {
const { isConnected } = this . props ;
/*Do something*/
} ;
}
export default withNetInfo ( SomeComponent ) ;由於withnetinfo的HOC,該道具isConnected將被注射為SomeComponent部分,因此將隨著網絡更改而更新道具。
這是一個具有相同功能的自withNetInfo曲線,使用:
import { useNetInfo } from "sync-offline-actions" ;
const SomeFunction = ( ) => {
const isConnected = useNetInfo ( ) ;
// More of the function
} ;然後,將隨著連接的最後更改進行更新。
@react-native-community/netinfo的人民
git checkout -b my-new-feature )git commit -am 'Add some feature' )git push origin my-new-feature )該項目由Felipe Rodriguez Esturo創建。它是由:
同步官能行動可根據MIT許可獲得。
Copyright (c) 2020 Felipe Rodriguez Esturo <[email protected]>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.