intial commit

Author: kolodny

.babelrc

@@ -0,0 +1,4 @@
+{
+  "stage": 0,
+  "loose": "all"
+}

.editorconfig

@@ -0,0 +1,12 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,3 @@
+lib/
+node_modules/
+coverage/

.npmignore

@@ -0,0 +1,8 @@
+src
+examples
+test.js
+.babelrc
+.npmignore
+.travis.yml
+oldtest.js
+loader.js

.travis.yml

@@ -0,0 +1,9 @@
+language: node_js
+node_js:
+  - "0.12"
+  - "iojs"
+  - "4"
+  - "5"
+script: "npm run-script test-travis"
+# Send coverage data to Coveralls
+after_script: "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js"

README.md

@@ -0,0 +1,131 @@
+redux-await
+=============
+
+[![NPM version][npm-image]][npm-url]
+[![Build status][travis-image]][travis-url]
+[![Test coverage][coveralls-image]][coveralls-url]
+[![Downloads][downloads-image]][downloads-url]
+
+Manage async redux actions sanely
+
+## Install
+
+```js
+npm install --save redux-await
+```
+
+## Usage
+
+This module exposes a middleware and higher order reducer to take care of async state in a redux app. You'll need to:
+
+1. Apply the middleware:
+
+```js
+import { middleware as awaitMiddleware } from 'redux-await';
+let createStoreWithMiddleware = applyMiddleware(
+  awaitMiddleware,
+)(createStore);
+```
+
+2. Wrap your reducers
+
+```js
+const intialState = {
+  users: [],
+}
+
+const reducer = (state = [], action = {}) => {
+  if (action.type === GET_USERS) {
+    return { ...state, users: action.payload.users };
+  }
+  if (action.type === ADD_USER) {
+    return { ...state, users: state.users.concat(action.payload.user) };
+  }
+  return state;
+}
+
+// old code
+// export default reducer;
+
+// new code
+import { createReducer } from 'redux-await';
+export default createReducer(reducer);
+```
+
+Note, if you are using `combineReducers` then you need to wrap each reducer that you are combining independently and not the master reducer that `combineReducers` returns
+
+Now your action creators can contain promises:
+
+```js
+// old code
+//export const getUsers = users => ({
+//  type: ADD_USER,
+//  payload: {
+//    users: users,
+//  },
+//});
+//export const addUser = user => ({
+//  type: ADD_USER,
+//  payload: {
+//    user: user,
+//  },
+//});
+
+// new code
+import { AWAIT_MARKER } from 'redux-await';
+export const getUsers = users => ({
+ type: ADD_USER,
+ AWAIT_MARKER,
+ payload: {
+   users: api.getUsers(), // returns promise
+ },
+});
+export const addUser = user => ({
+ type: ADD_USER,
+ AWAIT_MARKER,
+ payload: {
+   user: api.generateUser(), // returns promise
+ },
+});
+```
+
+Now your containers can hardly need to change at all:
+
+```js
+import { getInfo } from 'redux-await'
+
+class Container extends Component {
+  render() {
+    const { users, user } = this.props;
+
+    // old code
+    //return <div>
+    //  <MyTable data={users} />
+    //</div>;
+
+    // new code
+    return <div>
+      { getInfo(users).status === 'pending' && <div>Loading...</div> }
+      { getInfo(users).status === 'success' && <MyTable data={users} /> }
+      { getInfo(users).status === 'failure' && <div>Opps: {getInfo(users).error.message}</div> }
+      { getInfo(user).status === 'pending' && <div>Saving new user</div> }
+      { getInfo(user).status === 'failure' && <div>There was an error saving</div> }
+    </div>;
+  }
+}
+```
+
+## Advanced Stuff
+
+By default your reducer is called with the type specified in the action only on the success stage, you can listen to pending an fail events too by listening for `getPendingActionType(type)` and `getFailureActionType(type)` types, also your reducer is called every time (pending, success, failure) after the higher order reducer does it's thing, but you can still get the old state as the third parameter (not sure why you would ever need to though)
+
+It's a little weird using the prop of the action creator to inject it's status info into state, but I couldn't really think of a better way to do it (WeakMaps somehow?)
+
+[npm-image]: https://img.shields.io/npm/v/redux-await.svg?style=flat-square
+[npm-url]: https://npmjs.org/package/redux-await
+[travis-image]: https://img.shields.io/travis/symbiont-io/redux-await.svg?style=flat-square
+[travis-url]: https://travis-ci.org/symbiont-io/redux-await
+[coveralls-image]: https://img.shields.io/coveralls/kolodny/redux-await.svg?style=flat-square
+[coveralls-url]: https://coveralls.io/r/kolodny/redux-await
+[downloads-image]: http://img.shields.io/npm/dm/redux-await.svg?style=flat-square
+[downloads-url]: https://npmjs.org/package/redux-await

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "redux-await",
+  "version": "1.0.0",
+  "description": "Manage async redux actions sanely",
+  "main": "index.js",
+  "scripts": {
+    "build": "babel src --out-dir lib",
+    "prepublish": "npm run test && npm run build",
+    "test-cov": "node ./node_modules/istanbul/lib/cli.js cover node_modules/mocha/bin/_mocha 'test.js' -- --reporter dot --require babel/register",
+    "test-travis": "node ./node_modules/istanbul/lib/cli.js cover ./node_modules/mocha/bin/_mocha 'test.js' -- -R spec --require babel/register",
+    "test": "mocha --compilers js:babel/register --recursive"
+  },
+  "author": "Moshe Kolodny",
+  "license": "MIT",
+  "devDependencies": {
+    "babel": "^5.8.34",
+    "coveralls": "^2.11.4",
+    "expect": "^1.13.0",
+    "istanbul": "^0.4.1",
+    "mocha": "^2.3.4",
+    "redux": "^3.0.4"
+  },
+  "dependencies": {
+    "expect": "^1.13.0",
+    "redux": "^3.0.4",
+    "babel": "^5.8.34"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kolodny/redux-await.git"
+  },
+  "keywords": [
+    "redux",
+    "async",
+    "await"
+  ],
+  "bugs": {
+    "url": "https://github.com/kolodny/redux-await/issues"
+  },
+  "homepage": "https://github.com/kolodny/redux-await#readme"
+}

