Way simpler connect API

Author: gaearon

examples/containers/CounterApp.js

@@ -1,18 +1,17 @@
 import React from 'react';
-import { connect } from 'redux';
+import { connect, bindActions } from 'redux';
 import Counter from '../components/Counter';
 import * as CounterActions from '../actions/CounterActions';
 
-@connect({
-  actions: CounterActions,
-  select: state => ({
-    counter: state.counter
-  })
-})
+@connect(state => ({
+  counter: state.counter
+}))
 export default class CounterApp {
   render() {
+    const { counter, dispatcher } = this.props;
     return (
-      <Counter {...this.props} />
+      <Counter counter={counter}
+               {...bindActions(CounterActions, dispatcher)} />
     );
   }
 }

examples/containers/TodoApp.js

@@ -1,24 +1,24 @@
 import React from 'react';
-import { Connector } from 'redux';
+import { bindActions, Connector } from 'redux';
 import AddTodo from '../components/AddTodo';
 import TodoList from '../components/TodoList';
 import * as TodoActions from '../actions/TodoActions';
 
 export default class TodoApp {
   render() {
     return (
-      <Connector actions={TodoActions}
-                 select={state => state.todos}>
+      <Connector select={state => ({ todos: state.todos })}>
         {this.renderChild}
       </Connector>
     );
   }
 
-  renderChild({ state, actions }) {
+  renderChild({ todos, dispatcher }) {
+    const actions = bindActions(TodoActions, dispatcher);
     return (
       <div>
         <AddTodo {...actions} />
-        <TodoList todos={state} {...actions} />
+        <TodoList todos={todos} {...actions} />
       </div>
     );
   }

src/Dispatcher.js

@@ -26,6 +26,14 @@ export default class Dispatcher {
     this.setAtom(nextAtom);
   }
 
+  perform(actionCreator, ...args) {
+    const action = actionCreator(...args);
+
+    return typeof action === 'function'
+      ? action(this.dispatch, this.atom)
+      : this.dispatch(action);
+  }
+
   setAtom(atom) {
     this.atom = atom;
     this.emitChange();

src/components/Connector.js

@@ -1,6 +1,5 @@
 import { Component, PropTypes } from 'react';
 import identity from 'lodash/utility/identity';
-import mapValues from 'lodash/object/mapValues';
 import shallowEqual from '../utils/shallowEqual';
 
 export default class Connector extends Component {
@@ -10,14 +9,10 @@ export default class Connector extends Component {
 
   static propTypes = {
     children: PropTypes.func.isRequired,
-    select: PropTypes.func.isRequired,
-    actions: PropTypes.objectOf(
-      PropTypes.func.isRequired
-    ).isRequired
+    select: PropTypes.func.isRequired
   };
 
   static defaultProps = {
-    actions: {},
     select: identity
   };
 
@@ -48,15 +43,6 @@ export default class Connector extends Component {
     this.unsubscribe();
   }
 
-  performAction(actionCreator, ...args) {
-    const { dispatch, atom } = this.context.redux;
-    const payload = actionCreator(...args);
-
-    return typeof payload === 'function'
-      ? payload(dispatch, atom)
-      : dispatch(payload);
-  }
-
   handleChange(atom) {
     const slice = this.props.select(atom);
     if (this.state) {
@@ -67,13 +53,13 @@ export default class Connector extends Component {
   }
 
   render() {
-    const { children, actions: _actions } = this.props;
-    const { slice: state } = this.state;
-
-    const actions = mapValues(_actions, actionCreator =>
-      this.performAction.bind(this, actionCreator)
-    );
+    const { children } = this.props;
+    const { slice } = this.state;
+    const { redux } = this.context;
 
-    return children({ state, actions });
+    return children({
+      dispatcher: redux,
+      ...slice
+    });
   }
 }

src/components/Provider.js

@@ -33,6 +33,10 @@ export default class Provider {
     return this.props.dispatcher.dispatch(action);
   }
 
+  perform(actionCreator, ...args) {
+    return this.props.dispatcher.perform(actionCreator, ...args);
+  }
+
   render() {
     const { children } = this.props;
     return children();

src/components/connect.js

@@ -3,14 +3,7 @@ import Connector from './Connector';
 import getDisplayName from '../utils/getDisplayName';
 import shallowEqualScalar from '../utils/shallowEqualScalar';
 
-function mergeAll({ props, state, actions }) {
-  return { ...props, ...state, ...actions };
-}
-
-export default function connect(
-  { actions: actionsToInject, select },
-  getChildProps = mergeAll
-) {
+export default function connect(select) {
   return DecoratedComponent => class ConnectorDecorator {
     static displayName = `Connector(${getDisplayName(DecoratedComponent)})`;
 
@@ -24,18 +17,15 @@ export default function connect(
 
     render() {
       return (
-        <Connector actions={actionsToInject}
-                  select={select}>
+        <Connector select={select}>
           {this.renderChild}
         </Connector>
       );
     }
 
-    renderChild({ state, actions }) {
+    renderChild(state) {
       const { props } = this;
-      const childProps = getChildProps({ props, state, actions });
-
-      return <DecoratedComponent {...childProps} />;
+      return <DecoratedComponent {...props} {...state} />;
     }
   };
 }

src/index.js

@@ -11,3 +11,4 @@ export connect from './components/connect';
 
 // Utilities
 export composeStores from './utils/composeStores';
+export bindActions from './utils/bindActions';

src/utils/bindActions.js

@@ -0,0 +1,7 @@
+import mapValues from 'lodash/object/mapValues';
+
+export default function bindActions(actionCreators, dispatcher) {
+  return mapValues(actionCreators, actionCreator =>
+    (...args) => dispatcher.perform(actionCreator, ...args)
+  );
+}