redux-requests - npm Package Compare versions

Comparing version 0.1.1 to 1.0.0

index.js

@@ -49,1 +49,28 @@ /**
 }
+
+/**
+ * Helper function to attempt a request and handle the response.
+ * @param  {String} url           The URL the request is for.
+ * @param  {Object} actions       Actions to dispatch depending on the outcome of the "makeRequest" Promise.
+ * @param  {Function} makeRequest Function that returns a Promise object. This function performs the actual request.
+ * @param  {Function} dispatch    Redux store dispatch function.
+ */
+export function attemptRequest(url, actions, makeRequest, dispatch) {
+  const beginAction = { ...actions.begin() };
+  beginAction.meta = beginAction.meta || {};
+  beginAction.meta.httpRequest = { url, done: false };
+  if (!dispatch(beginAction)) {
+    return; // bail out here if the middleware cancelled the dispatch
+  }
+  makeRequest().then(response => {
+    const successAction = { ...actions.success(response) };
+    successAction.meta = successAction.meta || {};
+    successAction.meta.httpRequest = { url, done: true };
+    dispatch(successAction);
+  }).catch(err => {
+    const failureAction = { ...actions.failure(err) };
+    failureAction.meta = failureAction.meta || {};
+    failureAction.meta.httpRequest = { url, done: true };
+    dispatch(failureAction);
+  });
+}

lib/index.js

@@ -21,2 +21,3 @@ /**
 exports.createRequestMiddleware = createRequestMiddleware;
+exports.attemptRequest = attemptRequest;
 
@@ -72,2 +73,30 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
   };
+}
+
+/**
+ * Helper function to attempt a request and handle the response.
+ * @param  {String} url           The URL the request is for.
+ * @param  {Object} actions       Actions to dispatch depending on the outcome of the "makeRequest" Promise.
+ * @param  {Function} makeRequest Function that returns a Promise object. This function performs the actual request.
+ * @param  {Function} dispatch    Redux store dispatch function.
+ */
+
+function attemptRequest(url, actions, makeRequest, dispatch) {
+  var beginAction = _extends({}, actions.begin());
+  beginAction.meta = beginAction.meta || {};
+  beginAction.meta.httpRequest = { url: url, done: false };
+  if (!dispatch(beginAction)) {
+    return; // bail out here if the middleware cancelled the dispatch
+  }
+  makeRequest().then(function (response) {
+    var successAction = _extends({}, actions.success(response));
+    successAction.meta = successAction.meta || {};
+    successAction.meta.httpRequest = { url: url, done: true };
+    dispatch(successAction);
+  })["catch"](function (err) {
+    var failureAction = _extends({}, actions.failure(err));
+    failureAction.meta = failureAction.meta || {};
+    failureAction.meta.httpRequest = { url: url, done: true };
+    dispatch(failureAction);
+  });
 }

package.json

 {
   "name": "redux-requests",
-  "version": "0.1.1",
+  "version": "1.0.0",
   "description": "Manages in-flight requests with a Redux reducer - avoid issuing duplicate requests without any special logic!",
@@ -27,8 +27,13 @@ "main": "index.js",
   "scripts": {
-    "prepublish": "babel index.js --out-dir lib"
+    "prepublish": "babel index.js --out-dir lib",
+    "test": "mocha --compilers js:babel/register test"
   },
   "dependencies": {},
   "devDependencies": {
-    "babel": "^5.8.21"
+    "babel": "^5.8.21",
+    "chai": "^3.2.0",
+    "chai-as-promised": "^5.1.0",
+    "es6-promise": "^3.0.2",
+    "mocha": "^2.2.5"
   }
 }

README.md

@@ -6,4 +6,6 @@ redux-requests [![Version][npm-image]][npm-url]
 
-[Live Example!](https://idolize.github.io/redux-requests)
+`npm install --save redux-requests`
 
+**[Live Example!](https://idolize.github.io/redux-requests)**
+
 ## Avoiding the issue of multiple requests
@@ -25,7 +27,49 @@
 
+## Simple example
 
-## Before and after
+Provide the function that returns a `Promise`, Action objects to dispatch depending on the outcome of the request, and register the `createRequestMiddleware` middleware and the `requestsReducer` reducer as part of your Redux configuration.
 
-The only changes you should have to make to your code are:
+```js
+import { attemptRequest, requestsReducer, createRequestMiddleware } from 'redux-requests';
+// Attempt to make a request if there isn't one for this URL already
+function loadRepos(userId) {
+  return function (dispatch, getState) {
+    const url = `https://api.github.com/users/${userId}/repos`;
 
+    attemptRequest(url, {
+      begin: () => {
+        type: 'LOAD_REPOS',
+        payload: {
+          userId
+        }
+      },
+      success: response => {
+        type: 'LOAD_REPOS',
+        payload: {
+          userId,
+          response
+        }
+      },
+      failure: error => {
+        type: 'LOAD_REPOS',
+        error,
+        payload: {
+          userId
+        }
+      }
+    }, () => fetch(url)
+      .then(checkStatus)
+      .then(parseJSON)
+    , dispatch);
+  }
+}
+// Add additional reducer and middleware
+const createStoreWithMiddleware = applyMiddleware(thunkMiddleware, createRequestMiddleware())(createStore);
+let store = createStoreWithMiddleware(combineReducers({ requestsReducer, githubRepos }));
+```
+
+## What's going on: before and after
+
+The `attemptRequest` helper is actually very simple (and completely optional). All it does is the following:
+
 1. Add `meta.httpRequest` fields to your Action objects
@@ -36,5 +80,4 @@ - `meta.httpRequest.url` is required, and will be used as the unique identifier for the request
 2. Check if the `dispatch` for your initial request Action was cancelled (`dispatch` will return `undefined`), and if so do not issue your request
-3. Register the `createRequestMiddleware` middleware and the `requestsReducer` reducer as part of your Redux configuration.
 
-#### Original code:
+#### Original, naïve code (without redux-requests library):
 
@@ -113,3 +156,3 @@ ```js
 
-#### New code:
+#### New code (using redux-requests to manage pending requests):
 
@@ -165,3 +208,3 @@ ```js
 
-// Add additional store and middleware
+// Add additional reducer and middleware
 import { requestsReducer, createRequestMiddleware } from 'redux-requests';
@@ -168,0 +211,0 @@ const createStoreWithMiddleware = applyMiddleware(thunkMiddleware, createRequestMiddleware())(createStore);

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16007

increased by33.54%

Lines of code

161

increased by49.07%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

232

increased by22.75%

Worsened metrics

Dev dependency count

5

increased by400%

No dependency changes