Flummox and react-router example

Question

I'm trying to get a test example of flummox and react-router working together (disclaimer: learning, so apologies for the dumb question).

I've found some neat example here https://github.com/olegsmetanin/react_react-router_flummox_example but it uses the deprecated React.withContext to boot up the app (from index.jsx):

  React.withContext(
    { flux },
    () => React.render(<Handler />, document.getElementById(divid))
    );

Flummox now has a <FluxComponent/> that can be used to set the context but I can't seem to get it to work with a react-router.

If i'm doing this:

router.run((Handler, state) => {
    React.render(
            <FluxComponent flux={flux}>
                <Handler {...state}  />
            </FluxComponent>, 
            document.getElementById('app'));
});

My handler doesn't seem to receive flux in its context (and throws a warning in the console because it's missing).

Feels like I'm missing a vital piece of the puzzle here but can't find a concrete example of this (I can find old flummox/react/react-router example or new flummox/react but not using react-router).

Any suggestions?

Answer 1

Do not forget to define flux in contextTypes of your React component. You can catch context as a second argument in constructor.

export default class MyComponent extends React.Component {
    constructor (props, context) {
        super(props);
        this.AppStore = context.flux.getStore('appStore');
    }
}

MyComponent.contextTypes = {
  flux: React.PropTypes.object.isRequired
};

Some links from my last example:

React.render

Component

Unit test of context