javascript - 助焊剂/助焊剂 : Updating routes based on state change

Question

使用 Fluxible 和 React 路由器根据状态存储的更改触发路由更改的最简洁方法是什么？

示例组件可能会接受一些用户输入并在点击事件上调用操作(为简洁起见，已缩短)

class NameInput extends React.Component {

    constructor (props) {
        super(props);
        this.state = props.state;
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick (event) {
        this.context.executeAction(setName, {name:'Some User Value'});
    }

    render () {
        return (
            <div>
                <input type="button" value="Set Name" onClick={this.handleClick} />
            </div>
        );
    }
}

export default Home;

handleClick 方法执行一个 Action，该 Action 可以用我们的新值更新 Store。

但是如果我也希望在商店更新后触发导航怎么办？我可以添加router上下文类型并在执行操作后直接调用转换方法:

this.context.executeAction(setName, {name:'Some User Value'});
this.context.router.transitionTo('some-route');

但这假设 setName 操作是同步的。假设一旦操作完成并且存储更新，新路线将重新渲染，这在概念上安全吗？

或者，原始组件是否应该监听存储更改并根据对存储状态的某些评估启动路由转换？

使用 Fluxible、connectToStores 实现，我可以监听 Store 状态的谨慎更改:

NameInput = connectToStores(NameInput, [SomeStore], function (stores, props) {
    return {
        name: stores.SomeStore.getState().name
    }
});

如何使用这种类型的存储监听器来发起路由更改？

Answer 1

我在自己的应用程序中注意到，对于这些类型的流程，让操作完成所有艰苦的工作通常更安全。这里令人烦恼的是，无法通过操作访问路由器。

所以，这就是我要做的:

创建一个执行以下两项操作的元操作:setNameAndNavigate。作为有效负载，您可以使用如下内容:

{
   name: 'Value',
   destination: {to: 'some-route', params: []},
   router: this.context.router
}

然后，在您的操作中，在 setName 完成时进行导航。

这并不理想，尤其是将路由器传递给操作。可能有某种方法可以将路由器附加到操作上下文，但这并不像我希望的那么简单。不过，这可能是一个很好的起点。

---

额外阅读:

为什么一切都在行动中？在组件中执行操作来响应存储更改是有风险的。从 Fluxible 0.4 开始，您不能再让操作在另一个调度内调度。这种情况发生的速度比您想象的要快得多，例如，执行一个操作来响应商店中的更改，而不使用 setImmediate 或 setTimeout 延迟它，将会杀死您的应用程序因为存储更改在调度期间同步发生。

但是，在操作内部，您可以轻松执行操作和分派(dispatch)，并等待它们完成后再执行下一个操作。

以这种方式工作的最终结果是，您的大部分应用程序逻辑已转移到操作，并且您的组件变成简单的 View ，这些 View 仅响应用户交互(点击/滚动/悬停/...，只要它不是响应商店更改)。