Flummox 和反应路由器示例

Question

我正在尝试获取 flummox and react-router 协同工作的测试示例（免责声明：学习，对于这个愚蠢的问题深表歉意）。

我在这里找到了一些简洁的示例 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 现在有一个 <FluxComponent/> 可以用来设置上下文，但我似乎无法让它与 react-router 一起工作。

如果我这样做：

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

我的处理程序似乎没有在其上下文中收到通量（并在控制台中抛出警告，因为它丢失了）。

感觉我在这里遗漏了一个重要的难题，但找不到具体的例子（我可以找到旧的 flummox/react/react-router 例子或新的 flummox/react 但不使用反应-路由器).

有什么建议吗？

Answer 1

不要忘记在 React 组件的 contextTypes 中定义 flux。您可以将上下文作为构造函数中的第二个参数。

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

我的一些链接 last example:

React.render

Component

Unit test of context

Flummox 和反应路由器示例

Flummox and react-router example

javascript

flux

reactjs