将状态保持在磁通存储

Question

我刚刚开始，所以我不知道这是否是想要的行为，或者我是否遗漏了什么。我正在使用Flux架构（特别是Reflux，但这不应该是相关的）。在我的超简单测试应用程序中：

var App = React.createClass({
    render: function () {
        return (
            <div className="container">
                <Header />
                <RouteHandler />
            <div>
        );
    }
});

var routes = (
    <Route name="app" path="/" handler={App}>
        <Route name="employees" handler={Employees}/>
        <Route name="company" handler={Company}/>
        <Route name="timesheets" handler={Timesheets}/>
        <DefaultRoute handler={Company} />
    </Route> 
);

Router.run(routes, function (Handler) {
    React.render(<Handler/>, document.getElementById('main'));
});

处理程序是React组件，这是最简单的设置。当应用程序启动时，我按预期登陆“公司”页面。然后，当我转换到“员工”时，一切都很顺利，但当我转换回“公司”时，我发现创建了一个全新的{Company}组件，从而吹走了我的状态。这将导致许多不必要的API调用，除非我做错了或不理解。

有没有办法告诉Route使用现有的处理程序，如果存在并重新渲染它？而不是创建一个新类？

Answer 1

将状态保持在磁通存储

您的一个解决方案是将状态保持在磁通存储中。安装组件后，请在getInitialState()函数中从商店请求数据。

将状态保存在父组件中

如果您不想使用磁通存储（因为它增加了简单示例的复杂性），我建议将状态保留在父组件中，并将其作为支柱传递给您。

当然，这只有在您的父组件未卸载时才有效。我相信示例中的根组件<Handler />应保持在示例中的状态转换之间。

我建议您查看this tutorial，了解如何将道具传递给子组件。

This教程讨论了如何与孩子的父母沟通。

React-router转换总是创建处理程序

1 个答案:

将状态保持在磁通存储

将状态保存在父组件中