代码之家 › 专栏 › 技术社区 › dragonfly

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

ag-grid-react ag-grid redux reactjs

0

dragonfly · 技术社区 · 5 年前

我正在react+redux应用程序中使用最新的agGrid enterprise。

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

对变更做出反应,并打电话告知变更信息
然后我可以更新redux商店(数组中的一项)
然后agGrid可以检测到数组中只有一个对象被更改,并且只刷新一行

谢谢

0 回复 | 直到 5 年前

1

9

Scott F 5 年前

编辑:用更多细节扩展我的答案。

您必须设置一个“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;
};

所有的一切都在那里。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;
}

希望这有帮助。对于Ag Grid应该直接处理的问题,似乎有很多额外的解决方法,但也许他们会在未来进行一些开发。

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