从 flummox 访问 react-router action/store

Question

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

更新：

下面是正确答案，但我想补充一些细节。

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

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

在 express 中，如果重定向布尔值是 true，我只是用当前的查询参数重定向到它。如果它是假的，我会通过更新商店的操作传递数据。然后我使用 react renderToString，序列化存储以便 clint 端可以 bootstrap，并将呈现的页面发送到客户端。

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

希望这对某人有所帮助。

Answer 1

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

但我建议您不要在操作中产生副作用，例如调用路由器。 Actions 应该只关心改变你的应用程序状态，仅此而已。应该可以从应用程序中需要执行操作封装的突变的任何地方调用相同的操作。

因此，如果您在某个动作期间切换路线，您基本上就是将该动作与该特定用例联系起来。让我们举个例子。您有一个待办事项列表，底部有一个输入框，用于添加新的待办事项。对于该用例，在保存待办事项后切换路线可能很有用。也许您切换到 Recent Todos 或其他东西。但是随后出现了一个新的用例，您希望能够在另一个工作流程中添加新的待办事项，也许用户正在计划她的一周并且应该能够在不同的日子添加待办事项。您想要添加待办事项的相同操作，但您当然不想切换路线，因为用户仍在计划一周。

我没有经常使用 Flummox，但是根据我对您的 Flux 对象的理解，return无论您触发什么动作，return都会触发一个动作。因此，不要将路由更改放在您的操作中，请确保 return 来自操作的响应，并让您的组件决定是否应更改路由。像这样：

// 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 class.

中的 addTodoAndSwitchRoute 方法中

从 flummox 访问 react-router action/store

Accessing react-router from flummox action/store

flux

reactjs

react-router

flummox