使用 React 管理 Rails 中的相关模型

Question

我有以下数据关系：

NewsfeedItem.rb
  has_many :comments
  has_many :likes

Like.rb
  belongs_to :newsfeed_item

Comment.rb
  belongs_to :newsfeed_item

在 html.erb 文件中，管理这些关系很容易。例如：

# in newsfeed_items/index.hmtl.erb
<% @newsfeed_items.each do |item| %>
  <div>

    <div>
      <h2><%= item.title %></h2>
      <p><%= item.content %></p>
    </div>

    <p>Likes: <%= item.likes.length %></p>

    <ul>
      <% item.comments.each do |comment| %>
        <li><%= comment.text %></li>
      <% end # comments.each %>
   </ul>

  </div>
<% end # newsfeed_items.each%>

但是，当我想将其外推到 React 中时，我正在努力解决如何正确分离关注点的问题。当前 newsfeed_items 组件：

# in components/newsfeed_items.jsx
var NewsfeedItems = React.createClass({
  getInitialState: function() {
    return {items: []};
  },
  loadItems: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      type: 'GET', 
      success: function(data) {
        this.setState({items: data});
      }.bind(this)
    });
  }, 
  componentDidMount: function() {
    this.loadItems();
  },
  render: function() {
    var items = this.state.data.map(function(item) {
      return (<NewsfeedItem key={item.id} title={item.title} content={item.content} />
    });
    return (
      <div className="c-newsfeed-list">
        {items}
      </div>
    );
  }
});

此组件从 newsfeed_items_controller 检索项目：

# in newsfeed_items_controller.rb
def index
  respond_to do |format| 
    format.html
    format.json {render json: @newsfeed_items}
  end
end

如果我将 newsfeed_items 的 likes 和 comments 附加到从 newsfeed_items_path 返回的 json 上，我似乎会感到困惑.然而，为每个 newsfeed_item 设置单独的 ajax 调用以获取其相关的 likes 和 comments 似乎没有必要。

哪个是最佳实践/最佳解决方案？

Answer 1

你是对的，多次 API 调用是不必要的。这是我在生产中使用的两个替代方案：

JSON Builder Gem 这允许您通过 API
覆盖模型中的 as_json 方法以合并您的关联对象。默认情况下 render json: @newsfeed_items 调用 @newsfeed_items.to_json 因此通过覆盖方法以包含它的关联，您可以获得任何您想要的。

使用 React 管理 Rails 中的相关模型

Managing related Models in Rails with React

ruby-on-rails

reactjs

separation-of-concerns