使用 React 设计 Ruby on Rails 应用程序的正确方法是什么

Question

我正在使用 Ruby on Rails 和 React 做一些项目。我正在使用react-rails gem。我对如何正确设计 Rails 和 React 应用程序的架构有一些疑问。我的问题主要是关于在 Rails 和 React 之间传递数据。

我知道这主要有两种方法。第一种也是最常见的方法是 Rails 中的单独 API 和 React 中的前端应用程序。这带来了一些优点和缺点。我必须开发和维护两个独立的应用程序，但在未来，我可以轻松地将现有 API 重用于其他东西，例如移动应用程序。通过这种方式，我的前端 React 向 Rails API 请求数据。

我选择的第二种方式和方式是使用 Rails 中内置的 webpacker、react-rails 或 react-on-rails 开发单体应用程序。这样，我可以简单地在我的 Rails 控制器中获取数据

@foo = Model.find(id)

并将其传递给我的 React 组件在视图中

=react_component("Foo", {foo: @foo})

但是当我得到一些具有更多依赖项的更复杂的模型时，问题就开始了。例如，假设我有一个模型：

class Foo < ApplicationRecord
  belongs_to: :user
  has_many: :bar #which is some nested resources

现在我想创建一个模型Foo 的索引页面，它将显示所有Foo's、user 数据并连接到它Bar's。在纯 Rails 应用程序中，我可以简单地在控制器中询问 @foo ，稍后在视图中只需使用 @foo.user.nick 。但是当我使用 react 时，我需要在我的控制器中获取所有这些信息，然后使用 props 传递给 React 组件，这在我看来会造成很多混乱。

这是我的问题：在 Rails 和 React 之间传递数据的正确方法是什么？

Answer 1

正如您所说，最干净的选择是在控制器中获取并使用道具传递。

如果您将其作为道具进行，最好的方法是利用 Rails 的 as_json 方法及其可链接选项：

• 仅
• 除了
• 方法
• 包括

还有一个例子：

@my_component_data = @foo.as_json(include: { user: { only: [:id, :name, :nick] } }

最终您可能会选择 ActiveModelSerializers 之类的东西，但我个人更喜欢避免速度损失和增加复杂性，其他人对此深信不疑。