Extract React-independent Dispatcher

Author: gaearon

examples/containers/App.js

@@ -1,20 +1,22 @@
 import React from 'react';
-import { Dispatcher, composeStores } from 'redux';
+import { Dispatcher, Provider, composeStores } from 'redux';
 import CounterApp from './CounterApp';
 import TodoApp from './TodoApp';
 import * as stores from '../stores/index';
 
+const dispatcher = new Dispatcher(composeStores(stores));
+
 export default class App {
   render() {
     return (
-      <Dispatcher store={composeStores(stores)}>
+      <Provider dispatcher={dispatcher}>
         {() =>
           <div>
             <CounterApp />
             <TodoApp />
           </div>
         }
-      </Dispatcher>
+      </Provider>
     );
   }
 }

examples/containers/CounterApp.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { inject } from 'redux';
+import { connect } from 'redux';
 import Counter from '../components/Counter';
 import * as CounterActions from '../actions/CounterActions';
 
-@inject({
+@connect({
   actions: CounterActions,
   select: state => ({
     counter: state.counter

examples/containers/TodoApp.js

@@ -1,16 +1,16 @@
 import React from 'react';
-import { Injector } from 'redux';
+import { 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 (
-      <Injector actions={TodoActions}
-                select={state => state.todos}>
+      <Connector actions={TodoActions}
+                 select={state => state.todos}>
         {this.renderChild}
-      </Injector>
+      </Connector>
     );
   }
 

src/Dispatcher.js

@@ -1,34 +1,23 @@
-import { PropTypes } from 'react';
-
 function dispatch(store, atom, action) {
   return store(atom, action);
 }
 
 export default class Dispatcher {
-  static propTypes = {
-    store: PropTypes.func.isRequired,
-    children: PropTypes.func.isRequired
-  };
-
-  static childContextTypes = {
-    redux: PropTypes.object.isRequired
-  };
-
-  getChildContext() {
-    return { redux: this };
-  }
-
-  constructor(props) {
+  constructor(store, atom) {
+    this.store = store;
+    this.atom = atom;
     this.subscriptions = [];
-    this.emitChange = this.emitChange.bind(this);
-    this.dispatch = this.dispatch.bind(this);
+    this.dispatch({});
+  }
 
-    const initialAtom = dispatch(props.store, undefined, {});
-    this.setAtom(initialAtom);
+  receive(dispatcher) {
+    this.atom = dispatcher.atom;
+    this.subscriptions = dispatcher.subscriptions;
+    this.dispatch({});
   }
 
   dispatch(action) {
-    const nextAtom = dispatch(this.props.store, this.atom, action);
+    const nextAtom = dispatch(this.store, this.atom, action);
     this.setAtom(nextAtom);
   }
 
@@ -52,8 +41,8 @@ export default class Dispatcher {
     subscriptions.forEach(listener => listener(atom));
   }
 
-  render() {
-    const { children } = this.props;
-    return children();
+  dispose() {
+    this.atom = undefined;
+    this.subscriptions = [];
   }
 }

src/addons/dispatch.js

@@ -1,9 +1,9 @@
 import { Component, PropTypes } from 'react';
 import identity from 'lodash/utility/identity';
 import mapValues from 'lodash/object/mapValues';
-import shallowEqual from './utils/shallowEqual';
+import shallowEqual from '../utils/shallowEqual';
 
-export default class Injector extends Component {
+export default class Connector extends Component {
   static contextTypes = {
     redux: PropTypes.object.isRequired
   };

src/Injector.js renamed to src/components/Connector.js

@@ -0,0 +1,43 @@
+import { PropTypes } from 'react';
+import Dispatcher from '../Dispatcher';
+
+export default class Provider {
+  static propTypes = {
+    dispatcher: PropTypes.instanceOf(Dispatcher).isRequired,
+    children: PropTypes.func.isRequired
+  };
+
+  static childContextTypes = {
+    redux: PropTypes.instanceOf(Provider).isRequired
+  };
+
+  getChildContext() {
+    return { redux: this };
+  }
+
+  constructor() {
+    this.dispatch = this.dispatch.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    nextProps.dispatcher.receive(this.props.dispatcher);
+    this.props.dispatcher.dispose();
+  }
+
+  componentWillUnmount() {
+    this.props.dispatcher.dispose();
+  }
+
+  subscribe(listener) {
+    return this.props.dispatcher.subscribe(listener);
+  }
+
+  dispatch(action) {
+    return this.props.dispatcher.dispatch(action);
+  }
+
+  render() {
+    const { children } = this.props;
+    return children();
+  }
+}

src/components/Provider.js

@@ -1,18 +1,18 @@
 import React from 'react';
-import Injector from '../Injector';
+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 inject(
+export default function connect(
   { actions: actionsToInject, select },
   getChildProps = mergeAll
 ) {
-  return DecoratedComponent => class InjectorDecorator {
-    static displayName = `Injector(${getDisplayName(DecoratedComponent)})`;
+  return DecoratedComponent => class ConnectorDecorator {
+    static displayName = `Connector(${getDisplayName(DecoratedComponent)})`;
 
     shouldComponentUpdate(nextProps) {
       return !shallowEqualScalar(this.props, nextProps);
@@ -24,10 +24,10 @@ export default function inject(
 
     render() {
       return (
-        <Injector actions={actionsToInject}
+        <Connector actions={actionsToInject}
                   select={select}>
           {this.renderChild}
-        </Injector>
+        </Connector>
       );
     }
 

src/addons/inject.js renamed to src/components/connect.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Provider from './Provider';
+import getDisplayName from '../utils/getDisplayName';
+
+export default function provide(store) {
+  return DecoratedComponent => class ProviderDecorator {
+    static displayName = `Provider(${getDisplayName(DecoratedComponent)})`;
+
+    render() {
+      return (
+        <Provider store={store}>
+          {props => <DecoratedComponent {...this.props} {...props} />}
+        </Provider>
+      );
+    }
+  };
+}

src/components/provide.js

@@ -1,10 +1,13 @@
-// Wrapper components
+// Core
 export Dispatcher from './Dispatcher';
-export Injector from './Injector';
+
+// Wrapper components
+export Provider from './components/Provider';
+export Connector from './components/Connector';
 
 // Higher-order components (decorators)
-export dispatch from './addons/dispatch';
-export inject from './addons/inject';
+export provide from './components/provide';
+export connect from './components/connect';
 
 // Utilities
-export composeStores from './addons/composeStores';
+export composeStores from './utils/composeStores';