react + redux应用程序中的agGrid正在修改基础数据

Z时代
2024-01-10
分类：问答

我在React + Redux应用程序中使用最新的agGrid企业版。

问题是我正在使用内置的agGrid编辑，这是直接修改底层数据，即从redux存储返回的数组。这违反了不变性原则。有没有办法使用/配置agGrid

no来修改数据，但是可以：

对更改做出反应并调用有关更改信息的回调

然后我可以更新redux存储（数组中的一项）

那么agGrid可以检测到数组中只有单个对象被更改，并且它只会刷新单个行

谢谢

回答：

编辑：扩展我的答案与更多细节。

您必须设置一个“

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}
    />

不要忘记react和redux所需的优化项。（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是防止状态发生变化所需的条件。确保您的redux操作可以处理您需要执行的所有操作。这是我的示例：

  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;
}