Question

我希望能够在Flummox操作中进行API调用，并根据响应进行不同的转换。我可以将路由器传递给动作调用，但我正在寻找可能更好的方法的建议。

更新：

正确答案如下，但我想在此添加一些细节。

我正在做一个同构应用程序1.需要从api获取数据2.可能需要根据api响应重定向。无论我做什么都需要通过express.js应用程序并通过反应来完成。

我创建了一个小的lib来执行api调用并返回一些结果。我传递了一个对象（从快递查询服务器端的params对象或我为反应端创建的类似对象）。此lib发出请求，确定是否需要重定向并传回错误，路径（字符串），重定向（布尔值）和数据（json）。

在express中，如果重定向布尔值为true，我只需使用当前查询参数重定向到它。如果它是假的，我通过更新商店的动作将数据传递给通量。然后我使用react，serialize存储来渲染renderToString，以便clint-side可以引导，并将呈现的页面发送到客户端。

在反应中，重定向布尔值并不重要，我从lib获取响应，将数据传递给我的flux操作，然后转换到路径的任何位置。真的没有重定向的概念。无论如何都要走这条路。

希望这对某人有帮助。

Answer 1

在我的设置中，我有自己的路由器模块，它只包含我在启动时创建的react-router实例。这使得应用程序的任何部分都可以轻松地只需要该模块并执行它所需的功能。

但是我建议你不要在你的行动中调用路由器等副作用。操作应该关注于改变应用程序状态，仅此而已。应该可以从应用程序中的任何位置调用相同的操作，该操作需要执行操作封装的突变。

因此，如果您在某个操作过程中切换路由，则基本上将该操作与特定用例绑定在一起。我们来举个例子。你有一个待办事项列表，底部有一个输入框来添加一个新的待办事项。对于该用例，在保存待办事项后切换路径可能很有用。也许你切换到Recent Todos或者什么。但随后出现了一个新的用例，您希望能够在另一个工作流程中添加新的待办事项，也许用户正在计划她的一周，并且应该能够在不同的日子添加待办事项。您想要添加待办事项的相同操作，但您肯定不想切换路线，因为用户仍在计划一周。

我还没有经常使用Flummox，但根据我的理解，你的Flux对象会返回触发动作时动作返回的内容。因此，不要将路径更改放在操作中，请确保从操作返回响应，并让组件决定是否应更改路径。像这样：

// todo-action.js
class TodoActions extends Actions {
  createMessage(todo) {
    return TodoStore.saveToServer(todo);
  }
}

// todo-list.js
const TodoList extends React.Component {
  render() {
    ...
  }
  addTodo(todo) {
    this.props.flux.addTodo(todo).then(response => {
      if (response.some.prop === someValue) {
        this.props.router.transitionTo(...);
      }
    });
  }
}

这样，行动仍然很好地与路线变化分离。如果您想在多个地方进行路由切换，可以将其封装在Flux类的addTodoAndSwitchRoute方法中。

从flummox action / store访问react-router

1 个答案: