redux offline

Содействия хотели

Постоянный Redux Store для Anousaboutable ™ ️ автономных приложений с первой поддержкой для оптимистичного пользовательского интерфейса. Используйте с React, React Native или в качестве автономного состояния контейнер для любого веб -приложения.

Redux Offline в настоящее время поддерживается командой, ориентированной на сообщество. Новые версии библиотеки теперь будут доступны в рамках организации 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. (React Native Android). Запросите разрешение на чтение статуса сети

Если написать нативное приложение для Android, вам нужно будет потребовать разрешения на доступ к состоянию сети в вашем AndroidManifest.xml :

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

---

См. Документацию для параметров конфигурации, полного API и общих рецептов.

Внося

Улучшения и дополнения приветствуются. Для больших изменений, пожалуйста, отправьте проблему обсуждения, прежде чем прыгнуть на кодирование; Мы ненавидим вас тратить эти усилия.

Если вы сообщаете об ошибке, укажите код, который воспроизводит ошибку. Вот стартовое приложение на CodeSandbox.

Вместо формального руководства по стилю следуйте прилагаемым правилам Eslint и используйте красивые для форматирования вашего кода.

Разное

Использование с Redux Sterist V5

Если вы хотите использовать пользовательскую версию Redux-Persist, есть пример конфигурации.

Предыдущее искусство

Redux Offline - это дистилляция моделей, обнаруженных при создании приложений с использованием ранее существующих библиотек:

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

Без их работы Redux Offline не было бы. Если вам нравятся идеи Redux Offline, но вы хотите создать свой собственный стек из компонентов нижнего уровня, это хорошие места для начала.

Лицензия

Грань