Rewrite

Author: gaearon

README.md

@@ -16,7 +16,6 @@ Read **[The Evolution of Flux Frameworks](https://medium.com/@dan_abramov/the-ev
 * A hook for the future devtools to "commit" a state, and replay actions on top of it during hot reload.
 * No `createAction`, `createStores`, `wrapThisStuff`. Your stuff is your stuff.
 * I don't mind action constants. Seriously.
-* Embrace decorators for React components.
 * Keep Flux lingo. No cursors or observables in core.
 * Have I mentioned hot reloading yet?
 
@@ -114,18 +113,21 @@ export default function counterStore(state = initialState, action) {
 
 ### Components
 
-#### Observing a single Store
+#### Dumb Components
 
 ```js
-// We're gonna need some decorators
-import React from 'react';
-import { observes } from 'redux';
+// The dumb component receives everything using props:
+import React, { PropTypes } from 'react';
 
-// Gonna subscribe it
-@observes('counterStore')
 export default class Counter {
+  static propTypes = {
+    counter: PropTypes.number.isRequired,
+    increment: PropTypes.func.isRequired,
+    decrement: PropTypes.func.isRequired
+  };
+
   render() {
-    const { counter } = this.props; // injected by @observes
+    const { counter } = this.props;
     return (
       <p>
         Clicked: {counter} times
@@ -135,96 +137,40 @@ export default class Counter {
 }
 ```
 
-#### Observing many Stores
+#### Smart Components
 
 ```js
-// We're gonna need some decorators
-import React from 'react';
-import { observes } from 'redux';
-
-// With multiple stores, you might want to specify a prop mapper as last argument.
-// You can also access `props` inside the prop mapper.
-@observes('counterStore', 'todoStore', (state, props) => ({
-  counter: state.counterStore.counter,
-  todos: state.todoStore.todos
-}))
-export default class TodosWithCounter {
-  /* ... */
-}
-```
+// The smart component may inject actions
+// and observe stores using <Container />:
 
-#### Performing a single Action
+import React, { Component } from 'react';
+import { Root, Container } from 'redux';
+import { increment, decrement } from './actions/CounterActions';
+import counterStore from './stores/counterStore';
+import Counter from './Counter';
 
-```js
-// We're gonna need some decorators
-import React from 'react';
-import { performs } from 'redux';
-
-// Gonna inject it
-@performs('increment')
-export default class IncrementButton {
+export default class CounterContainer {
   render() {
-    const { increment } = this.props; // injected by @performs
+    // stores can be a single store or an array.
+    // actions can only be a string -> function map.
+    // props passed to children will combine these actions and state.
     return (
-      <button onClick={increment}>+</button>
+      <Container stores={counterStore}
+                 actions={{ increment, decrement }}>
+        {props => <Counter {...props} />}
+      </Container>
     );
   }
 }
 ```
 
-#### Performing many Actions
+#### The root component
 
 ```js
-// We're gonna need some decorators
 import React from 'react';
-import { performs } from 'redux';
-
-// With multiple actions, you might want to specify a prop mapper as last argument.
-// You can also access `props` inside the prop mapper.
-@performs('increment', 'decrement', (actions, props) => ({
-  increment: props.invert ? actions.decrement : actions.increment,
-  decrement: props.invert ? actions.increment : actions.decrement
-}))
-export default class IncrementButton {
-  /* .... */
-}
-```
-
-### Dispatcher
+import { Root } from 'redux';
 
-#### Creating a hot-reloadable dispatcher
-
-```js
-import * as stores from './stores/index';
-import * as actions from './actions/index';
-import { createDispatcher } from 'redux';
-
-// Prefer to use existing dispatcher
-const dispatcher =
-  module.hot && module.hot.data && module.hot.data.dispatcher ||
-  createDispatcher();
-
-// Pass (potentially hot-reloaded) stores and actions
-dispatcher.receive(stores, actions);
-
-// Store the dispatcher for the next hot reload
-if (module.hot) {
-  module.hot.dispose(data => {
-    data.dispatcher = dispatcher;
-  });
-}
-
-export default dispatcher;
-```
-
-#### Attaching the dispatcher to the root component
-
-```js
-import React from 'react';
-import { provides } from 'redux';
-import dispatcher from './dispatcher';
-
-@provides(dispatcher)
+@Root
 export default class App {
   /* ... */
 }
@@ -238,10 +184,6 @@ export default class App {
 * http://gaearon.github.io/react-hot-loader/
 * those `module.hot` lines in the dispatcher example above
 
-### But you're using strings for injecting actions and store state!
-
-I'm not super happy about strings. If you find a better way, let me know and file an issue with your suggestions.
-
 ### Can I use this in production?
 
 I wouldn't. Many use cases are not be considered yet. If you find some use cases this lib can't handle yet, please file an issue.

examples/counter/App.js

@@ -1,13 +1,17 @@
 import React, { Component } from 'react';
+import { Root, Container } from 'redux';
+import { increment, decrement } from './actions/CounterActions';
+import counterStore from './stores/counterStore';
 import Counter from './Counter';
-import { provides } from 'redux';
-import dispatcher from './dispatcher';
 
-@provides(dispatcher)
+@Root
 export default class App extends Component {
   render() {
     return (
-      <Counter />
+      <Container stores={counterStore}
+                 actions={{ increment, decrement }}>
+        {props => <Counter {...props} />}
+      </Container>
     );
   }
 }

examples/counter/Counter.js

@@ -1,14 +1,17 @@
-import React from 'react';
-import { performs, observes } from 'redux';
+import React, { PropTypes } from 'react';
 
-@performs('increment', 'decrement')
-@observes('counterStore')
 export default class Counter {
+  static propTypes = {
+    increment: PropTypes.func.isRequired,
+    decrement: PropTypes.func.isRequired,
+    counter: PropTypes.number.isRequired
+  };
+
   render() {
-    const { increment, decrement } = this.props;
+    const { increment, decrement, counter } = this.props;
     return (
       <p>
-        Clicked: {this.props.counter} times
+        Clicked: {counter} times
         {' '}
         <button onClick={() => increment()}>+</button>
         {' '}

examples/counter/actions/index.js

@@ -1,17 +1,23 @@
 import React from 'react';
 import Header from './Header';
 import Body from './Body';
-import { provides } from 'redux';
-import dispatcher from './dispatcher';
+import { Root, Container } from 'redux';
+import { todoStore } from './stores/index';
+import { addTodo } from './actions/index';
 
-@provides(dispatcher)
+@Root
 export default class App {
   render() {
     return (
-      <div>
-        <Header />
-        <Body />
-      </div>
+      <Container stores={todoStore}
+                 actions={{ addTodo }}>
+        {props =>
+          <div>
+            <Header addTodo={props.addTodo} />
+            <Body todos={props.todos} />
+          </div>
+        }
+      </Container>
     );
   }
 }

examples/counter/dispatcher.js

@@ -1,7 +1,5 @@
 import React from 'react';
-import { observes } from 'redux';
 
-@observes('todoStore')
 export default class Body {
   render() {
     return (

examples/counter/stores/index.js

@@ -1,7 +1,5 @@
 import React from 'react';
-import { performs } from 'redux';
 
-@performs('addTodo')
 export default class Header {
   render() {
     return (

examples/todo/App.js

@@ -0,0 +1,73 @@
+import { Component, PropTypes } from 'react';
+import mapValues from 'lodash/object/mapValues';
+import identity from 'lodash/utility/identity';
+
+export default class ReduxContainer extends Component {
+  static contextTypes = {
+    wrapActionCreator: PropTypes.func.isRequired,
+    observeStores: PropTypes.func.isRequired
+  };
+
+  static propTypes = {
+    children: PropTypes.func.isRequired,
+    actions: PropTypes.object.isRequired,
+    stores: PropTypes.oneOfType([
+      PropTypes.func.isRequired,
+      PropTypes.arrayOf(PropTypes.func.isRequired).isRequired,
+      PropTypes.object.isRequired
+    ]).isRequired
+  }
+
+  static defaultProps = {
+    stores: [],
+    actions: {}
+  };
+
+  constructor(props, context) {
+    super(props, context);
+    this.handleChange = this.handleChange.bind(this);
+    this.update(props);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.update(nextProps);
+  }
+
+  componentWillUnmount() {
+    this.unsubscribe();
+  }
+
+  update(props) {
+    this.actions = mapValues(props.actions, this.context.wrapActionCreator);
+    if (this.unsubscribe) {
+      this.unsubscribe();
+    }
+
+    let stores = props.stores;
+    let mapState = identity;
+    if (typeof props.stores === 'function') {
+      const store = props.stores;
+      stores = [store];
+      mapState = state => state[store.name];
+    }
+
+    this.mapState = mapState;
+    this.unsubscribe = this.context.observeStores(stores, this.handleChange);
+  }
+
+  handleChange(stateFromStores) {
+    const nextState = this.mapState(stateFromStores);
+    if (this.state) {
+      this.setState(nextState);
+    } else {
+      this.state = nextState;
+    }
+  }
+
+  render() {
+    return this.props.children({
+      ...this.actions,
+      ...this.state
+    });
+  }
+}

examples/todo/Body.js

@@ -0,0 +1,27 @@
+import React, { Component, PropTypes } from 'react';
+import createDispatcher from './createDispatcher';
+
+export default function root(DecoratedComponent) {
+  return class ReduxRoot extends Component {
+    static childContextTypes = {
+      observeStores: PropTypes.func.isRequired,
+      wrapActionCreator: PropTypes.func.isRequired
+    };
+
+    getChildContext() {
+      return {
+        observeStores: this.dispatcher.observeStores,
+        wrapActionCreator: this.dispatcher.wrapActionCreator
+      };
+    }
+
+    constructor(props, context) {
+      super(props, context);
+      this.dispatcher = createDispatcher();
+    }
+
+    render() {
+      return <DecoratedComponent {...this.props} />;
+    }
+  };
+}