src/constants.js

@@ -0,0 +1,3 @@
+export const AWAIT_MARKER = '@@redux-await/AWAIT_MARKER';
+export const AWAIT_META_CONTAINER = '@@redux-await/AWAIT_META_CONTAINER';
+export const AWAIT_INFO_CONTAINER = '@@redux-await/AWAIT_INFO_CONTAINER';

src/get-info.js

@@ -0,0 +1,9 @@
+import { AWAIT_INFO_CONTAINER } from './constants';
+
+export default object => {
+  if (!object || !object[AWAIT_INFO_CONTAINER]) {
+    return { status: 'success', value: object };
+  }
+
+  return object[AWAIT_INFO_CONTAINER];
+}

src/index.js

@@ -0,0 +1,4 @@
+export { AWAIT_MARKER, AWAIT_META_CONTAINER, AWAIT_INFO_CONTAINER, PENDING, SUCCESS, FAILURE } from './constants';
+export { middleware, getPendingActionType, getFailedActionType } from './middleware';
+export createReducer from './reducer';
+export getInfo from './get-info';

src/middleware.js

@@ -0,0 +1,53 @@
+import { resolveProps, getNonPromiseProperties, getPromiseKeys } from './utils';
+
+import { AWAIT_MARKER, AWAIT_META_CONTAINER } from './constants';
+
+export const getPendingActionType = type => `${AWAIT_MARKER}/pending/${type}`;
+export const getFailedActionType = type => `${AWAIT_MARKER}/fail/${type}`;
+
+export const middleware = ({ dispatch }) => next => action => {
+  const { payload, type, meta } = action;
+
+  if (payload && action.AWAIT_MARKER === AWAIT_MARKER) {
+
+    const promiseKeys = getPromiseKeys(payload);
+    const scalarValues = getNonPromiseProperties(payload);
+    const pendingMeta = { [AWAIT_META_CONTAINER]: { promiseKeys, scalarValues, status: 'pending' } };
+    const successMeta = { [AWAIT_META_CONTAINER]: { promiseKeys, scalarValues, status: 'success' } };
+    const failureMeta = { [AWAIT_META_CONTAINER]: { promiseKeys, scalarValues, status: 'failure' } };
+
+    const newAction = { ...action };
+    newAction.type = undefined;
+    newAction.payload = undefined;
+    newAction.AWAIT_MARKER = undefined;
+
+    dispatch({
+      ...newAction,
+      type: getPendingActionType(type),
+      meta: { ...meta, ...pendingMeta, type },
+    });
+
+    const successCallback = payload => {
+      dispatch({
+        ...newAction,
+        type,
+        payload,
+        meta: { ...meta, ...successMeta },
+      });
+    };
+
+    const failureCallback = error => {
+      dispatch({
+        ...newAction,
+        type: getFailedActionType(type),
+        payload: error,
+        meta: { ...meta, ...failureMeta, type },
+      });
+    }
+
+    resolveProps(payload).then(successCallback, failureCallback);
+
+  } else {
+    next(action);
+  }
+};

