Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mathieudutour/redux-queue-offline
Queue actions when offline and dispatch them when getting back online
https://github.com/mathieudutour/redux-queue-offline
middleware offline redux
Last synced: 16 days ago
JSON representation
Queue actions when offline and dispatch them when getting back online
- Host: GitHub
- URL: https://github.com/mathieudutour/redux-queue-offline
- Owner: mathieudutour
- Created: 2016-01-19T15:40:05.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-09-17T09:22:31.000Z (about 7 years ago)
- Last Synced: 2024-10-17T16:13:47.564Z (26 days ago)
- Topics: middleware, offline, redux
- Language: JavaScript
- Size: 21.5 KB
- Stars: 65
- Watchers: 3
- Forks: 12
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
redux-queue-offline
=============
[](https://travis-ci.org/mathieudutour/redux-queue-offline)
[](https://www.npmjs.com/package/redux-queue-offline)
[](https://david-dm.org/mathieudutour/redux-queue-offline)
[](https://david-dm.org/mathieudutour/redux-queue-offline#info=devDependencies)
Queue actions when offline and dispatch them when getting back online.
Working nicely together with [redux-optimist-promise](https://github.com/mathieudutour/redux-optimist-promise).
```bash
npm install --save redux-queue-offline
```
## Usage
### Step 1: combine your reducers with the `offlineQueue` reducer
#### `reducers/index.js`
```js
import { reducer as offlineQueue } from 'redux-queue-offline'
import { combineReducers } from 'redux'
import todos from './todos'
import status from './status'
export default combineReducers({
offlineQueue,
todos,
status
})
```
## Step 2: Use the offlineQueue middleware
First, import the middleware creator and include it in `applyMiddleware` when creating the Redux store. **You need to call it as a function (See later why on configuration section below):**
```js
import { middleware as offlineQueueMiddleware } from 'redux-queue-offline'
const composeStoreWithMiddleware = applyMiddleware(
offlineQueueMiddleware()
)(createStore)
```
When used with an async middleware, `offlineQueueMiddleware` need to be place before it.
### Step 3: Mark your actions to be queued with the `queueIfOffline` meta key
```js
store.dispatch({
type: 'ADD_TODO',
payload: {
text,
promise: {url: '/api/todo', method: 'POST', data: text}
},
meta: {
queueIfOffline: true
}
})
```
When the app is offline, the following actions will be dispatch:
```js
{ // no need to worry about this one though
type: 'redux-queue-offline/QUEUE_ACTION',
payload: {
type: 'ADD_TODO',
payload: {
text,
promise: {url: '/api/todo', method: 'POST', data: text}
},
meta: {
queueIfOffline: true
}
}
}
{
type: 'ADD_TODO',
payload: {
text // notice that the `promise` has disappear
},
meta: {
queueIfOffline: true
}
}
```
Once getting back online, the following action will be dispatch:
```js
{
type: 'ADD_TODO',
payload: {
text,
promise: {url: '/api/todo', method: 'POST', data: text}
},
meta: {
skipOptimist: true, // useful not to apply the optimist update twice
queueIfOffline: true
}
}
```
### Step 4: Fire `ONLINE` and `OFFLINE` action when changing
The state of the app (online or offline) is stored in the state. To update it, dispatch the `ONLINE` or `OFFLINE` actions.
```js
import { ONLINE, OFFLINE } from 'redux-queue-offline'
dispatch({ type: ONLINE })
dispatch({ type: OFFLINE })
```
You can use the NetworkListener [high order component](https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775) from [redux-queue-offline-listener](https://github.com/mathieudutour/redux-queue-offline-listener) to wrap the redux Provider and automatically dispatch the ONLINE and OFFLINE action when listening to `window.on('online')` and `window.on('offline')`.
```js
import NetworkListener from 'redux-queue-offline-listener'
import { Provider } from 'react-redux'
const NetworkListenerProvider = NetworkListener(Provider)
ReactDOM.render(
,
rootEl
)
```
## Configuration
You can configure the name of the reducer (default to `offlineQueue`) and the fields being deleted from the action when offline (default to `payload.promise`).
```js
import { middleware as offlineQueueMiddleware } from 'redux-queue-offline'
const composeStoreWithMiddleware = applyMiddleware(
offlineQueueMiddleware('myOfflineQueueReducerName', ['payload.thunk', 'meta.redirect'])
)(createStore)
```
## Gotcha
DO NOT DISPATCH A PROMISE DIRECTLY (otherwise, queuing will be useless). Do use a middleware to transform a descriptive object (`{url: '/api/todo', method: 'POST', data: text}`) to a proper promise.
## License
MIT