Flummox和react路由器示例

Question

我正在尝试获得一个氟莫克斯和反应路由器协同工作的测试示例(免责声明:学习，所以为这个愚蠢的问题道歉)。

我在这里找到了一些很好的例子，示例，但是它使用不推荐的React.withContext来引导应用程序(来自index.jsx)：

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

Flummox现在有一个<FluxComponent/>，可以用来设置上下文，但我似乎无法让它与react-router一起工作。

如果我这么做的话

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

我的处理程序似乎没有在其上下文中接收到流量(并在控制台中抛出一个警告，因为它丢失了)。

在这里，我感觉好像错过了一个重要的谜题，但找不到具体的例子(我可以找到旧的flummox/ new /new路由器示例或新flummox/react，但不使用react路由器)。

有什么建议吗？

Answer 1

不要忘记在你的反应组件的contextTypes中定义通量。您可以在构造函数中捕获上下文作为第二个参数。

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
};

来自我的最后一个例子的一些链接

React.render

组件

上下文单元测试