Tweak the decorator API to my liking

Author: gaearon

examples/counter/App.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import Counter from './Counter';
-import flux from 'redux/flux';
+import { provides } from 'redux';
 import dispatcher from './dispatcher';
 
-@flux(dispatcher)
+@provides(dispatcher)
 export default class App extends Component {
   render() {
     return (

examples/counter/Counter.js

@@ -1,17 +1,14 @@
 import React from 'react';
-import connect from 'redux/connect';
+import { performs, observes } from 'redux';
 
-@connect({
-  CounterStore: ({ counter }) => ({
-    value: counter
-  })
-})
+@performs('increment', 'decrement')
+@observes('CounterStore')
 export default class Counter {
   render() {
-    const { increment, decrement } = this.props.actions;
+    const { increment, decrement } = this.props;
     return (
       <p>
-        Clicked: {this.props.value} times
+        Clicked: {this.props.counter} times
         {' '}
         <button onClick={() => increment()}>+</button>
         {' '}

examples/counter/dispatcher.js

@@ -1,6 +1,6 @@
 import * as stores from './stores/index';
 import * as actions from './actions/index';
-import createDispatcher from 'redux/createDispatcher';
+import { createDispatcher } from 'redux';
 
 const dispatcher =
   module.hot && module.hot.data && module.hot.data.dispatcher ||

examples/todo/App.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import Header from './Header';
 import Body from './Body';
-import flux from 'redux/flux';
+import { provides } from 'redux';
 import dispatcher from './dispatcher';
 
-@flux(dispatcher)
+@provides(dispatcher)
 export default class App {
   render() {
     return (

examples/todo/Body.js

@@ -1,9 +1,7 @@
 import React from 'react';
-import connect from 'redux/connect';
+import { observes } from 'redux';
 
-@connect({
-  TodoStore: ({ todos }) => ({ todos })
-})
+@observes('TodoStore')
 export default class Body {
   render() {
     return (

examples/todo/Header.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import connect from 'redux/connect';
+import { performs } from 'redux';
 
-@connect()
+@performs('addTodo')
 export default class Header {
   render() {
     return (
@@ -12,6 +12,6 @@ export default class Header {
   }
 
   addTodo() {
-    this.props.actions.addTodo('some text');
+    this.props.addTodo('some text');
   }
 }

examples/todo/dispatcher.js

@@ -1,6 +1,6 @@
 import * as stores from './stores/index';
 import * as actions from './actions/index';
-import createDispatcher from 'redux/createDispatcher';
+import { createDispatcher } from 'redux';
 
 const dispatcher =
   module.hot && module.hot.data && module.hot.data.dispatcher ||

src/index.js

@@ -0,0 +1,4 @@
+export createDispatcher from './createDispatcher';
+export observes from './observes';
+export performs from './performs';
+export provides from './provides';

src/connect.js renamed to src/observes.js

@@ -1,35 +1,18 @@
 import React, { Component, PropTypes } from 'react';
-import isPlainObject from 'lodash/lang/isPlainObject';
+import pick from 'lodash/object/pick';
+import identity from 'lodash/utility/identity';
 
 const contextTypes = {
-  observeStores: PropTypes.func.isRequired,
-  getActions: PropTypes.func.isRequired
+  observeStores: PropTypes.func.isRequired
 };
 
-function extractShorthandArguments(storeMap) {
-  const storeKeys = Object.keys(storeMap);
+export default function connect(...storeKeys) {
+  let mapState = identity;
 
-  function mapState(stateFromStores, props) {
-    let state = {};
-    storeKeys.forEach(key => {
-      const stateFromStore = stateFromStores[key];
-      const mapStoreState = storeMap[key];
-      state = { ...state, ...mapStoreState(stateFromStore, props) };
-    });
-    return state;
-  }
-
-  return {
-    storeKeys,
-    mapState
-  };
-}
-
-export default function connect(storeKeys = [], mapState = () => {}) {
-  if (isPlainObject(storeKeys)) {
-    ({ storeKeys, mapState } = extractShorthandArguments(storeKeys));
-  } else if (!Array.isArray(storeKeys)) {
-    throw new Error('Pass either a string array or an object as the first argument.');
+  // Last argument may be a custom mapState function
+  const lastIndex = storeKeys.length - 1;
+  if (typeof storeKeys[lastIndex] === 'function') {
+    [mapState] = storeKeys.splice(lastIndex, 1);
   }
 
   return function (DecoratedComponent) {
@@ -39,19 +22,17 @@ export default function connect(storeKeys = [], mapState = () => {}) {
       'Component';
 
     return class extends Component {
-      static displayName = `ReduxConnect(${wrappedDisplayName})`;
+      static displayName = `ReduxObserves(${wrappedDisplayName})`;
       static contextTypes = contextTypes;
 
       constructor(props, context) {
         super(props, context);
         this.handleChange = this.handleChange.bind(this);
-
         this.unobserve = this.context.observeStores(storeKeys, this.handleChange);
-        this.actions = this.context.getActions();
       }
 
       handleChange(stateFromStores) {
-        this.currentStateFromStores = stateFromStores;
+        this.currentStateFromStores = pick(stateFromStores, storeKeys);
         this.updateState(stateFromStores, this.props);
       }
 
@@ -60,6 +41,11 @@ export default function connect(storeKeys = [], mapState = () => {}) {
       }
 
       updateState(stateFromStores, props) {
+        if (storeKeys.length === 1) {
+          // Just give it the particular store state for convenience
+          stateFromStores = stateFromStores[storeKeys[0]];
+        }
+
         const state = mapState(stateFromStores, props);
         if (this.state) {
           this.setState(state);
@@ -75,8 +61,7 @@ export default function connect(storeKeys = [], mapState = () => {}) {
       render() {
         return (
           <DecoratedComponent {...this.props}
-                              {...this.state}
-                              actions={this.actions} />
+                              {...this.state} />
         );
       }
     };

src/performs.js

@@ -0,0 +1,40 @@
+import React, { Component, PropTypes } from 'react';
+import pick from 'lodash/object/pick';
+import identity from 'lodash/utility/identity';
+
+const contextTypes = {
+  getActions: PropTypes.func.isRequired
+};
+
+export default function performs(...actionKeys) {
+  let mapActions = identity;
+
+  // Last argument may be a custom mapState function
+  const lastIndex = actionKeys.length - 1;
+  if (typeof actionKeys[lastIndex] === 'function') {
+    [mapActions] = actionKeys.splice(lastIndex, 1);
+  }
+
+  return function (DecoratedComponent) {
+    const wrappedDisplayName =
+      DecoratedComponent.displayName ||
+      DecoratedComponent.name ||
+      'Component';
+
+    return class extends Component {
+      static displayName = `ReduxPerforms(${wrappedDisplayName})`;
+      static contextTypes = contextTypes;
+
+      constructor(props, context) {
+        super(props, context);
+        this.actions = mapActions(pick(this.context.getActions(), actionKeys));
+      }
+
+      render() {
+        return (
+          <DecoratedComponent {...this.actions} />
+        );
+      }
+    };
+  };
+}

src/flux.js renamed to src/provides.js

@@ -5,15 +5,15 @@ const childContextTypes = {
   getActions: PropTypes.func.isRequired
 };
 
-export default function flux(dispatcher) {
+export default function provides(dispatcher) {
   return function (DecoratedComponent) {
     const wrappedDisplayName =
       DecoratedComponent.displayName ||
       DecoratedComponent.name ||
       'Component';
 
     return class {
-      static displayName = `Redux(${wrappedDisplayName})`;
+      static displayName = `ReduxProvides(${wrappedDisplayName})`;
       static childContextTypes = childContextTypes;
 
       getChildContext() {