Container -> Injector, @container -> @Inject, Root -> Dispatcher, @root -> @dispatch

Author: gaearon

README.md

@@ -136,10 +136,10 @@ export default class Counter {
 
 ```js
 // The smart component may inject actions
-// and observe stores using <Container />:
+// and observe stores using <Injector />:
 
 import React, { Component } from 'react';
-import { Root, Container } from 'redux';
+import { Injector } from 'redux';
 import * as CounterActions from './actions/CounterActions';
 import counterStore from './stores/counterStore';
 import Counter from './Counter';
@@ -149,11 +149,11 @@ export default class CounterContainer {
     // stores and actions must both be string -> function maps.
     // props passed to children will combine these actions and state.
     return (
-      <Container stores={{ counter: stores.counterStore }}
+      <Injector stores={{ counter: stores.counterStore }}
                  actions={CounterActions}>
         {/* Yes this is a function as a child. Bear with me. */}
         {({ state, actions }) => <Counter {...state} {...actions} />}
-      </Container>
+      </Injector>
     );
   }
 }
@@ -167,10 +167,10 @@ They work exactly the same as the container components, but are lowercase:
 ```js
 import React, { PropTypes } from 'react';
 import * as CounterActions from './actions/CounterActions';
-import { container } from 'redux';
+import { inject } from 'redux';
 import counterStore from './stores/counterStore';
 
-@container({
+@inject({
   actions: CounterActions,
   stores: { counter: counterStore }
 })
@@ -198,13 +198,15 @@ export default class Counter {
 
 #### The root component
 
+Decorate your top-level component with `@dispatch(stores)` (or `<Dispatcher stores={stores}>` inside) to bind it to a Redux dispatcher instance.
+
 ```js
 import React from 'react';
-import { root } from 'redux';
+import { dispatch } from 'redux';
 import * as stores from './stores/index';
 
 // Let it know about all the stores
-@root(stores)
+@dispatch(stores)
 export default class App {
   /* ... */
 }

examples/counter/App.js

@@ -1,17 +1,17 @@
 import React, { Component } from 'react';
-import { root, Container } from 'redux';
+import { dispatch, Injector } from 'redux';
 import { increment, decrement } from './actions/CounterActions';
 import * as stores from './stores/index';
 import Counter from './Counter';
 
-@root(stores)
+@dispatch(stores)
 export default class CounterApp extends Component {
   render() {
     return (
-      <Container stores={{ counter: stores.counterStore }}
-                 actions={{ increment, decrement }}>
+      <Injector stores={{ counter: stores.counterStore }}
+                actions={{ increment, decrement }}>
         {({ state, actions }) => <Counter {...state} {...actions} />}
-      </Container>
+      </Injector>
     );
   }
 }

examples/todo/App.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import Header from './Header';
 import Body from './Body';
-import { root } from 'redux';
+import { dispatch } from 'redux';
 import * as stores from './stores/index';
 
-@root(stores)
+@dispatch(stores)
 export default class TodoApp {
   render() {
     return (

examples/todo/Body.js

@@ -1,8 +1,8 @@
 import React, { PropTypes } from 'react';
-import { container } from 'redux';
+import { inject } from 'redux';
 import { todoStore } from './stores/index';
 
-@container({
+@inject({
   stores: { todos: todoStore }
 })
 export default class Body {

examples/todo/Header.js

@@ -1,8 +1,8 @@
 import React, { PropTypes } from 'react';
-import { container } from 'redux';
+import { inject } from 'redux';
 import { addTodo } from './actions/index';
 
-@container({
+@inject({
   actions: { addTodo }
 })
 export default class Header {

src/Root.js renamed to src/Dispatcher.js

@@ -1,7 +1,7 @@
 import { PropTypes } from 'react';
 import createDispatcher from './createDispatcher';
 
-export default class ReduxRoot {
+export default class ReduxDispatcher {
   static propTypes = {
     stores: PropTypes.object.isRequired,
     children: PropTypes.func.isRequired

src/Container.js renamed to src/Injector.js

@@ -5,7 +5,7 @@ import invariant from 'invariant';
 import isPlainObject from 'lodash/lang/isPlainObject';
 import isFunction from 'lodash/lang/isFunction';
 
-export default class ReduxContainer extends Component {
+export default class ReduxInjector extends Component {
   static contextTypes = {
     redux: PropTypes.object.isRequired
   };

src/addons/dispatch.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Dispatcher from '../Dispatcher';
+import getDisplayName from './getDisplayName';
+
+export default function dispatch(stores) {
+  return DecoratedComponent => class ReduxDispatcherDecorator {
+    static displayName = `ReduxDispatcher(${getDisplayName(DecoratedComponent)})`;
+
+    render() {
+      return (
+        <Dispatcher stores={stores}>
+          {props => <DecoratedComponent {...this.props} {...props} />}
+        </Dispatcher>
+      );
+    }
+  };
+}

src/addons/container.js renamed to src/addons/inject.js

@@ -1,28 +1,28 @@
 import React from 'react';
-import Container from '../Container';
+import Injector from '../Injector';
 import getDisplayName from './getDisplayName';
 
 function mergePropsStateAndActions({ props, state, actions }) {
   return { ...props, ...state, ...actions };
 }
 
-export default function container(
+export default function inject(
   { actions: actionsToInject, stores: storesToConnect },
   getChildProps = mergePropsStateAndActions
 ) {
-  return DecoratedComponent => class ReduxContainerDecorator {
-    static displayName = `ReduxContainer(${getDisplayName(DecoratedComponent)})`;
+  return DecoratedComponent => class ReduxInjectorDecorator {
+    static displayName = `ReduxInjector(${getDisplayName(DecoratedComponent)})`;
 
     constructor() {
       this.renderChild = this.renderChild.bind(this);
     }
 
     render() {
       return (
-        <Container actions={actionsToInject}
-                   stores={storesToConnect}>
+        <Injector actions={actionsToInject}
+                  stores={storesToConnect}>
           {this.renderChild}
-        </Container>
+        </Injector>
       );
     }