From d27321a463a354a29f48a9e941300fd0c8322f57 Mon Sep 17 00:00:00 2001 From: Roberto Pando Date: Wed, 24 Jan 2018 14:19:35 +0100 Subject: [PATCH 1/3] Add author --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f00b9ec..c7661f5 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "offline", "queue" ], - "author": "", + "author": "Inspire", "license": "MIT", "dependencies": { "lodash": "^4.17.4", From 9ad359def969b085980e4de630810e0e1982ddf4 Mon Sep 17 00:00:00 2001 From: Roberto Pando Date: Wed, 24 Jan 2018 14:19:49 +0100 Subject: [PATCH 2/3] Add jest compatability to eslint --- .eslintrc.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.eslintrc.json b/.eslintrc.json index 9f0df8b..5e38cf9 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,9 +1,11 @@ { "extends": "airbnb", - "plugins": ["jest"], "parser": "babel-eslint", "rules": { "semi": [2, "never"], "arrow-body-style": [0, "as-needed"] + }, + "env": { + "jest": true } } From e9cca938763cdd7cfc4a4978d5ffa2248c3942e7 Mon Sep 17 00:00:00 2001 From: Roberto Pando Date: Tue, 30 Jan 2018 17:21:29 +0100 Subject: [PATCH 3/3] Update readme --- README.md | 140 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 139 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d194520..685af44 100644 --- a/README.md +++ b/README.md @@ -1 +1,139 @@ -# react-offline-queue \ No newline at end of file +# redux-offline-queue + +This package is a simple solution to handling actions or requests with redux while the app is in an offline state by queueing these, and dispatching them once connectivity is established once again. + +- [Installation](#installation) +- [Usage](#usage) +- [compatability](#compatability) +- [Additional Configuration](#additional-configuration) + +## Installation + +`yarn add redux-offline-queue` + +OR (old school) + +`npm install --save redux-offline-queue` + +## Usage + +Get up and running in 4 easy steps: + +### Step 1: Add the redux-offline-queue reducer to yours + +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` + +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, +})) +... +```