noflux-provider.jsx

import React, { Component } from 'react';
import { connect, state } from '@noflux/react';

const traversal = (node, callback) => {
  React.Children.map(node, child => {
    callback(child);
    if (child.props && child.props.children) {
      traversal(child.props.children, callback);
    }
  })
};

class Provider extends Component {
  render() {
    const {
      children,
    } = this.props;
    traversal(children, component => {
      if (typeof component === 'string') {
        return;
      }
      if (typeof component.type === 'string') {
        return;
      }
      if (!component.type.__noflux) {
        connect(component.type);
      }
    })
    return React.Children.only(children);
  }
}

state.set('data', 0);
class App extends Component {
  render() {
    return (
      <div>
        {state.get('data')}
        <button onClick={() => state.set('data', state.get('data') + 1)}>+1</button>
      </div>
    )
  }
}

export default class TestPage extends Component {
  render() {
    return (
      <Provider>
        <div>
          <span>1</span>
          <App />
          <span>3</span>
        </div>
      </Provider>
    );
  }
}