feat(core): allow async action creators

Action creators attached to the routes (both to a url
param or as an after action creator) can now return
a promise.

BREAKING CHANGE: getState now returns a promise

Before:

```js
const state = getState( url, routes, reducer );
const store = createStore( reducer, state, middleware );
```

After:

```js
getState( url, routes, reducer ).then( state => {
  const store = createStore( reducer, state, middleware );
})
```

Author: colinmeinke

README.md

@@ -169,9 +169,9 @@ your Redux store.
 ```js
 import { getState } from 'universal-redux-router';
 
-const state = getState( url, routes, reducer );
-
-const store = createStore( reducer, state, middleware );
+getState( url, routes, reducer ).then( state => {
+  const store = createStore( reducer, state, middleware );
+});
 ```
 
 ## Help make this better

examples/basic/.gitignore

@@ -1,2 +1,3 @@
 client.dist.js
+client.dist.js.map
 node_modules/

examples/basic/client.js

@@ -5,16 +5,16 @@ import { Router } from '../../src';
 
 import routes from './common/routes';
 
-import createStore from './common/createStore';
+import configureStore from './common/configureStore';
 
 const { hash, pathname, search } = window.location;
 const url = pathname + search + hash;
 
-const store = createStore({ url });
-
-render(
-  <Provider store={ store }>
-    <Router routes={ routes } />
-  </Provider>,
-  document.querySelector( '.app' )
-);
+configureStore({ url }).then( store => {
+  render(
+    <Provider store={ store }>
+      <Router routes={ routes } />
+    </Provider>,
+    document.querySelector( '.app' )
+  );
+}).catch( console.error );

examples/basic/common/actions/index.js

@@ -0,0 +1,3 @@
+import { UPDATE_NAME, updateName } from './name';
+
+export { UPDATE_NAME, updateName };

examples/basic/common/actions/name.js

@@ -1,3 +1,5 @@
-export const UPDATE_NAME = 'UPDATE_NAME';
+const UPDATE_NAME = 'UPDATE_NAME';
 
-export const updateName = name => ({ type: UPDATE_NAME, name });
+const updateName = name => ({ type: UPDATE_NAME, name });
+
+export { UPDATE_NAME, updateName };

examples/basic/common/configureStore.js

@@ -0,0 +1,23 @@
+import { applyMiddleware, createStore } from 'redux';
+import { getState, routerMiddleware, routerReducer } from '../../../src';
+
+import * as reducers from './reducers';
+import routes from './routes';
+
+const reducer = routerReducer( reducers );
+
+const configureStore = ({ isServer = false, url = '/' } = {}) => new Promise(( resolve, reject ) => {
+
+  getState( url, routes, reducer ).then( state => {
+
+    const middleware = applyMiddleware(
+      routerMiddleware( routes, { isServer })
+    );
+
+    resolve( createStore( reducer, state, middleware ));
+
+  }).catch( reject );
+
+});
+
+export default configureStore;

examples/basic/common/createStore.js

@@ -1,10 +1,12 @@
-import { UPDATE_NAME } from '../actions/name';
+import { UPDATE_NAME } from '../actions';
 
-export default function name ( state = '', action ) {
+const name = ( state = '', action ) => {
   switch ( action.type ) {
     case UPDATE_NAME:
       return action.name;
     default:
       return state;
   }
-}
+};
+
+export default name;

examples/basic/common/reducers/name.js

