add connectors prop to Reductor

Description:
- add `connectors` property to a Reductor component that
will allow it to include connectors that cannot be presented
in children tree in generation of full reducer function

Author: akuzko

src/components/Reductor.jsx

@@ -10,11 +10,13 @@ import storeShape from '../utils/storeShape';
 export default class Reductor extends Component {
   static propTypes = {
     createStore: PropTypes.func.isRequired,
+    connectors: PropTypes.arrayOf(PropTypes.func),
     connectorProp: PropTypes.string,
     children: PropTypes.node.isRequired
   };
 
   static defaultProps = {
+    connectors: [],
     connectorProp: 'component'
   };
 
@@ -32,15 +34,15 @@ export default class Reductor extends Component {
     this.store = this.props.createStore(reducer);
   }
 
-  getConnectors(childrenToProcess = this.props.children) {
+  getChildrenConnectors(childrenToProcess = this.props.children) {
     const tmp = Children.map(childrenToProcess, (child) => {
       const connectors = [];
       const { [this.props.connectorProp]: component, children } = (child.props || {});
       if (component && component.$reducer) {
         connectors.push(component);
       }
       if (children) {
-        connectors.push(...this.getConnectors(children));
+        connectors.push(...this.getChildrenConnectors(children));
       }
       // weird thing: for some reason, when array is returned (i.e. return connectors),
       // React abandons all elements in it.
@@ -50,7 +52,8 @@ export default class Reductor extends Component {
   }
 
   getReducer() {
-    const connectors = groupBy(this.getConnectors(), '$namespace');
+    const allConnectors = [...this.props.connectors, ...this.getChildrenConnectors()];
+    const connectors = groupBy(allConnectors, '$namespace');
 
     return function(state = {}, action) {
       const newState = {};

test/components/Reductor.test.js

@@ -25,6 +25,14 @@ describe('<Reductor />', function() {
     }));
   }
 
+  class BazConnector extends Connector {
+    static $connection = TestConnection;
+    static $state = {};
+    static $reducer = BazConnector.reduce('common.baz', (state) => ({
+      $set: (key, value) => ({ ...state, [key]: value })
+    }));
+  }
+
   class MockRoute extends Component {
     static propTypes = {
       komponent: PropTypes.func
@@ -38,7 +46,7 @@ describe('<Reductor />', function() {
 
   beforeEach(function() {
     this.wrapper = mount(
-      <Reductor createStore={createStore} connectorProp="komponent">
+      <Reductor createStore={createStore} connectors={[BazConnector]} connectorProp="komponent">
         <MockRoute komponent={FooConnector} />
         <div className="deeply-nested-connector">
           <MockRoute komponent={BarConnector} />
@@ -53,12 +61,16 @@ describe('<Reductor />', function() {
     expect(this.wrapper.contains(<div>some content</div>)).toBe(true);
   });
 
-  it('generates a reducer function based on child connectors and creates a store based on it', function() {
-    expect(this.store.getState()).toEqual({ common: { foo: {}, bar: {} } });
+  it('generates a reducer function based on props and child connectors and creates a store based on it', function() {
+    expect(this.store.getState()).toEqual({ common: { foo: {}, bar: {}, baz: {} } });
 
     this.store.dispatch({ type: 'common.foo/$set', args: ['text', 'A Text'] });
 
-    expect(this.store.getState()).toEqual({ common: { foo: { text: 'A Text' }, bar: {} } });
+    expect(this.store.getState()).toEqual({ common: { foo: { text: 'A Text' }, bar: {}, baz: {} } });
     expect(this.wrapper.contains(<div>A Text</div>)).toBe(true);
+
+    this.store.dispatch({ type: 'common.baz/$set', args: ['text', 'Not mounted'] });
+
+    expect(this.store.getState()).toEqual({ common: { foo: { text: 'A Text' }, bar: {}, baz: { text: 'Not mounted' } } });
   });
 });