FluxComponent not working properly

[burabure]

For some reason FluxComponent isn't working properly for me;

1.- if I put the fluxcomponent on the top component it's children get the correct props, but their children don't get any props; no props.flux or props from stores.

2.- if I don't wrap the top component and put the fluxcomponent on a lower component, their children don't get any props, even if I call connectToStores. Also I get this error:
Uncaught Error: fluxMixin: Could not find Flux instance. Ensure that your component has either this.context.fluxorthis.props.flux.

Here is the basic code structure:

Top Component.

require("babelify/polyfill");
var React = require('react');
var AppFlux = require('./AppFlux.js');
var FluxComponent = require('flummox/component');
var App = require('./components/App.jsx');

const flux = new AppFlux();

React.render(
  <FluxComponent flux={flux} connectToStores={'test'}>
    <App />
  </FluxComponent>,
  document.getElementById('app')
);

App Component.

var React = require('react');
var MainViewport = require('./MainViewport.jsx');
var FluxComponent = require('flummox/component');


class App extends React.Component {

  constructor(props) {
      super(props);
  };

  render() {
    console.log("App: ", this.props);
    return (
      <FluxComponent> // if I flux={flux} connectToStores={'test'} here, no props get passed. also get an error
        <div className="app container">
          <MainViewport />
        </div>
      </FluxComponent>
    );
  }
}

module.exports = App;

My package deps

"dependencies": {
    "immutable": "^3.6.2",
    "react": "^0.13.0",
    "mobile-detect": "^1.0.0",
    "hammerjs": "^2.0.4",
    "flummox": "^3.4.0"
  },
  "devDependencies": {
    "eslint": "^0.18.0",
    "eslint-plugin-react": "^2.0.2",
    "browserify": "^9.0.3",
    "watchify": "^3.1.0",
    "envify": "^3.4.0",
    "jest-cli": "^0.4.0",
    "uglify-js": "~2.4.15",
    "babelify": "^6.0.1",
    "autoprefixer": "^5.1.0",
    "node-sass": "^2.0.1",
    "onchange": "^1.0.0",
    "parallelshell": "^1.0.4"
  },

[istarkov]

There is an error in your 'App Component' code if you uncomment line - if I flux={flux}
flux variable used in expression flux={flux} is undefined.
You can get this error in browser just use strict mode for code. (add 'use strict'; at top of each js file)
Or use some linter - for example eslint + react plugin.

[burabure]

@istarkov when i put that code there I also

var AppFlux = require('./AppFlux.js');
const flux = new AppFlux();

in the module like im suposed to.

also im using eslint + react plugin, so like you've said I would get a big warning.

[istarkov]

You also need to remove <div className="app container"> because of props (flux etc) assigned to immediate children of FluxComponent - and in you example this is div

[burabure]

yup, that was the issue. I think there must be a better way to deal with passing the props to components, maybe a higher order component would do better and cleaner job.

---

Oops, just noticed https://github.com/acdlite/flummox/blob/master/src/addons/connectToStores.js
testing it out.

---

The HoC is sooooo much nicer!, its behavior is much more intuitive, and the pattern is pretty similar to Relay's + GraphQL. I think this is a mayor plus of Flummox and should be explained better and presented as the default/recommended pattern in the readme/Docs.

---

submitted a proposal for including better Docs showcasing the HoC here #136