@@ -1,19 +1,19 @@
 {
   "scripts": {
-    "build": "webpack ./client.js ./client.dist.js --config ./webpack.config.js",
+    "build": "webpack ./client.js ./client.dist.js --config ./webpack.config.babel.js",
     "start": "babel-node ./server.js"
   },
   "dependencies": {
-    "babel-cli": "^6.4.5",
-    "babel-core": "^6.4.5",
-    "babel-plugin-transform-object-rest-spread": "^6.3.13",
-    "babel-plugin-transform-react-jsx": "^6.4.0",
-    "babel-preset-es2015": "^6.3.13",
+    "babel-cli": "^6.5.1",
+    "babel-core": "^6.5.1",
+    "babel-plugin-transform-object-rest-spread": "^6.5.0",
+    "babel-plugin-transform-react-jsx": "^6.5.0",
+    "babel-preset-es2015": "^6.5.0",
     "express": "^4.13.4",
     "react": "^0.14.7",
     "react-dom": "^0.14.7",
-    "react-redux": "^4.1.1",
-    "redux": "^3.1.2"
+    "react-redux": "^4.4.0",
+    "redux": "^3.3.1"
   },
   "repository": {
     "type": "git",
@@ -24,8 +24,8 @@
   },
   "license": "ISC",
   "devDependencies": {
-    "babel-loader": "^6.2.1",
-    "webpack": "^1.12.12"
+    "babel-loader": "^6.2.2",
+    "webpack": "^1.12.13"
   },
   "babel": {
     "plugins": [ "transform-object-rest-spread", "transform-react-jsx" ],

examples/basic/package.json

@@ -7,22 +7,22 @@ import { changePageTo, Router } from '../../src';
 
 import routes from './common/routes';
 
-import createStore from './common/createStore';
+import configureStore from './common/configureStore';
 
 import Page from './common/components/Page';
 
 const app = express();
 
 const handleRender = ( req, res ) => {
-  const store = createStore({ isServer: true, url: req.url });
-
-  res.send( renderFullPage(
-    renderToString(
-      <Provider store={ store }>
-        <Router routes={ routes } />
-      </Provider>
-    )
-  ));
+  configureStore({ isServer: true, url: req.url }).then( store => {
+    res.send( renderFullPage(
+      renderToString(
+        <Provider store={ store }>
+          <Router routes={ routes } />
+        </Provider>
+      )
+    ));
+  }).catch( console.error );
 };
 
 const renderFullPage = ( app ) => {

examples/basic/server.js

@@ -0,0 +1,9 @@
+import config from '../../webpack.config.babel';
+
+export default {
+  ...config,
+  externals: {
+    ...config.externals,
+    redux: 'Redux',
+  },
+};

examples/basic/webpack.config.babel.js

@@ -0,0 +1,3 @@
+client.dist.js
+client.dist.js.map
+node_modules/

examples/basic/webpack.config.js

@@ -0,0 +1,14 @@
+# Real world example
+
+## Getting started
+
+To run this example make sure you have first run `npm install`
+in the root directory. Then `cd` into `/examples/real-world` and:
+
+```
+npm install
+npm run build
+npm start
+```
+
+Then visit [http://localhost:3000/menu](http://localhost:3000/menu).

examples/real-world/.gitignore

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from 'react-dom';
+import { Provider } from 'react-redux';
+import { Router } from '../../src';
+
+import routes from './common/routes';
+
+import configureStore from './common/configureStore';
+
+const { hash, pathname, search } = window.location;
+const url = pathname + search + hash;
+
+configureStore({ url }).then( store => {
+  render(
+    <Provider store={ store }>
+      <Router routes={ routes } />
+    </Provider>,
+    document.querySelector( '.app' )
+  );
+}).catch( console.error );

examples/real-world/README.md

@@ -0,0 +1,8 @@
+const DISHES_LOADED = 'DISHES_LOADED';
+const DISHES_LOADING = 'DISHES_LOADING';
+
+const dishesLoaded = () => ({ type: DISHES_LOADED });
+
+const dishesLoading = () => ({ type: DISHES_LOADING });
+
+export { DISHES_LOADED, DISHES_LOADING, dishesLoaded, dishesLoading };

examples/real-world/client.js

@@ -0,0 +1,7 @@
+import { countries } from '../config';
+
+const UPDATE_COUNTRY = 'UPDATE_COUNTRY';
+
+const updateCountry = ( country = countries[ 0 ]) => ({ type: UPDATE_COUNTRY, country });
+
+export { UPDATE_COUNTRY, updateCountry };

examples/real-world/common/actions/areDishesLoading.js

@@ -0,0 +1,22 @@
+import 'isomorphic-fetch';
+
+import getLocation from '../../../../src/helpers/getLocation';
+
+const UPDATE_DISHES = 'UPDATE_DISHES';
+
+const getDishes = ({ country, isVegetarian }) => new Promise(( resolve, reject ) => {
+  const to = [ 'api/dishes', { country, isVegetarian }];
+  const { url } = getLocation( to );
+
+  fetch( `http://localhost:3000${ url }`, {
+    method: 'GET',
+  }).then( response => {
+    return response.json();
+  }).then(({ dishes }) => {
+    resolve({ type: UPDATE_DISHES, dishes });
+  }).catch( error => {
+    reject( error );
+  });
+});
+
+export { UPDATE_DISHES, getDishes };

examples/real-world/common/actions/country.js

@@ -0,0 +1,17 @@
+import { DISHES_LOADED, DISHES_LOADING, dishesLoaded, dishesLoading } from './areDishesLoading';
+import { UPDATE_COUNTRY, updateCountry } from './country';
+import { UPDATE_DISHES, getDishes } from './dishes';
+import { UPDATE_IS_VEGETARIAN, updateIsVegetarian } from './isVegetarian';
+
+export {
+  DISHES_LOADED,
+  DISHES_LOADING,
+  UPDATE_COUNTRY,
+  UPDATE_DISHES,
+  UPDATE_IS_VEGETARIAN,
+  dishesLoaded,
+  dishesLoading,
+  getDishes,
+  updateCountry,
+  updateIsVegetarian,
+};

examples/real-world/common/actions/dishes.js

@@ -0,0 +1,8 @@
+const UPDATE_IS_VEGETARIAN = 'UPDATE_IS_VEGETARIAN';
+
+const updateIsVegetarian = ( isVegetarian = false ) => ({
+  isVegetarian,
+  type: UPDATE_IS_VEGETARIAN,
+});
+
+export { UPDATE_IS_VEGETARIAN, updateIsVegetarian };

examples/real-world/common/actions/index.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+
+import Menu from './Menu/index';
+
+const mapStateToProps = ({ areDishesLoading, country, dishes, isVegetarian }) => ({
+  areDishesLoading,
+  country,
+  dishes,
+  isVegetarian,
+});
+
+export default connect( mapStateToProps, null )( Menu );

examples/real-world/common/actions/isVegetarian.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { changePageTo, Link } from '../../../../../src';
+import getLocation from '../../../../../src/helpers/getLocation';
+
+import { countries } from '../../config';
+
+const Menu = ({ areDishesLoading, country, dishes, dispatch, isVegetarian }) => (
+  <div>
+    <h2>Dishes by country:</h2>
+    <ul>
+      { countries.map(( c, i ) => (
+        <li key={ i }>
+          <Link
+            style={{
+              fontWeight: c === country ? 'bold' : undefined,
+              textTransform: 'capitalize',
+            }}
+            to={[ 'menu', c, { isVegetarian }]}
+          >
+            { c }
+          </Link>
+        </li>
+      ))}
+    </ul>
+    <form
+      action={ getLocation([ 'menu', country ]).url }
+      method="GET"
+    >
+      <label htmlFor="isVegetarian">
+        <input
+          checked={ isVegetarian }
+          defaultChecked={ isVegetarian }
+          defaultValue="true"
+          id="isVegetarian"
+          onChange={ e => {
+            dispatch(
+              changePageTo([ 'menu', country, { isVegetarian: e.target.checked }])
+            );
+          }}
+          name="isVegetarian"
+          type="checkbox"
+        />
+        Only show vegetarian dishes
+      </label>
+      <button type="submit">
+        Update
+      </button>
+    </form>
+    <h2>Dishes:</h2>
+    { areDishesLoading ? <p>loading ...</p> : (
+      <ul>
+      { dishes.map(({ name }, i ) => (
+        <li key={ i }>
+          <h3>{ name }</h3>
+        </li>
+      ))}
+      </ul>
+    )}
+  </div>
+);
+
+export default Menu;

examples/real-world/common/components/Menu.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Link } from '../../../../../src';
+
+const NotFound = () => (
+  <div>
+    <h1>Not found</h1>
+    <Link to="/menu">
+      Please go to the <strong>menu page</strong>
+    </Link>
+  </div>
+);
+
+export default NotFound;