redux-queue-offline
Queue actions when offline and dispatch them when getting back online.
Working nicely together with redux-optimist-promise.
npm install --save redux-queue-offline
Usage
offlineQueue
reducer
Step 1: combine your reducers with the reducers/index.js
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):
const composeStoreWithMiddleware = createStore
When used with an async middleware, offlineQueueMiddleware
need to be place before it.
queueIfOffline
meta key
Step 3: Mark your actions to be queued with the store
When the app is offline, the following actions will be dispatch:
// 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:
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
ONLINE
and OFFLINE
action when changing
Step 4: Fire The state of the app (online or offline) is stored in the state. To update it, dispatch the ONLINE
or OFFLINE
actions.
You can use the NetworkListener high order component from 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')
.
const NetworkListenerProvider = ReactDOM
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
).
const composeStoreWithMiddleware = 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