Javascript 通量/通量：基于状态更改更新路由

使用Fluflible和react路由器，基于状态存储的更改触发路由更改的最简洁的方法是什么

一个示例组件可能接受一些用户输入，并在单击事件上调用一个操作（为了简洁而缩短）

但这假定

setName

操作是同步的。假设一旦操作完成并更新存储，新路由将重新呈现，这在概念上安全吗

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

使用灵活的，

connectToStores

实现，我可以监听对存储状态的谨慎更改：

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

---

如何使用这种类型的存储侦听器来启动路由更改？

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

所以，这就是我要做的：

创建同时执行以下两项的元操作：

setname和navigate

。作为有效载荷，您可以使用如下内容：

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

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

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

---

额外阅读：

为什么一切都在行动？在组件中执行操作以响应存储更改是有风险的。由于Fluxible 0.4，您不能再让操作在另一个调度中调度。这种情况发生的速度比您想象的要快得多，例如，在不使用

setImmediate

或

setTimeout

延迟的情况下，执行一个操作以响应存储中的更改，将杀死您的应用程序，因为存储更改在分派过程中是同步发生的

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

---

以这种方式工作的最终结果是，大多数应用程序逻辑都转移到了操作上，组件变成了简单的视图，这些视图只设置和忘记操作，以响应用户交互（单击/滚动/悬停/…，只要它不响应存储更改）

最好的方法是按照@ambroos的建议创建一个新动作，

设置名称并导航

。对于导航，请使用

navigateAction

，则只需将url作为参数。 像这样的,

import async from 'async';
import setName from 'some/path/setName'; 

export default function setNameAndNavigate(context, params, done) {
   async.waterfall([
      callback => {
          setName(context, params, callback);
      },
      (callback) => {
          navigate(context, {
             url: '/someNewUrl',
          }, callback);
       }
   ], done);    
}

---

尽可能让您的操作成为主要工作人员。

谢谢，从操作内部启动导航是我最初计划的，但我认为一定是因为路由器在actionContext上不可用。只要操作保持无状态且不保留它，在有效负载中传递它似乎是可以的。我要好好玩玩，看看我能想出什么。谢谢。这是使用fluxibleContexts的一个缺点。根据通量指南，路由器应在组件中以只读方式使用，并且对路由器有影响的操作只能从操作中获得。导航是一种“状态更改”。如果没有React路由器，这将是对RouteStore/ApplicationStore的更改。从组件内部执行此操作会违反通量。将路由器传递给操作是一种解决方法，但最终“更好”。请同意直接从组件调用它不是一种方法。看起来最好的答案可能是创建一个与react router类似但使用react router的插件

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

import async from 'async';
import setName from 'some/path/setName'; 

export default function setNameAndNavigate(context, params, done) {
   async.waterfall([
      callback => {
          setName(context, params, callback);
      },
      (callback) => {
          navigate(context, {
             url: '/someNewUrl',
          }, callback);
       }
   ], done);    
}