Add rest parameter

Author: YoruNoHikage

examples/counter/package.json

@@ -8,6 +8,7 @@
     "react-dom": "^0.14.0",
     "react-redux": "^4.0.0",
     "redux": "^3.0.0",
+    "redux-actions": "^0.9.1",
     "redux-thunk": "^1.0.0"
   },
   "devDependencies": {

examples/counter/src/actions/CounterActions.js

@@ -31,3 +31,11 @@ export function incrementAsync() {
     }, 1000);
   };
 }
+
+export function add(...rest) {
+  const compute = rest.concat([0]).reduce((prev, next) => prev + next);
+  const action = compute < 0 ? decrement() : increment();
+  return dispatch => {
+    Array.apply(null, Array(Math.abs(compute))).forEach(() => dispatch(action));
+  };
+}

examples/counter/src/actions/CounterReduxActions.js

@@ -0,0 +1,4 @@
+import { createAction } from 'redux-actions';
+
+export const increment = createAction('INCREMENT_COUNTER');
+export const decrement = createAction('DECREMENT_COUNTER', payload => payload, ({meta}) => meta);

examples/counter/src/containers/DevTools.js

@@ -6,13 +6,14 @@ import MultipleMonitors from 'redux-devtools-multiple-monitors';
 import Dispatcher from 'redux-devtools-dispatch';
 
 import * as actionCreators from '../actions/CounterActions';
+import * as reduxActionCreators from '../actions/CounterReduxActions';
 
 export default createDevTools(
   <DockMonitor toggleVisibilityKey='ctrl-h'
                changePositionKey='ctrl-q'>
     <MultipleMonitors>
       <LogMonitor />
-      <Dispatcher actionCreators={actionCreators} initEmpty />
+      <Dispatcher actionCreators={{...actionCreators, reduxActions: reduxActionCreators}} initEmpty />
     </MultipleMonitors>
   </DockMonitor>
 );

src/Dispatcher.js

@@ -102,9 +102,16 @@ export default class Dispatcher extends Component {
       let actionCreator = () => ({}), argsToInject = [];
       if(this.state.selectedActionCreator !== 'default') {
         actionCreator = this.getSelectedActionCreator().func;
-        argsToInject = this.state.args.map(
-          (arg) => (new Function('return ' + arg))()
-        );
+
+        const interpretArg = (arg) => (new Function('return ' + arg))()
+        argsToInject = this.state.args.map(interpretArg);
+        const rest = interpretArg(this.refs.restArgs.textContent);
+        if(rest) {
+          if(Array.isArray(rest))
+            argsToInject = argsToInject.concat(...rest);
+          else
+            throw new Error('rest must be an array');
+        }
       } else {
         actionCreator = new Function('return ' + this.refs.action.textContent);
       }
@@ -186,12 +193,19 @@ export default class Dispatcher extends Component {
 
     let fields = <div contentEditable style={contentEditableStyle} ref='action'></div>;
     if(this.state.selectedActionCreator !== 'default') {
+      const fieldStyles = {...styles.label, color: theme.base06};
       fields = this.getSelectedActionCreator().args.map((param, i) => (
         <div key={i} style={{display: 'flex'}}>
-          <span style={{...styles.label, color: theme.base06}}>{param}</span>
-          <div contentEditable style={contentEditableStyle} ref={'arg' + i} onInput={(e) => this.handleArg(e, i)}></div>
+          <span style={fieldStyles}>{param}</span>
+          <div contentEditable style={contentEditableStyle} ref={'arg' + i} onInput={(e) => this.handleArg(e, i)} />
         </div>
       ));
+      fields.push(
+        <div key="action" style={{display: 'flex'}}>
+          <span style={fieldStyles}>rest...</span>
+          <div contentEditable style={contentEditableStyle} ref="restArgs" />
+        </div>
+      );
     }
 
     let error = '';