New interface for @asyncConnect decorator,

router in decorator params,
ability to use groups for props

Author: rodik

modules/ReduxAsyncConnect.js

@@ -35,16 +35,34 @@ function filterAndFlattenComponents(components) {
   return flattened;
 }
 
-function asyncConnectPromises(components, params, store, helpers) {
-  return components.map(Component => Component.reduxAsyncConnect(params, store, helpers))
-    .filter(result => result && result.then instanceof Function);
+function loadAsyncConnect({components, filter = () => true, ...rest}) {
+  let async = false;
+  const promise = Promise.all(filterAndFlattenComponents(components).map(Component => {
+    const asyncItems = Component.reduxAsyncConnect;
+
+    return Promise.all(asyncItems.reduce((itemsResults, item) => {
+      if (filter(item, Component)) {
+        let promiseOrResult = item.promise(rest);
+        if (promiseOrResult && promiseOrResult.then instanceof Function) {
+          async = true;
+          promiseOrResult = promiseOrResult.catch(error => ({error}));
+        }
+        return [...itemsResults, promiseOrResult];
+      } else {
+        return itemsResults;
+      }
+    }, [])).then(results => {
+      return asyncItems.reduce((result, item, i) => ({...result, [item.key]: results[i]}), {});
+    });
+  }));
+
+  return {promise, async};
 }
 
-export function loadOnServer({ components, params }, store, helpers) {
-  return Promise.all(asyncConnectPromises(filterAndFlattenComponents(components), params, store, helpers))
-    .catch(error => console.error('reduxAsyncConnect server promise error: ', error)).then(() => {
-      store.dispatch(endGlobalLoad());
-    });
+export function loadOnServer(args) {
+  return loadAsyncConnect(args).promise.then(() => {
+    args.store.dispatch(endGlobalLoad());
+  });
 }
 
 let loadDataCounter = 0;
@@ -98,26 +116,24 @@ class ReduxAsyncConnect extends React.Component {
   }
 
   loadAsyncData(props) {
-    const { components, params, helpers } = props;
     const store = this.context.store;
-    const promises = asyncConnectPromises(filterAndFlattenComponents(components), params, store, helpers);
+    const loadResult = loadAsyncConnect({...props, store});
 
     loadDataCounter++;
 
-    if (promises.length) {
+    if (loadResult.async) {
       this.props.beginGlobalLoad();
       (loadDataCounterOriginal => {
-        Promise.all(promises).catch(error => console.error('reduxAsyncConnect server promise error: ', error))
-            .then(() => {
-              // We need to change propsToShow only if loadAsyncData that called this promise
-              // is the last invocation of loadAsyncData method. Otherwise we can face situation
-              // when user is changing route several times and we finally show him route that has
-              // loaded props last time and not the last called route
-              if (loadDataCounter === loadDataCounterOriginal) {
-                this.setState({propsToShow: props});
-              }
-              this.props.endGlobalLoad();
-            });
+        loadResult.promise.then(() => {
+          // We need to change propsToShow only if loadAsyncData that called this promise
+          // is the last invocation of loadAsyncData method. Otherwise we can face situation
+          // when user is changing route several times and we finally show him route that has
+          // loaded props last time and not the last called route
+          if (loadDataCounter === loadDataCounterOriginal) {
+            this.setState({propsToShow: props});
+          }
+          this.props.endGlobalLoad();
+        });
       })(loadDataCounter);
     } else {
       this.setState({propsToShow: props});

modules/asyncConnect.js

@@ -8,8 +8,6 @@ export const BEGIN_GLOBAL_LOAD = 'reduxAsyncConnect/BEGIN_GLOBAL_LOAD';
 export const END_GLOBAL_LOAD = 'reduxAsyncConnect/END_GLOBAL_LOAD';
 
 export function reducer(state = {loaded: false}, action = {}) {
-  const stateSlice = state[action.key];
-
   switch (action.type) {
     case BEGIN_GLOBAL_LOAD:
       return {
@@ -19,45 +17,53 @@ export function reducer(state = {loaded: false}, action = {}) {
     case END_GLOBAL_LOAD:
       return {
         ...state,
-
         loaded: true
       };
     case LOAD:
       return {
         ...state,
-        [action.key]: {
-          ...stateSlice,
-          loading: true,
-          loaded: false
+        loadState: {
+          [action.key]: {
+            loading: true,
+            loaded: false
+          }
         }
       };
     case LOAD_SUCCESS:
       return {
         ...state,
-        [action.key]: {
-          ...stateSlice,
-          loading: false,
-          loaded: true,
-          data: action.data
-        }
+        loadState: {
+          [action.key]: {
+            loading: false,
+            loaded: true,
+            error: null
+          }
+        },
+        [action.key]: action.data
       };
     case LOAD_FAIL:
       return {
         ...state,
-        [action.key]: {
-          ...stateSlice,
-          loading: false,
-          loaded: false,
-          error: action.error
-        }
+        loadState: {
+          [action.key]: {
+            loading: false,
+            loaded: false,
+            error: action.error
+          }
+        },
+        [action.key]: null
       };
     case CLEAR:
       return {
         ...state,
-        [action.key]: {
-          loaded: false,
-          loading: false
-        }
+        loadState: {
+          [action.key]: {
+            loading: false,
+            loaded: false,
+            error: null
+          }
+        },
+        [action.key]: null
       };
     default:
       return state;
@@ -102,36 +108,34 @@ function loadFail(key, error) {
   };
 }
 
-function componentLoadCb(mapStateToProps, params, store, helpers) {
-  const dispatch = store.dispatch;
-
-  const promises = Object.keys(mapStateToProps).reduce((result, key) => {
-    let promiseOrResult = mapStateToProps[key](params, {...helpers, store});
-
-    if (promiseOrResult !== undefined) {
-      if (promiseOrResult.then instanceof Function) {
-        dispatch(load(key));
-        promiseOrResult = promiseOrResult
-          .then(nextData => dispatch(loadSuccess(key, nextData)),
-            err => dispatch(loadFail(key, err)));
+function wrapWithDispatch(asyncItems) {
+  return asyncItems.map(item =>
+    item.key ? {...item, promise: (options) => {
+      const {dispatch} = options.store;
+      const promiseOrResult = item.promise(options);
+      if (promiseOrResult !== undefined) {
+        if (promiseOrResult.then instanceof Function) {
+          dispatch(load(item.key));
+          promiseOrResult.then(data => dispatch(loadSuccess(item.key, data)))
+                         .catch(err => dispatch(loadFail(item.key, err)));
+        }
 
-        return [...result, promiseOrResult];
+        dispatch(loadSuccess(item.key, promiseOrResult));
       }
-
-      dispatch(loadSuccess(key, promiseOrResult));
-    }
-    return [...result];
-  }, []);
-
-  return promises.length === 0 ? null : Promise.all(promises);
+      return promiseOrResult;
+    }} : item
+  );
 }
 
-export function asyncConnect(mapStateToProps) {
+export function asyncConnect(asyncItems) {
   return Component => {
-    Component.reduxAsyncConnect = (params, store, helpers) => componentLoadCb(mapStateToProps, params, store, helpers);
+    Component.reduxAsyncConnect = wrapWithDispatch(asyncItems);
 
     const finalMapStateToProps = state => {
-      return Object.keys(mapStateToProps).reduce((result, key) => ({...result, [key]: state.reduxAsyncConnect[key]}), {});
+      return asyncItems.reduce((result, item) =>
+        item.key ? {...result, [item.key]: state.reduxAsyncConnect[item.key]} : result,
+        {}
+      );
     };
 
     return connect(finalMapStateToProps)(Component);