更新列表中一行的显示

Question

我正在实现一个基于 React - Reflux 架构的应用程序，它显示页面中的行列表。列表中的每一行都允许对属性进行内联编辑。行中的保存按钮调用回流操作，将数据更新到服务器。

因此，对于正向流，这看起来不错

rows/row/savebtn => reflux-action => reflux-store => server

现在，刷新视图

server => reflux-store => trigger => where???

我看到 2 个选项：

server => reflux-store => trigger (list of rows) => rows
server => reflux-store => trigger (row changed) => row

问题是，谁应该监听商店事件？更新的应该是行组件还是单个行。

我很想使用 "rows" 作为动作响应侦听器，但我担心 "rows" 应该获取整个页面数据以便它可以呈现。这意味着，我需要进行 ajax 调用以从服务器获取所有行，以便我的显示保持同步？

另一方面，如果我将 "row" 作为动作侦听器，我是否违反了 'single source of truth' 逐行传递的原则。此外，行组件没有状态，因为它从 parent/owner 中获取行，就像这样

/**
 * creates a HTML table to show requirements
 **/
var ReqTable = React.createClass({
  render: function() {
    var rows = [];
    rows = this.props.data.map(function(row) {
      return ( <ReqRow key={row.id} row={row} />);
    });
    return (<div>{rows}</div>);
  }
});

正在通过发送行数据创建记录行，在子组件中读取为this.props.row。

更新行 table 中受影响的行的 standard/preferred 方法是什么？

Answer 1

商店事件侦听器应该在子级共享数据的最高父组件中。商店将是唯一的动作侦听器。我组织它的方式是入口点是 app.js，它需要 app.ctrl、api.store 和操作。多页面应用程序的 app.ctrl 将与包含应用程序状态（例如哪个页面处于活动状态）的 app.store 连接。 app.ctrl 还需要所有 page.ctrls 并将 app.state 和 show/hide 道具传递给页面。 page.ctrl 通常会连接到与那些页面所需的数据相关的商店。 https://github.com/calitek/ReactPatterns.

中有一些基本示例

更新列表中一行的显示

Updating the display of a row in a list

flux

reactjs

refluxjs