Обновление отображения строки в списке

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

Вопрос в том, кто должен слушать события магазина? Должен ли это быть компонент строк или отдельная строка, которая была обновлена.

Я испытываю желание использовать "строки" в качестве прослушивателя ответа на действие, но меня беспокоит то, что "строки" должны получать данные всей страницы, чтобы она могла отображаться. Это означает, что мне нужно сделать ajax-вызов, чтобы получить все строки с сервера, чтобы мой дисплей оставался синхронизированным?

С другой стороны, если я создаю "строку" в качестве слушателя действия, я нарушаю принцип "единого источника истины", переходящего из ряда в ряд. Более того, у компонента строки нет состояния, так как он получает свою строку от своего родителя / владельца следующим образом

/**
 * 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 в дочернем компоненте.

Каков стандартный / предпочтительный способ обновления затронутой строки в таблице строк?

Answer 1

Прослушиватель событий хранилища должен находиться в самом высоком родительском компоненте, для которого дети делятся данными. Магазин будет единственным слушателем действий. То, как я это организовал, это точка входа app.js, которая требует app.ctrl, api.store и действий. App.ctrl для многостраничного приложения будет соединяться с app.store, который будет содержать состояние приложения (например, какая страница активна). Для app.ctrl также потребуются все page.ctrls, и они будут передавать app.state, а также показывать / скрывать реквизиты на страницах. Page.ctrl обычно подключается к хранилищам, связанным с данными, которые нужны этим страницам. Есть несколько основных примеров на https://github.com/calitek/ReactPatterns.