sync offline actions

синхронизионные действия

Это нативная библиотека React, созданная для обработки синхронизации с бэкэнд. Представьте, что какое -то действие направлено, и в этот момент у вас не было Интернета, с этой библиотекой вы сможете поймать эту волюрянию, сохранить информацию, связанную с действием, и отправить его снова, когда соединение восстанавливается. Лучшая часть этого, это то, что эта библиотека очень легко использовать.

Начиная

Требования

redux

react-redux

@react-native-community/netinfo > Вам придется установить эту библиотеку раньше, вот шаги: net info

@react-native-community/async-storage

Установите библиотеку

 yarn add sync-offline-actions

или NPM:

 npm install --save sync-offline-actions

Как его использовать

Мы предоставляем четыре инструмента, чтобы вы могли справиться с поведением вашего проекта. Это:

RESTOREOFFLINEACTIONS

Это компонент, который вам придется использовать в корне вашего проекта. Вполне необходимо, чтобы вы использовали этот компонент в корне своего проекта, потому что он должен существовать в компоненте, который всегда жив. Этот компонент должен будет обернуть другие компоненты, которые у вас есть в корне вашего проекта, например:

 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 этим действие, это последнее действие, которое вы хотите отправить при восстановлении соединения.

SaveactionTobesync

Это функция для сохранения моментов, действий или Ocurrencys, которые будут отправлены позже. Вот несколько примеров использования:

 // 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 , когда соединение будет восстановлено, associatedAction действие, связанное с name первого аргумента, будет вызвана со списком аргументов второго аргумента. Это проще, чем выглядит.

Рекомендация

Мы рекомендуем вам иметь постоянный файл, в котором вы можете сохранить имена действий, чтобы вы могли более организованы эти имена, что -то вроде этого:

 // some constant file
export const OFFLINE_ACTION_NAMES = {
  SOME_ACTION : "someAction" ,
  OTHER_ACTION : "otherAction" ,
} ;

Важный

Все Ocurrencys будут удалены после восстановления соединения, и некоторые действия отправлены. Это не является действиями некоторых разделов, которые не были отправлены, они все равно будут удалены. Пожалуйста, дайте нам знать через проблему, если вы не согласны с этим поведением.

Больше инструментов

Эти инструменты являются плюсом для этой библиотеки, но они не связаны с реальной функциональностью этого, они могут помочь вам облегчить вашу работу.

withnetinfo

Это HOC, чтобы попросить состояние связи. Вот пример использования:

 import { withNetInfo } from "sync-offline-actions" ;

class SomeComponent extends Component {
  /*some code*/
  someMethod = ( ) => {
    const { isConnected } = this . props ;
    /*Do something*/
  } ;
}

export default withNetInfo ( SomeComponent ) ;

Опора isConnected будет введена в качестве опоры SomeComponent из -за hoc withnetinfo, опора будет обновлена ​​с помощью изменений сети.

Usenetinfo

Это Customshook с той же функциональностью withNetInfo , пример использования:

 import { useNetInfo } from "sync-offline-actions" ;

const SomeFunction = ( ) => {
  const isConnected = useNetInfo ( ) ;
  // More of the function
} ;

Затем Isconnected будет обновлен с последними изменениями соединения.

Благодаря

Народ @react-native-community/netinfo

Внося

1. Разветвляй это
2. Создайте филиал своей функции ( git checkout -b my-new-feature )
3. Совершить свои изменения ( git commit -am 'Add some feature' )
4. Толкайте к ветке ( git push origin my-new-feature )
5. Создать новый запрос на привлечение

О

Этот проект был создан Фелипе Родригесом Эстуро. Это помашено:

Лицензия

Синхронизированные действия доступны по лицензии 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.