# redux-offline-queue-too

> Simple offline queue for redux, inspired by redux-offline-queue.

Latest version **2.0.1** (published 2019-04-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install redux-offline-queue-too
pnpm add redux-offline-queue-too
yarn add redux-offline-queue-too
bun add redux-offline-queue-too
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2019-04-18 |
| First published | 2019-03-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 163.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Matt Groff |
| Maintainers | mattlgroff |
| Keywords | redux, offline, queue, react native offline |

## Links

- npm: https://www.npmjs.com/package/redux-offline-queue-too
- Repository: https://github.com/mattlgroff/redux-offline-queue-too
- Homepage: https://github.com/mattlgroff/redux-offline-queue-too#readme
- Issues: https://github.com/mattlgroff/redux-offline-queue-too/issues
- npm.io page: https://npm.io/package/redux-offline-queue-too

## Dependencies (3)

- [lodash](https://npm.io/package/lodash.md) ^4.17.4
- [reduxsauce](https://npm.io/package/reduxsauce.md) ^0.7.0
- [redux-persist](https://npm.io/package/redux-persist.md) ^5.5.0

## Alternatives

- [cron](https://npm.io/package/cron.md) — 4.9M weekly downloads
- [@vercel/queue](https://npm.io/package/@vercel/queue.md) — 731.6K weekly downloads
- [create-sonicjs](https://npm.io/package/create-sonicjs.md) — 1.6K weekly downloads
- [@exellix/jobs-api](https://npm.io/package/@exellix/jobs-api.md) — 941 weekly downloads
- [@forwardimpact/libskill](https://npm.io/package/@forwardimpact/libskill.md) — 575 weekly downloads

## Recent versions

- 2.0.1 (latest) — 2019-04-18
- 2.0.0 — 2019-03-20
- 1.0.6 — 2019-03-20

## README

# redux-offline-queue-too

[Forked from `redux-offline-queue` made by InspireNL.](https://github.com/InspireNL/redux-offline-queue)

This package is a simple solution for handling actions or requests with redux while the app is in an offline state by queueing these, and dispatching them once connectivity is re-established. **Works perfect with react-native**

Motivation: Provide a better user experience.

- [Installation](#installation)
- [Usage](#usage)
- [Compatibility](#compatibility)
- [Additional Configuration](#additional-configuration)

## Installation

`npm install --save redux-offline-queue-too`

## Usage - NOTE: This won't apply to this repo, but for `redux-offline-queue`

**See example project here:** [offlineTweet](https://github.com/RobPando/offlineTweet)

Get up and running in 4 easy steps:

### Step 1: Add the redux-offline-queue reducer to your combine reducers

Either import the `{ reducer as offlineQueue }` from `redux-offline-queue` and add it to the `combineReducers` or require it like so (whatever floats your boat):

```javascript
import { combineReducers } from 'redux';

export default combineReducers({
  offlineQueue: require('redux-offline-queue').reducer,
  yourOtherReducer: require('~App/yourOtherReducer').reducer,
});
```

### Step 2: Add the offlineMiddleware

```javascript
import { offlineMiddleware } from 'redux-offline-queue';

const composeStoreWithMiddleware = applyMiddleware(offlineMiddleware())(
  createStore
);
```

**Note** that this queue is not persisted by itself. One should provide a persistence config by using e.g. `redux-persist` to keep the offline queue persisted.

### Step 3: Declare the actions to be queued

#### With `reduxsauce`

```javascript
import { createReducer, createActions } from 'reduxsauce'
import { markActionsOffline } from 'redux-offline-queue'

const { Types, Creators } = createActions({
    requestBlogs: null,
    createBlog: ['blog'],
})

markActionsOffline(Creators, ['createBlog'])
...
```

#### Without

```javascript
import { markActionsOffline } from 'redux-offline-queue'

const Creators = {
  createBlog: blog => ({
    type: 'CREATE_BLOG',
    blog,
  }),
}

markActionsOffline(Creators, ['createBlog'])
...
```

Last but not least...

### Step 4: Monitor the connectivity and let the library know.

```javascript
import { OFFLINE, ONLINE } from 'redux-offline-queue';

if (appIsConnected) {
  dispatch({ type: ONLINE });
} else {
  dispatch({ type: OFFLINE });
}
```

Works perfect with React Native's `NetInfo`

```javascript
import { put, take, call } from 'redux-saga/effects';
import { NetInfo } from 'react-native';
import { OFFLINE, ONLINE } from 'redux-offline-queue';

function* startWatchingNetworkConnectivity() {
  const channel = eventChannel(emitter => {
    NetInfo.isConnected.addEventListener('connectionChange', emitter);
    return () =>
      NetInfo.isConnected.removeEventListener('connectionChange', emitter);
  });
  try {
    for (;;) {
      const isConnected = yield take(channel);
      if (isConnected) {
        yield put({ type: ONLINE });
      } else {
        yield put({ type: OFFLINE });
      }
    }
  } finally {
    channel.close();
  }
}
```

**Android**

If react native's `NetInfo` is intended to be used, for android don't forget to add the following to the `AndroidManifest.xml` :

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

Inspired by redux-queue-offline(mathieudutour)

Developed by Krzysztof Ciombor

## Compatibility

### with `redux-saga`

If you are using `redux-sagas` for http requests and want to fire your redux actions normally, but suspend(queue) sagas, for Step 2, do the following instead:

```javascript
import { applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import {
  offlineMiddleware,
  suspendSaga,
  consumeActionMiddleware,
} from 'redux-offline-queue';

const middleware = [];

middleware.push(offlineMiddleware());
const suspendSagaMiddleware = suspendSaga(createSagaMiddleware());
middleware.push(suspendSagaMiddleware);
middleware.push(consumeActionMiddleware());

applyMiddleware(...middleware);
```

It is **IMPORTANT** that the `consumeActionMiddleware` is placed last, so you can allow the previous middlewares to react first before eventually getting consumed.

## Additional Configuration

Additional configuration can be passed with `offlineMiddleware()`, such as adding additional triggers that will trigger the offline queue to dispatch its actions:

```javascript
...
import { REHYDRATE } from 'redux-persist'

applyMiddleware(offlineMiddleware({
    additionalTriggers: REHYDRATE,
}))
...
```

---
_Source: https://npm.io/package/redux-offline-queue-too · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._