AgGrid в приложении Reaction + Redx изменяет базовые данные - PullRequest
Новая
       106

AgGrid в приложении Reaction + Redx изменяет базовые данные

0 голосов
/ 23 мая 2019

Я использую последнюю версию AgGrid Enterprise в приложении «Response + Redux».

Проблема заключается в том, что я использую встроенное редактирование agGrid, и это изменяет непосредственно лежащие в основе данные, то есть массив, который возвращается из избыточного хранилища. Это нарушает принцип неизменности. Есть ли способ использовать / настроить agGrid нет, чтобы изменить данные, но:

  • реагирует на изменения и перезванивает с информацией об изменении
  • тогда я мог бы обновить хранилище приставок (один элемент в массиве)
  • тогда agGrid сможет обнаружить, что изменился только один объект в массиве, и обновит только одну строку

Спасибо

1 Ответ

1 голос
/ 29 июня 2019

РЕДАКТИРОВАТЬ: Расширение моего ответа более подробно.

Вы должны установить функцию "valueSetter" и установить ее для каждого столбца.Самый простой способ сделать это с defaultColDef.Краткое примечание: каждая строка в моей таблице является «транзакцией», поэтому вы увидите ссылку на транзакции, а не на какую-либо другую форму идентификации.

Например: 

<AgGridReact
      // OPTIONS REQUIRED FOR OPTIMIZATION WITH REACT
      reactNext
      deltaRowDataMode
      getRowNodeId={data => data.transaction_id}

      // OTHER OPTIONS
      rowSelection="multiple"
      editType="fullRow"

      // TABLE DATA
      defaultColDef={{ ...defaultColDef, valueSetter }}
      columnDefs={columns}
      rowData={transactions}

      // DISPLAY
      rowClassRules={rowClassRules}

       // EVENTS
      onGridReady={onGridReady}
      onRowEditingStarted={onRowEditingStarted}
      onRowEditingStopped={onRowEditingStopped}

    />

Дон 'не забудьте пункты оптимизации, необходимые для реакции и редукции.(reactNext, deltaRowDataMode, getRowNodeId).

Определяемый мной defaultColDef прост: 

defaultColDef: {
  resizable: true,
  sortable: true,
  filter: true,
  editable: true,
},

И valueSetter - это функция, определяемая очень просто как: 

const valueSetter = (params) => {
  allActions.columnEdit(params.data, params.oldValue, params.newValue, params.colDef);
  return false;
};

Где allActions.columnEdit просто вызывает мое действие Redux, которое я определил в импорте, а затем связывается с connect () и mapDispatchToProps.Возвращение false - это то, что требуется для предотвращения изменения состояния.Удостоверьтесь, что ваше излишнее действие обрабатывает все, что вам нужно.Вот мой пример: 

  case actionTypes.COLUMN_EDIT: {
  // FOR EACH COLUMN EDITED, CHECK IF ANYTHING CHANGED
  // POST CHANGES TO NEW STATE
  if (payload.oldValue !== payload.newValue) {
    const account = 'acct01';
    const column = payload.colDef.field;
    const index = state[account].transactions.findIndex(
      t => t.transaction_id === payload.t.transaction_id,
    );
    return produce(state, (draft) => {
      const transaction = draft[account].transactions[index];
      transaction[column] = payload.newValue;
    });
  }
  return state;
}

Надеюсь, это поможет.Кажется, это МНОГО дополнительного обходного пути для того, что должно быть обработано непосредственно Ag-Grid, но, возможно, они внесут в него некоторые дальнейшие разработки.

https://www.ag -grid.com / javascript-grid-value-setters /

...