Requests reducer with async action

Author: Ryan Ashcraft

.babelrc

@@ -1,3 +1,3 @@
 {
-    "presets": ["es2015", "stage-2"]
+    "presets": ["react", "es2015", "stage-2"]
 }

examples/async/containers/App.js

@@ -1,5 +1,6 @@
 import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
+import { createContainer, Schema, arrayOf } from 'redux-query';
 import { selectReddit, fetchPostsIfNeeded, invalidateReddit } from '../actions'
 import Picker from '../components/Picker'
 import Posts from '../components/Posts'
@@ -99,4 +100,21 @@ function mapStateToProps(state) {
   }
 }
 
-export default connect(mapStateToProps)(App)
+const post = new Schema('posts', {
+  idAttribute: (entity) => {
+    return entity.data.id;
+  }
+});
+
+const AppContainer = createContainer((props) => {
+  return {
+    url: `https://www.reddit.com/r/${props.selectedReddit}.json`,
+    schema: {
+      data: {
+        children: arrayOf(post)
+      }
+    }
+  };
+}, (state) => state.requests)(App);
+
+export default connect(mapStateToProps)(AppContainer)

examples/async/reducers/index.js

@@ -3,6 +3,7 @@ import {
   SELECT_REDDIT, INVALIDATE_REDDIT,
   REQUEST_POSTS, RECEIVE_POSTS
 } from '../actions'
+import { requestsReducer } from 'redux-query';
 
 function selectedReddit(state = 'reactjs', action) {
   switch (action.type) {
@@ -55,7 +56,8 @@ function postsByReddit(state = { }, action) {
 
 const rootReducer = combineReducers({
   postsByReddit,
-  selectedReddit
+  selectedReddit,
+  requests: requestsReducer
 })
 
 export default rootReducer

examples/async/webpack.config.js

@@ -2,7 +2,7 @@ var path = require('path')
 var webpack = require('webpack')
 
 module.exports = {
-  devtool: 'cheap-module-eval-source-map',
+  devtool: 'cheap-source-map',
   entry: [
     'webpack-hot-middleware/client',
     './index'
@@ -14,6 +14,7 @@ module.exports = {
   },
   plugins: [
     new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.DedupePlugin(),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoErrorsPlugin()
   ],

package.json

@@ -17,16 +17,24 @@
   "author": "Ryan Ashcraft",
   "license": "ISC",
   "devDependencies": {
-    "babel-cli": "^6.1.2",
     "babel-core": "^6.2.1",
     "babel-loader": "^6.2.0",
-    "babel-preset-es2015": "^6.1.2",
-    "babel-preset-stage-2": "^6.3.13",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
     "react": "^0.14.6",
     "react-redux": "^4.0.6",
     "redux": "^3.0.5",
     "redux-devtools": "^3.0.0",
     "redux-devtools-log-monitor": "^1.0.1",
     "webpack": "^1.12.9"
+  },
+  "dependencies": {
+    "babel-preset-stage-2": "^6.3.13",
+    "lodash": "^4.0.0",
+    "normalizr": "^2.0.0",
+    "superagent": "^1.6.1"
+  },
+  "peerDependencies": {
+    "redux-thunk": "^1.0.3"
   }
 }

src/actions/index.js

@@ -0,0 +1,50 @@
+import superagent from 'superagent'
+import { normalize } from 'normalizr';
+import get from 'lodash/get';
+
+import * as actionTypes from '../constants/action-types';
+
+export const requestStart = (url) => {
+    return {
+        type: actionTypes.REQUEST_START,
+        url,
+    };
+};
+
+export const requestSuccess = (url, status, entities) => {
+    return {
+        type: actionTypes.REQUEST_SUCCCESS,
+        url,
+        status,
+        entities,
+    };
+};
+
+export const requestFailure = (url, status) => {
+    return {
+        type: actionTypes.REQUEST_SUCCCESS,
+        url,
+        status,
+    };
+};
+
+export const requestAsync = (url, schema, requestsSelector) => (dispatch, getState) => {
+    const state = getState();
+    const requests = requestsSelector(state);
+    const request = requests[url];
+    const isPending = get(request, ['isPending'], false);
+
+    if (!isPending) {
+        dispatch(requestStart(url));
+
+        superagent.get(url)
+            .end((err, response) => {
+                if (err) {
+                    dispatch(requestFailure(url, response.status));
+                } else {
+                    const normalized = normalize(response.body, schema);
+                    dispatch(requestSuccess(url, response.status, normalized.entities));
+                }
+            });
+    }
+};

src/components/create-container.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import storeShape from 'react-redux/lib/utils/storeShape';
+
+import { requestAsync } from '../actions';
+
+const createContainer = (mapPropsToDeps, responsesSelector) => (WrappedComponent) => {
+    class ReduxQueryContainer extends Component {
+        componentDidMount() {
+            this.fetch();
+        }
+
+        componentWillUpdate() {
+            this.fetch();
+        }
+
+        fetch() {
+            const { dispatch } = this.context.store;
+            const deps = mapPropsToDeps(this.props);
+            dispatch(requestAsync(deps.url, deps.schema, responsesSelector));
+        }
+
+        render() {
+            return (
+                <WrappedComponent
+                    {...this.props}
+                />
+            );
+        }
+    }
+
+    ReduxQueryContainer.displayName = `ReduxQueryContainer(${WrappedComponent.displayName})`;
+    ReduxQueryContainer.contextTypes = {
+        store: storeShape,
+    };
+
+    return ReduxQueryContainer;
+};
+
+export default createContainer;

src/constants/action-types.js

@@ -0,0 +1,3 @@
+export const REQUEST_START = '@@query/REQUEST_START';
+export const REQUEST_SUCCCESS = '@@query/REQUEST_SUCCCESS';
+export const REQUEST_FAILURE = '@@query/REQUEST_FAILURE';

src/index.js

@@ -0,0 +1,3 @@
+export { Schema, arrayOf } from 'normalizr';
+export { default as createContainer } from './components/create-container';
+export { default as requestsReducer } from './reducers/requests';

src/reducers/requests.js

@@ -0,0 +1,25 @@
+import values from 'lodash/values';
+import includes from 'lodash/includes';
+
+import * as actionTypes from '../constants/action-types';
+
+const request = (state = { status: null, isPending: false }, action) => {
+    return {
+        ...state,
+        status: action.status || state.status,
+        isPending: action.type === actionTypes.REQUEST_START,
+    };
+};
+
+const requests = (state = {}, action) => {
+    if (includes(values(actionTypes), action.type)) {
+        return {
+            ...state,
+            [action.url]: request(state[action.url], action),
+        };
+    } else {
+        return state;
+    }
+};
+
+export default requests;