src/reducer.js

@@ -0,0 +1,32 @@
+import { AWAIT_META_CONTAINER, AWAIT_INFO_CONTAINER } from './constants';
+import { getPromiseKeys, objectWithoutProperties } from './utils';
+
+export default reducer => (state, action) => {
+  debugger;
+  let nextState;
+  if (action.meta && action.meta[AWAIT_META_CONTAINER]) {
+    const awaitMeta = action.meta[AWAIT_META_CONTAINER];
+
+    if (awaitMeta.status === 'pending') {
+      const pendingProperties = {};
+      awaitMeta.promiseKeys.forEach(prop => pendingProperties[prop] = {
+        [AWAIT_INFO_CONTAINER]: { status: 'pending', error: null }
+      });
+      nextState = { ...state, ...pendingProperties };
+
+    } else if (awaitMeta.status === 'success') {
+      nextState = objectWithoutProperties(state, awaitMeta.promiseKeys);
+
+    } else if (awaitMeta.status === 'failure') {
+      const errorProperties = {};
+      awaitMeta.promiseKeys.forEach(prop => errorProperties[prop] = {
+        [AWAIT_INFO_CONTAINER]: { status: 'failure', error: action.payload }
+      });
+      nextState = { ...state, ...errorProperties };
+    }
+
+  } else {
+    nextState = state
+  }
+  return reducer(nextState, action, state);
+};

src/utils.js

@@ -0,0 +1,33 @@
+export const isPromise = obj => obj && typeof obj.then === 'function';
+export const getPromiseKeys = obj => Object.keys(obj).filter(key => isPromise(obj[key]));
+
+export const resolveProps = obj => {
+  const props = Object.keys(obj);
+  const values = props.map(prop => obj[prop]);
+
+  return Promise.all(values).then(resolvedArray => {
+    return props.reduce((acc, prop, index) => {
+      acc[prop] = resolvedArray[index];
+      return acc;
+    }, {});
+  });
+};
+
+export const getNonPromiseProperties = obj => {
+  return Object.keys(obj).filter(key => !isPromise(obj[key])).reduce((acc, key) => {
+    acc[key] = obj[key];
+    return acc;
+  }, {});
+};
+
+export const objectWithoutProperties = (obj, keys) => {
+  var target = {};
+  for (var i in obj) {
+    if (keys.indexOf(i) >= 0) continue;
+
+    /* istanbul ignore if */
+    if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
+    target[i] = obj[i];
+  }
+  return target;
+}