Make function name insignificant by binding Stores early. Fixes #16

Author: gaearon

README.md

@@ -204,9 +204,11 @@ export default class Counter {
 
 ```js
 import React from 'react';
-import { Root } from 'redux';
+import { root } from 'redux';
+import * from './stores/index';
 
-@Root
+// Let it know about all the stores
+@root(stores)
 export default class App {
   /* ... */
 }

examples/counter/App.js

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

examples/counter/stores/index.js

@@ -0,0 +1 @@
+export counterStore from './counterStore';

examples/todo/App.js

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

src/Root.js

@@ -3,24 +3,28 @@ import createDispatcher from './createDispatcher';
 
 export default class ReduxRoot {
   static propTypes = {
+    stores: PropTypes.object.isRequired,
     children: PropTypes.func.isRequired
   };
 
   static childContextTypes = {
     redux: PropTypes.object.isRequired
   };
 
-  constructor() {
+  constructor(props) {
     this.dispatcher = createDispatcher();
+    this.dispatcher.receiveStores(props.stores);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.dispatcher.receiveStores(nextProps.stores);
   }
 
   getChildContext() {
     return { redux: this.dispatcher };
   }
 
   render() {
-    return this.props.children({
-      ...this.props
-    });
+    return this.props.children();
   }
 }

src/addons/root.js

@@ -2,13 +2,13 @@ import React from 'react';
 import Root from '../Root';
 import getDisplayName from './getDisplayName';
 
-export default function root(DecoratedComponent) {
-  return class ReduxRootDecorator {
+export default function root(stores) {
+  return DecoratedComponent => class ReduxRootDecorator {
     static displayName = `ReduxRoot(${getDisplayName(DecoratedComponent)})`;
 
     render() {
       return (
-        <Root>
+        <Root stores={stores}>
           {props => <DecoratedComponent {...this.props} {...props} />}
         </Root>
       );

src/createDispatcher.js

@@ -7,8 +7,9 @@ const BOOTSTRAP_STORE = {
 };
 
 export default function createDispatcher() {
-  let observers = {};
-  let stores = {};
+  const observers = {};
+  const stores = {};
+  const storeKeys = new Map();
   let currentState = {};
 
   // To compute the next state, combine the next states of every store
@@ -71,19 +72,22 @@ export default function createDispatcher() {
   }
 
   // Merge the newly added stores
-  function mergeStores(newStores) {
-    newStores.forEach(newStore => {
-      const key = newStore.name;
-      stores[key] = newStore;
+  function receiveStores(nextStores) {
+    Object.keys(nextStores).forEach(key => {
+      stores[key] = nextStores[key];
       observers[key] = observers[key] || [];
+      storeKeys[stores[key]] = key;
     });
     dispatch(BOOTSTRAP_STORE);
   }
 
   // Provide subscription and unsubscription
   function observeStores(observedStores, onChange) {
-    mergeStores(observedStores);
-    const observedKeys = observedStores.map(s => s.name);
+    const observedKeys = observedStores.map(store => {
+      const key = storeKeys[store];
+      invariant(key, 'This store is not registered with the Redux root: %s', store);
+      return key;
+    });
 
     // Emit the state update
     function handleChange() {
@@ -123,6 +127,7 @@ export default function createDispatcher() {
 
   return {
     wrapActionCreator,
-    observeStores
+    observeStores,
+    receiveStores
   };
 }